@xplortech/apollo-core 2.4.3 → 2.6.0

package/dist/docs/xpl-pagination/readme.md

@@ -0,0 +1,55 @@
+# xpl-pagination
+
+Pagination bar allows users to navigate pages of content.
+
+> **Note:** This component is in beta. Use with caution and expect updates before the full release.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute                | Description                                                                                       | Type      | Default              |
+| --------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- | --------- | -------------------- |
+| `currentPage`         | `current-page`           | The current active page (1-based). Marked as mutable so we can update from inside this component. | `number`  | `1`                  |
+| `rowsPerPageOptions`  | `rows-per-page-options`  | The rows-per-page options offered in the dropdown.                                                | `string`  | `'10,25,50,100,150'` |
+| `selectedRowsPerPage` | `selected-rows-per-page` | The currently selected rows-per-page.                                                             | `number`  | `10`                 |
+| `totalPages`          | `total-pages`            | Total number of pages.                                                                            | `number`  | `1`                  |
+| `withPageControl`     | `with-page-control`      | Whether to allow go to page navigation.                                                           | `boolean` | `false`              |
+
+
+## Events
+
+| Event               | Description                                 | Type                  |
+| ------------------- | ------------------------------------------- | --------------------- |
+| `pageChange`        | Emitted whenever the current page changes.  | `CustomEvent<number>` |
+| `rowsPerPageChange` | Emitted whenever the rows-per-page changes. | `CustomEvent<number>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-select](../xpl-select)
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-pagination --> xpl-select
+  xpl-pagination --> xpl-icon
+  xpl-select --> xpl-tag
+  xpl-select --> xpl-icon
+  xpl-select --> xpl-dropdown
+  xpl-dropdown --> xpl-dropdown-group
+  xpl-dropdown --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-group
+  xpl-dropdown-group --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-heading
+  xpl-dropdown-option --> xpl-icon
+  style xpl-pagination fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-panel/readme.md

@@ -0,0 +1,83 @@
+# xpl-panel
+
+## Overview
+
+XPL-Panel is a stateless, composable container component that defines a section on a page and can house any type of content. Panels are not dismissible and may contain a top accent in 5 standard accent colors.
+
+## Usage
+
+### Basic panel (no accent)
+
+```html
+<xpl-panel>
+  <p>Any content goes here.</p>
+</xpl-panel>
+```
+
+### Panel with accent
+
+```html
+<xpl-panel accent="primary">
+  <p>Content with a primary accent bar.</p>
+</xpl-panel>
+```
+
+Available accent values: `none` (default), `primary`, `secondary`, `positive`,
+`negative`, `highlight`.
+
+### Padding density
+
+```html
+<xpl-panel padding="tight">
+  <p>Tighter padding on all breakpoints.</p>
+</xpl-panel>
+```
+
+Available padding values: `default`, `tight`, `loose`. Padding is responsive
+and automatically scales down at tablet (768 px) and mobile (480 px) breakpoints.
+
+### Composing with other components
+
+```html
+<xpl-panel accent="secondary" padding="loose">
+  <xpl-accordion header="Details">
+    <div slot="content">Accordion inside a panel.</div>
+  </xpl-accordion>
+</xpl-panel>
+```
+
+### Dark mode
+
+Wrap with an ancestor that has the `dark` class — the panel automatically
+adapts its background, border, and accent colors.
+
+## Design
+
+- [Figma: XPL-Panel](https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1546-136120&p=f&t=SMeY3LnfDOiNmx1p-11)
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A stateless container that defines a section on a page and can house any
+type of content. Panels are not dismissible and may contain a top accent.
+
+## Properties
+
+| Property  | Attribute | Description                                                                                                                                                                                                                                                                         | Type                                                                            | Default     |
+| --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------- |
+| `accent`  | `accent`  | Color accent bar displayed at the top of the panel.  - `none` – no accent (default) - `primary` – brand primary color - `secondary` – brand secondary color - `positive` – positive / success color - `negative` – negative / error color - `highlight` – highlight / warning color | `"highlight" \| "negative" \| "none" \| "positive" \| "primary" \| "secondary"` | `'none'`    |
+| `padding` | `padding` | Padding density applied to the content area. Responsive: scales down at tablet and mobile breakpoints.  - `default` – 24 px desktop / 16 px tablet+mobile - `tight`   – 16 px desktop / 8 px tablet+mobile - `loose`   – 40 px desktop / 32 px tablet / 24 px mobile                | `"default" \| "loose" \| "tight"`                                               | `'default'` |
+
+
+## Slots
+
+| Slot | Description                                                                                                        |
+| ---- | ------------------------------------------------------------------------------------------------------------------ |
+|      | Default slot for panel content. Compose other Apollo components within the slot or build your own local component. |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-popover/readme.md

@@ -0,0 +1,48 @@
+# xpl-popover
+
+A popover is an overlay that pops up over all other layers and is triggered by a click or tap, and dismissed by clicking outside the popover or a dismiss icon. Popovers can contain additional actions and allow those actions to be triggered.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                                                                             | Type                                                                                                                                                                                               | Default           |
+| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `disabled` | `disabled` | Whether the popover is disabled or not.                                                                                                                                                 | `boolean`                                                                                                                                                                                          | `false`           |
+| `display`  | `display`  | The display style of the popover, either as an arrow or a menu. - 'arrow': Displays an arrow pointing to the trigger element. - 'menu': Displays a menu-style popover without an arrow. | `"arrow" \| "menu"`                                                                                                                                                                                | `'arrow'`         |
+| `isOpen`   | `is-open`  | Whether the popover is open by default or not.                                                                                                                                          | `boolean`                                                                                                                                                                                          | `false`           |
+| `position` | `position` | The position of the trigger element relative to the popover.                                                                                                                            | `"bottom-end" \| "bottom-left" \| "bottom-middle" \| "bottom-right" \| "bottom-start" \| "middle-left" \| "middle-right" \| "top-end" \| "top-left" \| "top-middle" \| "top-right" \| "top-start"` | `'bottom-middle'` |
+
+
+## Events
+
+| Event          | Description                                         | Type                   |
+| -------------- | --------------------------------------------------- | ---------------------- |
+| `isOpenChange` | Event emitted when the popover is opened or closed. | `CustomEvent<boolean>` |
+
+
+## Slots
+
+| Slot              | Description                                           |
+| ----------------- | ----------------------------------------------------- |
+| `"Inner Content"` | Content inside the popover                            |
+| `"trigger"`       | The element that, when clicked, will open the popover |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input-color](../xpl-input/xpl-input-color)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-color --> xpl-popover
+  style xpl-popover fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-progress/readme.md

@@ -0,0 +1,22 @@
+# xpl-progress
+
+A progress indicator guides users through any linear, multi-step task by showing the user their completed, current, and future steps.
+
+Progress indicators help manage a user’s expectations when completing a multistep process. They show which step the user is currently on, the total number of steps, and overall progress in completing a task.
+
+Horizontal Progress Indicator is used in most desktop applications where a stepped process is required to finish a task and it is beneficial to the user to see their progress. This creates confidence in the user and sets expectations for the length and complexity of the process.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                           | Type       | Default     |
+| ------------- | -------------- | ----------------------------------------------------- | ---------- | ----------- |
+| `currentStep` | `current-step` | Current step, is the index of the current active step | `number`   | `0`         |
+| `steps`       | --             | The steps is an array of the steps name.              | `string[]` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-progress-bar/readme.md

@@ -0,0 +1,145 @@
+# xpl-progress-bar
+
+The `xpl-progress-bar` component displays the progress of an operation, such as file uploads, form completion, or loading states. It supports multiple visual variants including default, success, error, and indeterminate states, with optional label and helper text.
+
+## Usage
+
+### Basic progress bar
+
+```html
+<xpl-progress-bar label="Uploading..." value="45"></xpl-progress-bar>
+```
+
+### With helper text
+
+```html
+<xpl-progress-bar
+    label="Uploading file..."
+    value="65"
+    helper-text="2.4 MB of 5 MB">
+</xpl-progress-bar>
+```
+
+### Error state
+
+```html
+<xpl-progress-bar
+    label="Upload failed"
+    value="30"
+    variant="error"
+    helper-text="Network error. Please check your connection.">
+</xpl-progress-bar>
+```
+
+### Indeterminate loading
+
+```html
+<xpl-progress-bar label="Processing..." variant="indeterminate"></xpl-progress-bar>
+```
+
+### Small size
+
+```html
+<xpl-progress-bar value="60" size="sm"></xpl-progress-bar>
+```
+
+### Custom max value
+
+```html
+<xpl-progress-bar value="75" max="150" label="75 of 150 items"></xpl-progress-bar>
+```
+
+## Variants
+
+| Variant | Description |
+|---------|-------------|
+| `default` | Standard progress bar with accent color fill. Shows a checkmark icon when value reaches max. |
+| `success` | Explicit success state with positive color. Shows a checkmark icon. |
+| `error` | Error state with negative color. Shows an error (x-mark) icon. Helper text is recommended for this state. |
+| `indeterminate` | Used when the progress duration is unknown. Displays an animated sliding bar instead of a fill percentage. |
+
+## Sizes
+
+- `lg` (default): 6px height
+- `sm`: 4px height
+
+## Icon Mapping
+
+The component automatically renders status icons based on the variant or completion state:
+
+| State | xpl-icon name |
+|-------|---------------|
+| Complete (default variant when value equals max) | `circle-check-1` |
+| Success variant | `circle-check-1` |
+| Error variant | `circle-xmark-1` |
+
+## Design Tokens
+
+The following Apollo Foundation tokens are used by this component:
+
+### Background Colors (Fill)
+- `--xpl-background-accent-default` - Default variant fill
+- `--xpl-background-accent-positive-bold` - Success/complete fill
+- `--xpl-background-accent-negative-bold` - Error fill
+- `--xpl-background-accent-neutral` - Track background
+
+### Icon Colors
+- `--xpl-icon-positive` - Success/complete icon
+- `--xpl-icon-negative` - Error icon
+
+### Text Colors
+- `--xpl-text-default` - Label text
+- `--xpl-text-subdued` - Helper text
+- `--xpl-text-negative` - Error helper text
+
+### Typography
+- `--xpl-font-size-callout` - Label font size
+- `--xpl-font-size-caption` - Helper text font size
+- `--xpl-font-weight-normal` - Label and helper font weight
+
+### Spacing & Sizing
+- `--xpl-space-8` - Gap between elements
+- `--xpl-size-025` (4px) - Small bar height
+- `--xpl-size-0375` (6px) - Large bar height
+- `--xpl-border-radius-full` - Bar border radius
+
+## Accessibility
+
+- **Determinate variants** (default, success, error) use the native HTML `<progress>` element, which provides:
+  - Native `role="progressbar"` semantics
+  - Automatic `aria-valuenow`, `aria-valuemin`, `aria-valuemax` handling
+  - Native value/max API with built-in clamping
+- **Indeterminate variant** uses a custom `<div role="progressbar">` since native `<progress>` indeterminate state cannot be styled cross-browser
+- The `aria-label` is set from the `label` prop, or falls back to `'Progress'` when no label is provided
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                                                                    | Type                                                   | Default     |
+| ------------ | ------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------ | ----------- |
+| `helperText` | `helper-text` | The helper text displayed below the progress bar (recommended for error state) | `string`                                               | `undefined` |
+| `label`      | `label`       | The label text displayed above the progress bar                                | `string`                                               | `undefined` |
+| `max`        | `max`         | The maximum value of the progress (mirrors native <progress> max attribute)    | `number`                                               | `100`       |
+| `size`       | `size`        | The size of the progress bar height: sm = 4px, lg = 6px                        | `"lg" \| "sm"`                                         | `'lg'`      |
+| `value`      | `value`       | The current value of the progress (mirrors native <progress> value attribute)  | `number`                                               | `0`         |
+| `variant`    | `variant`     | The visual variant of the progress bar                                         | `"default" \| "error" \| "indeterminate" \| "success"` | `'default'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-progress-bar --> xpl-icon
+  style xpl-progress-bar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-radio/readme.md

