@xplortech/apollo-core 2.6.0 → 2.7.0

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

@@ -114,7 +114,7 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
 
 - **`isLoading` / `is-loading`:** loading UI without forcing the disabled (gray) visual treatment.
 - **`icon`**, **`icon-position`**, **`icon-only`:** use Apollo icon names; no inline SVGs required.
-- **`data-*` and `aria-*` on the host:** mirrored onto the inner `<button>` after render for accessibility and testing tools.
+- **`data-*`, `aria-*`, and `role` on the host:** mirrored onto the inner `<button>` after render for accessibility and testing tools. After forwarding, these attributes are removed from the host element. Avoid relying on `role` on the host for external selectors.
 
 ## Guidelines
 
@@ -127,29 +127,31 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
 - The component renders a native `<button>`, so it is focusable and keyboard-activable by default.
 - When **`is-loading`** is true, the inner button has `aria-busy="true"` and the loading spinner is marked **`aria-hidden="true"`** so the label remains the accessible name.
 - For **icon-only** buttons, provide an accessible name via **`aria-label`** on the host (e.g. `<xpl-button icon-only icon="x" aria-label="Close">`) so screen readers announce the action.
+- For **WAI-ARIA composite widgets** (like tabs), use the **`controlAttrs`** prop to apply `id`, `role`, `aria-controls`, `aria-selected`, and `aria-current` directly to the inner `<button>`. This is preferred over setting these attributes on the host, which would be forwarded and removed from the host.
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                                                        | Type                                                 | Default     |
-| -------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- |
-| `disabled`     | `disabled`      | Whether button should be disabled                                                                                                                  | `boolean`                                            | `false`     |
-| `form`         | `form`          | An optional form attribute for the button if type is submit                                                                                        | `string`                                             | `undefined` |
-| `fullWidth`    | `full-width`    | Whether the button should be of full width as per parent container.                                                                                | `boolean`                                            | `false`     |
-| `icon`         | `icon`          | Icon to render - icon name as string (from xpl-icon library).                                                                                      | `string`                                             | `''`        |
-| `iconOnly`     | `icon-only`     | When true, the button renders in icon-only circular style. Use for icon-only buttons.                                                              | `boolean`                                            | `false`     |
-| `iconPosition` | `icon-position` | Icon position relative to slot content. Ignored if no icon is provided.                                                                            | `"end" \| "start"`                                   | `'start'`   |
-| `isLoading`    | `is-loading`    | When true, shows a loading overlay with spinner over the button. Button is non-interactive.                                                        | `boolean`                                            | `false`     |
-| `link`         | `link`          | whether button should yield a slot for a link tag                                                                                                  | `boolean`                                            | `undefined` |
-| `name`         | `name`          | Name of the button, submitted with form data. Passed through to the native button element.                                                         | `string`                                             | `undefined` |
-| `sentiment`    | `sentiment`     | Sentiment of the button, which applies different color schemes to indicate purpose/intent.                                                         | `"negative" \| "neutral" \| "positive"`              | `'neutral'` |
-| `size`         | `size`          | Button size. Use 'default', 'xs' (extra small), or 'sm' (small).                                                                                   | `"default" \| "sm" \| "xs"`                          | `'default'` |
-| `state`        | `state`         | <span style="color:red">**[DEPRECATED]**</span> : Use `sentiment` with values "neutral", "negative", "positive" instead of `state` .<br/><br/>     | `"neutral" \| "success" \| "warning"`                | `undefined` |
-| `type`         | `type`          | HTML button type attribute.                                                                                                                        | `"button" \| "reset" \| "submit"`                    | `undefined` |
-| `value`        | `value`         | Value of the button, submitted with form data. Passed through to the native button element.                                                        | `string`                                             | `undefined` |
-| `variant`      | `variant`       | Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility. | `"primary" \| "secondary" \| "subtle" \| "tertiary"` | `'primary'` |
+| Property       | Attribute       | Description                                                                                                                                                                                                                            | Type                                                                                                                      | Default     |
+| -------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `controlAttrs` | --              | Attributes to apply to the inner native `<button>` (e.g., tab a11y wiring). Use this instead of setting `id` / `role` / `aria-*` on the host when the inner control is the element that needs them (e.g., WAI-ARIA composite widgets). | `{ id?: string; role?: string; 'aria-controls'?: string; 'aria-selected'?: "true" \| "false"; 'aria-current'?: string; }` | `undefined` |
+| `disabled`     | `disabled`      | Whether button should be disabled                                                                                                                                                                                                      | `boolean`                                                                                                                 | `false`     |
+| `form`         | `form`          | An optional form attribute for the button if type is submit                                                                                                                                                                            | `string`                                                                                                                  | `undefined` |
+| `fullWidth`    | `full-width`    | Whether the button should be of full width as per parent container.                                                                                                                                                                    | `boolean`                                                                                                                 | `false`     |
+| `icon`         | `icon`          | Icon to render - icon name as string (from xpl-icon library).                                                                                                                                                                          | `string`                                                                                                                  | `''`        |
+| `iconOnly`     | `icon-only`     | When true, the button renders in icon-only circular style. Use for icon-only buttons.                                                                                                                                                  | `boolean`                                                                                                                 | `false`     |
+| `iconPosition` | `icon-position` | Icon position relative to slot content. Ignored if no icon is provided.                                                                                                                                                                | `"end" \| "start"`                                                                                                        | `'start'`   |
+| `isLoading`    | `is-loading`    | When true, shows a loading overlay with spinner over the button. Button is non-interactive.                                                                                                                                            | `boolean`                                                                                                                 | `false`     |
+| `link`         | `link`          | whether button should yield a slot for a link tag                                                                                                                                                                                      | `boolean`                                                                                                                 | `undefined` |
+| `name`         | `name`          | Name of the button, submitted with form data. Passed through to the native button element.                                                                                                                                             | `string`                                                                                                                  | `undefined` |
+| `sentiment`    | `sentiment`     | Sentiment of the button, which applies different color schemes to indicate purpose/intent.                                                                                                                                             | `"negative" \| "neutral" \| "positive"`                                                                                   | `'neutral'` |
+| `size`         | `size`          | Button size. Use 'default', 'xs' (extra small), or 'sm' (small).                                                                                                                                                                       | `"default" \| "sm" \| "xs"`                                                                                               | `'default'` |
+| `state`        | `state`         | <span style="color:red">**[DEPRECATED]**</span> : Use `sentiment` with values "neutral", "negative", "positive" instead of `state` .<br/><br/>                                                                                         | `"neutral" \| "success" \| "warning"`                                                                                     | `undefined` |
+| `type`         | `type`          | HTML button type attribute.                                                                                                                                                                                                            | `"button" \| "reset" \| "submit"`                                                                                         | `undefined` |
+| `value`        | `value`         | Value of the button, submitted with form data. Passed through to the native button element.                                                                                                                                            | `string`                                                                                                                  | `undefined` |
+| `variant`      | `variant`       | Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility.                                                                                     | `"primary" \| "secondary" \| "subtle" \| "tertiary"`                                                                      | `'primary'` |
 
 
 ## Dependencies
