@aurodesignsystem/auro-nav/dist/index.d.ts

auro-nav HTML custom element

import type { AuroAnchorlink } from "src/auro-anchorlink.js";
import type { AuroBreadcrumb } from "src/auro-breadcrumb.js";
import type { AuroNav } from "src/auro-nav.js";

/**
 * This type can be used to create scoped tags for your components.
 *
 * Usage:
 *
 * ```ts
 * import type { ScopedElements } from "path/to/library/jsx-integration";
 *
 * declare module "my-library" {
 *   namespace JSX {
 *     interface IntrinsicElements
 *       extends ScopedElements<'test-', ''> {}
 *   }
 * }
 * ```
 *
 * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
 */
export type ScopedElements<
  Prefix extends string = "",
  Suffix extends string = ""
> = {
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
};

type BaseProps<T extends HTMLElement> = {

  /** Content added between the opening and closing tags of the element */
  children?: any;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  class?: string;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  className?: string;
  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
  classList?: Record<string, boolean | undefined>;
  /** Specifies the text direction of the element. */
  dir?: "ltr" | "rtl";
  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;
  /** For <label> and <output>, lets you associate the label with some control. */
  htmlFor?: string;
  /** Specifies whether the element should be hidden. */
  hidden?: boolean | string;
  /** A unique identifier for the element. */
  id?: string;
  /** Keys tell React which array item each component corresponds to */
  key?: string | number;
  /** Specifies the language of the element. */
  lang?: string;
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
  ref?: T | ((e: T) => void);
  /** Adds a reference for a custom element slot */
  slot?: string;
  /** Prop for setting inline styles */
  style?: Record<string, string | number>;
  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
  tabIndex?: number;
  /** Specifies the tooltip text for the element. */
  title?: string;
  /** Passing 'no' excludes the element content from being translated. */
  translate?: "yes" | "no";
  /** The popover global attribute is used to designate an element as a popover element. */
  popover?: "auto" | "hint" | "manual";
  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
  popovertargetaction?: "show" | "hide" | "toggle";

} ;

type BaseEvents = {


};



export type AuroAnchorlinkProps = {
  /** If set, the link is currently the active link in the parent `auro-nav`. */
  "active"?: AuroAnchorlink['active'];
  /** Defines whether the component will be on lighter or darker backgrounds. */
  "appearance"?: AuroAnchorlink['appearance'];
  /** If true, the linked resource will be downloaded when the hyperlink is clicked. */
  "download"?: AuroAnchorlink['download'];
  /** If true, the anchorlink will have a fluid-width UI. */
  "fluid"?: AuroAnchorlink['fluid'];
  /** Defines the URL of the linked page. */
  "href"?: AuroAnchorlink['href'];
  /** Defines the language of an element. */
  "layout"?: AuroAnchorlink['layout'];
  /** DEPRECATED - use `appearance="inverse"` instead. */
  "ondark"?: AuroAnchorlink['ondark'];
  /** If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. */
  "referrerpolicy"?: AuroAnchorlink['referrerpolicy'];
  /** Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. */
  "rel"?: AuroAnchorlink['rel'];
  /** Defines the shape of an element. */
  "shape"?: AuroAnchorlink['shape'];
  /** Defines the size of an element. */
  "size"?: AuroAnchorlink['size'];
  /** Defines where to open the linked document. */
  "target"?: AuroAnchorlink['target'];
  /** Defines the type of hyperlink. */
  "type"?: AuroAnchorlink['type'];
  /** Sets button variant option when using `type="cta"`. */
  "variant"?: AuroAnchorlink['variant'];
  /** DEPRECATED - use `appearance` attribute. */
  "onDark"?: AuroAnchorlink['onDark'];
  /** Defines ARIA roles; currently supports `button` for extended experiences. */
  "role"?: AuroAnchorlink['role'];

  /**  */
  "onauroAnchorLink-activated"?: (e: CustomEvent<CustomEvent>) => void;
}


export type AuroBreadcrumbProps = {
  /** Defines whether the component will be on lighter or darker backgrounds. */
  "appearance"?: AuroBreadcrumb['appearance'];
  /** If true, the linked resource will be downloaded when the hyperlink is clicked. */
  "download"?: AuroBreadcrumb['download'];
  /** If true and `type="cta"`, the hyperlink will have a fluid-width UI. */
  "fluid"?: AuroBreadcrumb['fluid'];
  /** Defines the URL of the linked page. */
  "href"?: AuroBreadcrumb['href'];
  /** Defines the language of an element. */
  "layout"?: AuroBreadcrumb['layout'];
  /** DEPRECATED - use `appearance="inverse"` instead. */
  "ondark"?: AuroBreadcrumb['ondark'];
  /** If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. */
  "referrerpolicy"?: AuroBreadcrumb['referrerpolicy'];
  /** Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. */
  "rel"?: AuroBreadcrumb['rel'];
  /** Defines the shape of an element. */
  "shape"?: AuroBreadcrumb['shape'];
  /** Defines the size of an element. */
  "size"?: AuroBreadcrumb['size'];
  /** Defines where to open the linked document. */
  "target"?: AuroBreadcrumb['target'];
  /** Defines the type of hyperlink. */
  "type"?: AuroBreadcrumb['type'];
  /** Sets button variant option when using `type="cta"`. */
  "variant"?: AuroBreadcrumb['variant'];
  /** DEPRECATED - use `appearance` attribute. */
  "onDark"?: AuroBreadcrumb['onDark'];
  /** Defines ARIA roles; currently supports `button` for extended experiences. */
  "role"?: AuroBreadcrumb['role'];


}