@@ -0,0 +1,43 @@
+# xpl-radio
+
+Radio buttons allow users to make selections or choices. Radios are always single select, and can also act as controls.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                                | Type      | Default     |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------ | --------- | ----------- |
+| `checked`     | `checked`     | Whether the input is "on"                                                                  | `boolean` | `undefined` |
+| `description` | `description` | Description text for the field                                                             | `string`  | `undefined` |
+| `disabled`    | `disabled`    | Whether the input is disabled                                                              | `boolean` | `undefined` |
+| `name`        | `name`        | The name attribute for the html input. (submittted in form as name/value pair)             | `string`  | `undefined` |
+| `required`    | `required`    | Whether the input is required                                                              | `boolean` | `undefined` |
+| `styled`      | `styled`      | Whether the input is contained in a box with a border and, in disabled state, a background | `boolean` | `undefined` |
+| `value`       | `value`       | The value attribute for the radio input. (submittted in form as name/value pair)           | `string`  | `undefined` |
+
+
+## Events
+
+| Event         | Description                                                                                                                                             | Type                             |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `radioChange` | Event that emits the current value of the radio input  Returns the value of the radio input if a value is provided, otherwise returns the checked state | `CustomEvent<boolean \| string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-choicelist](../xpl-choicelist)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-radio
+  style xpl-radio fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-secondary-nav/readme.md

@@ -0,0 +1,10 @@
+# secondary-nav
+
+The Secondary Nav component is a component that allows navigation within the content area. It yields one slot where a <ul> element with <xpl-nav-item> elements should be rendered.
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-select/readme.md

@@ -0,0 +1,89 @@
+# xpl-select
+
+Select allows users to make a single selection or multiple selections from a list of options.  Items can be a simple list, grouped, simple multi-select. User selections typically appear within the Select Box once created unless multiple selections are made, where truncation or another method of showing these selections is required.
+
+***When the list of options contains “Actions”, use a ***[Dropdown component](https://xplor-apollo.herokuapp.com/?path=/story/components-dropdown--simple). 
+
+The `selectIcon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
+
+---
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute              | Description                                                                                                                                                                                                                                                               | Type                                              | Default          |
+| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ---------------- |
+| `choices`            | --                     | An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; } | `Partial<DropdownOption & DropdownOptionGroup>[]` | `[]`             |
+| `classNames`         | `class-names`          | The class name to apply to the select component.                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
+| `customDisplayValue` | `custom-display-value` | If true, enables custom display value rendering via slot.                                                                                                                                                                                                                 | `boolean`                                         | `undefined`      |
+| `description`        | `description`          | Optional text that appears below the input label.                                                                                                                                                                                                                         | `string`                                          | `undefined`      |
+| `disabled`           | `disabled`             | Whether the field is disabled                                                                                                                                                                                                                                             | `boolean`                                         | `undefined`      |
+| `error`              | `error`                | If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.                                                                            | `string`                                          | `undefined`      |
+| `label`              | `label`                | The label that appears above the select dropdown                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
+| `mode`               | `mode`                 | Whether to allow a single choice or multiple choices.                                                                                                                                                                                                                     | `"multi" \| "single"`                             | `'single'`       |
+| `name`               | `name`                 | The name of the hidden input field that contains the selected option's value(s)                                                                                                                                                                                           | `string`                                          | `undefined`      |
+| `placeholder`        | `placeholder`          | Placeholder text that appears when the field has no value                                                                                                                                                                                                                 | `string`                                          | `undefined`      |
+| `selectIcon`         | `select-icon`          | The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                             | `string`                                          | `'chevron-down'` |
+| `selectedValues`     | `selected-values`      | The value(s) currently selected in the select component.                                                                                                                                                                                                                  | `string \| string[]`                              | `undefined`      |
+| `truncate`           | `truncate`             | Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.  | `boolean`                                         | `true`           |
+
+
+## Events
+
+| Event                 | Description                                                                                                                                                  | Type                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
+| `changeEvent`         | Emits the value of the selected option in the select menu on change                                                                                          | `CustomEvent<string \| string[]>`                          |
+| `dropdownStateChange` | Emits when the dropdown opens or closes                                                                                                                      | `CustomEvent<boolean>`                                     |
+| `selectChange`        | Emits the value of the selected option in the select menu on change                                                                                          | `CustomEvent<string>`                                      |
+| `triggerDropdown`     | Emits before the dropdown state changes, allowing listeners to prevent the default behavior. The event detail contains the previous and new dropdown states. | `CustomEvent<{ prevState: boolean; nextState: boolean; }>` |
+
+
+## Methods
+
+### `reset() => Promise<void>`
+
+Resets the select component to its initial state with no selections.
+This clears all selected values and returns the component to its default state.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-pagination](../xpl-pagination)
+ - [xpl-tabs](../xpl-tabs)
+
+### Depends on
+
+- [xpl-tag](../xpl-tag)
+- [xpl-icon](../xpl-icon)
+- [xpl-dropdown](../xpl-dropdown)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-select --> xpl-tag
+  xpl-select --> xpl-icon
+  xpl-select --> xpl-dropdown
+  xpl-dropdown --> xpl-dropdown-group
+  xpl-dropdown --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-group
+  xpl-dropdown-group --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-heading
+  xpl-dropdown-option --> xpl-icon
+  xpl-pagination --> xpl-select
+  xpl-tabs --> xpl-select
+  style xpl-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-side-nav/readme.md