@@ -158,8 +160,12 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
 
  - [xpl-banner](../xpl-banner)
  - [xpl-button-row](../xpl-button-row)
+ - [xpl-list-item](../xpl-list/xpl-list-item)
  - [xpl-modal](../xpl-modal)
  - [xpl-slideout](../xpl-slideout)
+ - [xpl-spotlight](../xpl-spotlight)
+ - [xpl-tab](../xpl-tab)
+ - [xpl-top-nav](../xpl-top-nav)
 
 ### Depends on
 
@@ -171,8 +177,12 @@ graph TD;
   xpl-button --> xpl-icon
   xpl-banner --> xpl-button
   xpl-button-row --> xpl-button
+  xpl-list-item --> xpl-button
   xpl-modal --> xpl-button
   xpl-slideout --> xpl-button
+  xpl-spotlight --> xpl-button
+  xpl-tab --> xpl-button
+  xpl-top-nav --> xpl-button
   style xpl-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -1,7 +1,7 @@
 # xpl-calendar
 
 Calendars allow users to view and select dates.  Use XPL-Calendar when date picking is needed on a page or in a in a container.
-If a calendar is needed within a form, use [XPL-Datepicker](https://xplor-apollo.herokuapp.com/?path=/story/components-input--datepicker).
+If a calendar is needed within a form, use [XPL-Datepicker](https://apollo.xplordocs.com/?path=/story/components-input--datepicker).
 
 <!-- Auto Generated Below -->
 

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

@@ -1,23 +1,26 @@
-# xpl-checkbox
-
-Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.
-
+# xpl-checkbox
+
+Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.
+
+Provide visible label text in the default slot, or set `aria-label` when the checkbox has no adjacent label (for example, icon-only toolbars or table selection cells).
+
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property        | Attribute       | Description                                                                         | Type      | Default     |
-| --------------- | --------------- | ----------------------------------------------------------------------------------- | --------- | ----------- |
-| `checked`       | `checked`       | Whether the input is checked                                                        | `boolean` | `undefined` |
-| `dataId`        | `data-id`       | A custom data attribute for the checkbox                                            | `string`  | `undefined` |
-| `description`   | `description`   | Description text for the field                                                      | `string`  | `undefined` |
-| `disabled`      | `disabled`      | Whether the input is disabled                                                       | `boolean` | `undefined` |
-| `indeterminate` | `indeterminate` | A visual state for when the input has not been interacted with                      | `boolean` | `undefined` |
-| `name`          | `name`          | The name attribute for the html input. (submitted 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 a background              | `boolean` | `undefined` |
-| `value`         | `value`         | The value attribute for the checkbox input. (submittted in form as name/value pair) | `string`  | `undefined` |
+| Property        | Attribute       | Description                                                                                                                                                                                                                                                                          | Type      | Default     |
+| --------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
+| `ariaLabel`     | `aria-label`    | Accessible name for the native checkbox input (sets `aria-label` on the `input`). Use when there is no visible label text in the default slot. Defaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source. | `string`  | `''`        |
+| `checked`       | `checked`       | Whether the input is checked                                                                                                                                                                                                                                                         | `boolean` | `undefined` |
+| `dataId`        | `data-id`       | A custom data attribute for the checkbox                                                                                                                                                                                                                                             | `string`  | `undefined` |
+| `description`   | `description`   | Description text for the field                                                                                                                                                                                                                                                       | `string`  | `undefined` |
+| `disabled`      | `disabled`      | Whether the input is disabled                                                                                                                                                                                                                                                        | `boolean` | `undefined` |
+| `indeterminate` | `indeterminate` | A visual state for when the input has not been interacted with                                                                                                                                                                                                                       | `boolean` | `undefined` |
+| `name`          | `name`          | The name attribute for the html input. (submitted 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 a background                                                                                                                                                                                                               | `boolean` | `undefined` |
+| `value`         | `value`         | The value attribute for the checkbox input. (submittted in form as name/value pair)                                                                                                                                                                                                  | `string`  | `undefined` |
 
 
 ## Events
@@ -33,7 +36,7 @@ Checkboxes allow users to make selections or choices. Checkboxes can be multi-se
 
  - [xpl-choicelist](../xpl-choicelist)
  - [xpl-header-accordion](../xpl-header-accordion)
- - [xpl-table-header-cell](../xpl-table-header-cell)
+ - [xpl-table-header-cell](../xpl-table/xpl-table-header-cell)
 
 ### Graph
 ```mermaid

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

@@ -1,7 +1,7 @@
-# xpl-divider
-
-Allows for easy separation and titling of sections within forms or other content.
-
+# xpl-divider
+
+Allows for easy separation and titling of sections within forms or other content.
+
 <!-- Auto Generated Below -->
 
 
@@ -16,11 +16,13 @@ Allows for easy separation and titling of sections within forms or other content
 
 ### Used by
 
+ - [xpl-list-item](../xpl-list/xpl-list-item)
  - [xpl-slideout](../xpl-slideout)
 
 ### Graph
 ```mermaid
 graph TD;
+  xpl-list-item --> xpl-divider
   xpl-slideout --> xpl-divider
   style xpl-divider fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -3,7 +3,7 @@
 A Dropdown is a menu with a list of actions a user can take. Use a dropdown when you want to present a list of actions in a limited space. Dropdowns are single-select ***actions***, can be presented in groups, and can be triggered by other elements such as a button, icon, text etc. 
 A selection within a dropdown does not change the parent trigger.
 
-***If you want to present a list of **options** a user can select, or multi-select options, please use [XPL-Select](https://xplor-apollo.herokuapp.com/?path=/story/components-select--select).***
+***If you want to present a list of **options** a user can select, or multi-select options, please use [XPL-Select](https://apollo.xplordocs.com/?path=/story/components-select--select).***
 
 <!-- Auto Generated Below -->
 

package/dist/docs/xpl-dynamic-table/readme.md

@@ -1,19 +1,22 @@
-# xpl-dynamic-table
-
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-
-The Dynamic Table is a rich content table that can accommodate multiple types of data. 
-
-<!-- Auto Generated Below -->
-
-
-## Events
-
-| Event                     | Description                                        | Type                    |
-| ------------------------- | -------------------------------------------------- | ----------------------- |
-| `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+The Dynamic Table is a rich content table that can accommodate multiple types of data.
+
+<!-- Auto Generated Below -->
+
+
+> **[DEPRECATED]** Use the compositional `<xpl-table>` API instead.
+This component will be removed in a future major release.
+
+## Events
+
+| Event                     | Description                                        | Type                    |
+| ------------------------- | -------------------------------------------------- | ----------------------- |
+| `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-cell/readme.md

@@ -1,18 +1,20 @@
-# xpl-dynamic-table-cell
-
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property   | Attribute  | Description                                     | Type      | Default |
-| ---------- | ---------- | ----------------------------------------------- | --------- | ------- |
-| `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table-cell
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+<!-- Auto Generated Below -->
+
+
+> **[DEPRECATED]** Use `<xpl-table-cell>` instead.
+This component will be removed in a future major release.
+
+## Properties
+
+| Property   | Attribute  | Description                                     | Type      | Default |
+| ---------- | ---------- | ----------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-row/readme.md

@@ -1,19 +1,21 @@
-# xpl-dynamic-table-row
-
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property   | Attribute  | Description                                 | Type      | Default |
-| ---------- | ---------- | ------------------------------------------- | --------- | ------- |
-| `disabled` | `disabled` | Whether the row and its cells are disabled. | `boolean` | `false` |
-| `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table-row
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+<!-- Auto Generated Below -->
+
+
+> **[DEPRECATED]** Use `<xpl-table-row>` instead.
+This component will be removed in a future major release.
+
+## Properties
+
+| Property   | Attribute  | Description                                 | Type      | Default |
+| ---------- | ---------- | ------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the row and its cells are disabled. | `boolean` | `false` |
+| `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -43,18 +43,24 @@ The `icon` property accepts any icon name as a string. See the links above for t
  - [xpl-input-date](../xpl-input/xpl-input-date)
  - [xpl-input-file](../xpl-input/xpl-input-file)
  - [xpl-input-phone](../xpl-input/xpl-input-phone)
+ - [xpl-input-search](../xpl-input/xpl-input-search)
  - [xpl-input-time](../xpl-input/xpl-input-time)
  - [xpl-large-card](../xpl-large-card)
- - [xpl-list](../xpl-list)
+ - [xpl-list-item](../xpl-list/xpl-list-item)
  - [xpl-modal](../xpl-modal)
  - [xpl-pagination](../xpl-pagination)
  - [xpl-progress-bar](../xpl-progress-bar)
+ - [xpl-progress-indicator](../xpl-progress-indicator)
  - [xpl-select](../xpl-select)
  - [xpl-side-nav-item](../xpl-side-nav/xpl-side-nav-item)
  - [xpl-slideout](../xpl-slideout)
+ - [xpl-spotlight](../xpl-spotlight)
  - [xpl-table](../xpl-table)
- - [xpl-table-header-cell](../xpl-table-header-cell)
+ - [xpl-table-header-cell](../xpl-table/xpl-table-header-cell)
+ - [xpl-tag](../xpl-tag)
  - [xpl-toast](../xpl-toast)
+ - [xpl-top-nav](../xpl-top-nav)
+ - [xpl-top-nav-item](../xpl-top-nav/xpl-top-nav-item)
  - [xpl-utility-bar](../xpl-utility-bar)
 
 ### Graph
@@ -71,18 +77,24 @@ graph TD;
   xpl-input-date --> xpl-icon
   xpl-input-file --> xpl-icon
   xpl-input-phone --> xpl-icon
+  xpl-input-search --> xpl-icon
   xpl-input-time --> xpl-icon
   xpl-large-card --> xpl-icon
-  xpl-list --> xpl-icon
+  xpl-list-item --> xpl-icon
   xpl-modal --> xpl-icon
   xpl-pagination --> xpl-icon
   xpl-progress-bar --> xpl-icon
+  xpl-progress-indicator --> xpl-icon
   xpl-select --> xpl-icon
   xpl-side-nav-item --> xpl-icon
   xpl-slideout --> xpl-icon
+  xpl-spotlight --> xpl-icon
   xpl-table --> xpl-icon
   xpl-table-header-cell --> xpl-icon
+  xpl-tag --> xpl-icon
   xpl-toast --> xpl-icon
+  xpl-top-nav --> xpl-icon
+  xpl-top-nav-item --> xpl-icon
   xpl-utility-bar --> xpl-icon
   style xpl-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```