export type AuroNavProps = {
  /** If set, defines the currently active link. */
  "activeLink"?: AuroNav['activeLink'];
  /** Defines the container that anchor links navigate within. */
  "anchorNavContent"?: AuroNav['anchorNavContent'];
  /** If true, the home icon will not be displayed before first `auro-breadcrumb`. */
  "noHomeIcon"?: AuroNav['noHomeIcon'];


}

  export type CustomElements = {


  /**
     * The `auro-anchorlink` element is used to create anchor navigation links within a page, typically used inside an `auro-nav` component.
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `active`: If set, the link is currently the active link in the parent `auro-nav`. 
 * - `appearance`: Defines whether the component will be on lighter or darker backgrounds. 
 * - `download`: If true, the linked resource will be downloaded when the hyperlink is clicked. 
 * - `fluid`: If true, the anchorlink will have a fluid-width UI. 
 * - `href`: Defines the URL of the linked page. 
 * - `layout`: Defines the language of an element. 
 * - `ondark`: DEPRECATED - use `appearance="inverse"` instead. 
 * - `referrerpolicy`: If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. 
 * - `rel`: Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. 
 * - `shape`: Defines the shape of an element. 
 * - `size`: Defines the size of an element. 
 * - `target`: Defines where to open the linked document. 
 * - `type`: Defines the type of hyperlink. 
 * - `variant`: Sets button variant option when using `type="cta"`. 
 * - `onDark`: DEPRECATED - use `appearance` attribute. (property only)
 * - `role`: Defines ARIA roles; currently supports `button` for extended experiences. (property only)
 * - `safeUri`: Returns a safe URI based on the provided `href`.
 * If `href` is truthy, it generates a safe URL using the `safeUrl` function.
 * Otherwise, it returns an empty string. (property only) (readonly)
 * 
 * ## Events
 * 
 * Events that will be emitted by the component.
 * 
 * - `auroAnchorLink-activated`: undefined
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `_initializeDefaults() => void`: undefined
 * - `register(name?: string = "auro-anchorlink") => void`: This will register this element with the browser.
 * 
 * ## CSS Parts
 * 
 * Custom selectors for styling elements within the component.
 * 
 * - `link`: Allows styling to be applied to the `a` element.
 * - `targetIcon`: Allows styling to be applied to the icon that appears next to the hyperlink.
  */
    "auro-anchorlink": Partial<AuroAnchorlinkProps & BaseProps<AuroAnchorlink> & BaseEvents>;


  /**
     * The `auro-breadcrumb` element is a horizontal navigation component that indicates the current page's location within a navigational hierarchy, typically used within an `auro-nav` component.
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `appearance`: Defines whether the component will be on lighter or darker backgrounds. 
 * - `download`: If true, the linked resource will be downloaded when the hyperlink is clicked. 
 * - `fluid`: If true and `type="cta"`, the hyperlink will have a fluid-width UI. 
 * - `href`: Defines the URL of the linked page. 
 * - `layout`: Defines the language of an element. 
 * - `ondark`: DEPRECATED - use `appearance="inverse"` instead. 
 * - `referrerpolicy`: If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. 
 * - `rel`: Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. 
 * - `shape`: Defines the shape of an element. 
 * - `size`: Defines the size of an element. 
 * - `target`: Defines where to open the linked document. 
 * - `type`: Defines the type of hyperlink. 
 * - `variant`: Sets button variant option when using `type="cta"`. 
 * - `onDark`: DEPRECATED - use `appearance` attribute. (property only)
 * - `role`: Defines ARIA roles; currently supports `button` for extended experiences. (property only)
 * - `safeUri`: Returns a safe URI based on the provided `href`.
 * If `href` is truthy, it generates a safe URL using the `safeUrl` function.
 * Otherwise, it returns an empty string. (property only) (readonly)
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `_initializeDefaults() => void`: undefined
 * - `register(name?: string = "auro-breadcrumb") => void`: This will register this element with the browser.
 * 
 * ## CSS Parts
 * 
 * Custom selectors for styling elements within the component.
 * 
 * - `link`: Allows styling to be applied to the `a` element.
 * - `targetIcon`: Allows styling to be applied to the icon that appears next to the hyperlink.
  */
    "auro-breadcrumb": Partial<AuroBreadcrumbProps & BaseProps<AuroBreadcrumb> & BaseEvents>;


  /**
     * The `auro-nav` element provides a way to show users a secondary navigation aid that helps them understand the relation between the location of their current page and higher level pages.
 * 
 * ## Attributes & Properties
 * 
 * Component attributes and properties that can be applied to the element or by using JavaScript.
 * 
 * - `activeLink`: If set, defines the currently active link. 
 * - `anchorNavContent`: Defines the container that anchor links navigate within. 
 * - `noHomeIcon`: If true, the home icon will not be displayed before first `auro-breadcrumb`. 
 * 
 * ## Slots
 * 
 * Areas where markup can be added to the component.
 * 
 * - `mobileToggleCollapsed`: Slot for button text in mobile when content is collapsed.
 * - `mobileToggleExpanded`: Slot for button text in mobile when content is expanded.
 * - `Slot`: for insertion of navigation links.
 * 
 * ## Methods
 * 
 * Methods that can be called to access component functionality.
 * 
 * - `_initializeDefaults() => void`: undefined
 * - `register(name?: string = "auro-nav") => void`: This will register this element with the browser.
  */
    "auro-nav": Partial<AuroNavProps & BaseProps<AuroNav> & BaseEvents>;
  }

export type CustomCssProperties = {

}


declare module 'react' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare module 'preact' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare module '@builder.io/qwik' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare module '@stencil/core' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare module 'hono/jsx' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare module 'react-native' {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}

declare global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  
}
declare global {
  namespace svelteHTML {
    interface IntrinsicElements extends CustomElements {}
  } 
}


export { AuroAnchorlink, AuroBreadcrumb, AuroNav } from "./index.js";