@@ -0,0 +1,71 @@
+# xpl-side-nav
+
+Slot-based sidebar for app navigation: scrollable main area and a fixed footer. Compose with [`xpl-side-nav-item`](./xpl-side-nav-item) for rows in the section and footer.
+
+## Slots
+
+| Slot | Description |
+| ---- | ----------- |
+| `section` | Primary navigation. Place `xpl-side-nav-item` elements (or wrappers) inside this slot; layout uses internal section markup. |
+| `nav-footer` | Footer actions (e.g. Help, Logout). Same item component; typically smaller label styling via CSS. |
+
+## Usage
+
+Use the **`label`** prop for a unique accessible name on the `<nav>` when multiple landmarks exist on the page (see **Multi-Navigation Layouts** below).
+
+```html
+<xpl-side-nav label="Main navigation">
+  <div slot="section">
+    <xpl-side-nav-item label="Dashboard" icon="house-4" selected></xpl-side-nav-item>
+    <xpl-side-nav-item has-children label="Settings" expanded>
+      <xpl-side-nav-item label="Profile"></xpl-side-nav-item>
+    </xpl-side-nav-item>
+  </div>
+  <div slot="nav-footer">
+    <xpl-side-nav-item label="Help" icon="headset"></xpl-side-nav-item>
+  </div>
+</xpl-side-nav>
+```
+
+**Link rows:** use `xpl-side-nav-item` with `link` and an anchor in the default slot — see [xpl-side-nav-item](./xpl-side-nav-item) **Link mode**.
+
+### Multi-Navigation Layouts (Accessibility)
+
+When multiple navigation landmarks exist on a page (e.g., side nav, top nav, breadcrumbs), use the `label` prop to provide a unique accessible name for each `<nav>` element. This helps screen reader users distinguish between them.
+
+```html
+<!-- Main side navigation -->
+<xpl-side-nav label="Main navigation">
+  ...
+</xpl-side-nav>
+
+<!-- Top navigation (different component) -->
+<xpl-top-navigation label="User menu">
+  ...
+</xpl-top-navigation>
+
+<!-- Breadcrumbs (different component) -->
+<xpl-breadcrumbs label="Breadcrumb">
+  ...
+</xpl-breadcrumbs>
+```
+
+**WCAG Note:** When a page has multiple `<nav>` landmarks, each should have a unique accessible name via `aria-label`.
+
+## Related components
+
+- [xpl-side-nav-item](../xpl-side-nav-item) — Navigation rows (leaf, expandable, or link) for section and footer.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                                                                                                                                                                 | Type     | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `label`  | `label`   | Accessible label for the navigation landmark. Maps to `aria-label` on the `<nav>` element. Recommended when multiple navigation landmarks exist on a page (e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them. | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*