@warp-ds/elements 2.9.0-next.5 → 2.9.0-next.6

package/dist/docs/affix/affix.md

@@ -164,56 +164,58 @@ Clicking the clear button will reset the textfield
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `string | null` | `null` | Accessible label for icon-button variants. |
+| _icon | `unknown` | `-` | - |
+| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
 | clear | `boolean` | `false` | Renders a clear icon button. |
-| search | `boolean` | `false` | Renders a search icon button. |
+| icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
 | label | `string` | `''` | Text label shown as prefix/suffix content. |
-| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
-| _icon | `unknown` | `-` | - |
+| search | `boolean` | `false` | Renders a search icon button. |
 
 ### Property Details
 
+#### _icon
+
+
+
+- Type: `unknown`
+- Default: `-`
+
 #### ariaLabel
 
-Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
 
-- Type: `string | null`
+
+- Type: `string \| null`
 - Default: `null`
 
 #### clear
 
-Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
+Add this property to render a clickable Warp close icon.
+
+Set an `aria-label` that explains the action when using this.
 
 - Type: `boolean`
 - Default: `false`
 
-#### search
+#### icon
 
-Shows a clickable search icon, typically in a prefix slot for search fields.
 
-- Type: `boolean`
-- Default: `false`
+
+- Type: `string \| null`
+- Default: `null`
 
 #### label
 
-Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.
+
 
 - Type: `string`
 - Default: `''`
 
-#### icon
-
-Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.
-
-- Type: `string | null`
-- Default: `null`
-
-#### _icon
-
+#### search
 
+Add this property to render a clickable Warp search icon.
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/affix/api.md

@@ -4,56 +4,58 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `string | null` | `null` | Accessible label for icon-button variants. |
+| _icon | `unknown` | `-` | - |
+| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
 | clear | `boolean` | `false` | Renders a clear icon button. |
-| search | `boolean` | `false` | Renders a search icon button. |
+| icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
 | label | `string` | `''` | Text label shown as prefix/suffix content. |
-| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
-| _icon | `unknown` | `-` | - |
+| search | `boolean` | `false` | Renders a search icon button. |
 
 ### Property Details
 
+#### _icon
+
+
+
+- Type: `unknown`
+- Default: `-`
+
 #### ariaLabel
 
-Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
 
-- Type: `string | null`
+
+- Type: `string \| null`
 - Default: `null`
 
 #### clear
 
-Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
+Add this property to render a clickable Warp close icon.
+
+Set an `aria-label` that explains the action when using this.
 
 - Type: `boolean`
 - Default: `false`
 
-#### search
+#### icon
 
-Shows a clickable search icon, typically in a prefix slot for search fields.
 
-- Type: `boolean`
-- Default: `false`
+
+- Type: `string \| null`
+- Default: `null`
 
 #### label
 
-Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.
+
 
 - Type: `string`
 - Default: `''`
 
-#### icon
-
-Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.
-
-- Type: `string | null`
-- Default: `null`
-
-#### _icon
-
+#### search
 
+Add this property to render a clickable Warp search icon.
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/alert/alert.md

@@ -173,36 +173,36 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
-| show | `boolean` | `false` | Whether the alert is visible. |
 | role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+| show | `boolean` | `false` | Whether the alert is visible. |
+| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
 
 ### Property Details
 
-#### variant
+#### role
 
-Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.
 
-- Type: [`AlertVariants`](#alertvariants)
-- Default: `'info'`
+
+- Type: `string`
+- Default: `'alert'`
 
 #### show
 
-Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).
+
 
 - Type: `boolean`
 - Default: `false`
 
-#### role
+#### variant
 
-Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.
 
-- Type: `string`
-- Default: `'alert'`
+
+- Type: [`AlertVariants`](#alertvariants)
+- Default: `'info'`
 
 ### Types
 
 #### AlertVariants
 
-`'negative' | 'positive' | 'warning' | 'info'`
+`'negative' \| 'positive' \| 'warning' \| 'info'`
 

package/dist/docs/alert/api.md

@@ -4,36 +4,36 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
-| show | `boolean` | `false` | Whether the alert is visible. |
 | role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+| show | `boolean` | `false` | Whether the alert is visible. |
+| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
 
 ### Property Details
 
-#### variant
+#### role
 
-Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.
 
-- Type: [`AlertVariants`](#alertvariants)
-- Default: `'info'`
+
+- Type: `string`
+- Default: `'alert'`
 
 #### show
 
-Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).
+
 
 - Type: `boolean`
 - Default: `false`
 
-#### role
+#### variant
 
-Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.
 
-- Type: `string`
-- Default: `'alert'`
+
+- Type: [`AlertVariants`](#alertvariants)
+- Default: `'info'`
 
 ### Types
 
 #### AlertVariants
 
-`'negative' | 'positive' | 'warning' | 'info'`
+`'negative' \| 'positive' \| 'warning' \| 'info'`
 

package/dist/docs/attention/api.md

@@ -4,128 +4,128 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| show | `boolean` | `false` | - |
-| placement | `Directions` | `'bottom'` | - |
-| tooltip | `boolean` | `false` | - |
+| _actualDirection | `unknown` | `-` | - |
+| _initialPlacement | `unknown` | `-` | - |
 | callout | `boolean` | `false` | - |
-| popover | `boolean` | `false` | - |
-| highlight | `boolean` | `false` | - |
 | canClose | `boolean` | `false` | - |
-| noArrow | `boolean` | `false` | - |
-| distance | `number` | `8` | - |
-| skidding | `number` | `0` | - |
-| flip | `boolean` | `false` | - |
 | crossAxis | `boolean` | `false` | - |
+| distance | `number` | `8` | - |
 | fallbackPlacements | `Directions[]` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
-| _actualDirection | `unknown` | `-` | - |
+| flip | `boolean` | `false` | - |
+| highlight | `boolean` | `false` | - |
+| noArrow | `boolean` | `false` | - |
+| placement | `Directions` | `'bottom'` | - |
+| popover | `boolean` | `false` | - |
+| show | `boolean` | `false` | - |
+| skidding | `number` | `0` | - |
+| tooltip | `boolean` | `false` | - |
 
 ### Property Details
 
-#### show
+#### _actualDirection
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### placement
+#### _initialPlacement
 
 
 
-- Type: `Directions`
-- Default: `'bottom'`
+- Type: `unknown`
+- Default: `-`
 
-#### tooltip
+#### callout
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### callout
+#### canClose
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### popover
+#### crossAxis
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### highlight
+#### distance
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `number`
+- Default: `8`
 
-#### canClose
+#### fallbackPlacements
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions[]`
+- Default: `-`
 
-#### noArrow
+#### flip
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### distance
+#### highlight
 
 
 
-- Type: `number`
-- Default: `8`
+- Type: `boolean`
+- Default: `false`
 
-#### skidding
+#### noArrow
 
 
 
-- Type: `number`
-- Default: `0`
+- Type: `boolean`
+- Default: `false`
 
-#### flip
+#### placement
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions`
+- Default: `'bottom'`
 
-#### crossAxis
+#### popover
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### fallbackPlacements
+#### show
 
 
 
-- Type: `Directions[]`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### _initialPlacement
+#### skidding
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `number`
+- Default: `0`
 
-#### _actualDirection
+#### tooltip
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/attention/attention.md

@@ -16,128 +16,128 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| show | `boolean` | `false` | - |
-| placement | `Directions` | `'bottom'` | - |
-| tooltip | `boolean` | `false` | - |
+| _actualDirection | `unknown` | `-` | - |
+| _initialPlacement | `unknown` | `-` | - |
 | callout | `boolean` | `false` | - |
-| popover | `boolean` | `false` | - |
-| highlight | `boolean` | `false` | - |
 | canClose | `boolean` | `false` | - |
-| noArrow | `boolean` | `false` | - |
-| distance | `number` | `8` | - |
-| skidding | `number` | `0` | - |
-| flip | `boolean` | `false` | - |
 | crossAxis | `boolean` | `false` | - |
+| distance | `number` | `8` | - |
 | fallbackPlacements | `Directions[]` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
-| _actualDirection | `unknown` | `-` | - |
+| flip | `boolean` | `false` | - |
+| highlight | `boolean` | `false` | - |
+| noArrow | `boolean` | `false` | - |
+| placement | `Directions` | `'bottom'` | - |
+| popover | `boolean` | `false` | - |
+| show | `boolean` | `false` | - |
+| skidding | `number` | `0` | - |
+| tooltip | `boolean` | `false` | - |
 
 ### Property Details
 
-#### show
+#### _actualDirection
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### placement
+#### _initialPlacement
 
 
 
-- Type: `Directions`
-- Default: `'bottom'`
+- Type: `unknown`
+- Default: `-`
 
-#### tooltip
+#### callout
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### callout
+#### canClose
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### popover
+#### crossAxis
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### highlight
+#### distance
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `number`
+- Default: `8`
 
-#### canClose
+#### fallbackPlacements
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions[]`
+- Default: `-`
 
-#### noArrow
+#### flip
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### distance
+#### highlight
 
 
 
-- Type: `number`
-- Default: `8`
+- Type: `boolean`
+- Default: `false`
 
-#### skidding
+#### noArrow
 
 
 
-- Type: `number`
-- Default: `0`
+- Type: `boolean`
+- Default: `false`
 
-#### flip
+#### placement
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions`
+- Default: `'bottom'`
 
-#### crossAxis
+#### popover
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### fallbackPlacements
+#### show
 
 
 
-- Type: `Directions[]`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### _initialPlacement
+#### skidding
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `number`
+- Default: `0`
 
-#### _actualDirection
+#### tooltip
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/badge/accessibility.md

@@ -1 +1,45 @@
 ## Accessibility
+
+Badge renders slotted text as regular content. It does not add an ARIA role and it is not announced as a live region.
+
+### Use Meaningful Text
+
+Do not rely on color alone to communicate meaning. The badge text should describe the status or metadata by itself.
+
+```html
+<w-badge variant="positive">Approved</w-badge>
+<w-badge variant="negative">Rejected</w-badge>
+```
+
+Avoid labels that only make sense visually:
+
+```html
+<!-- Avoid -->
+<w-badge variant="positive">Green</w-badge>
+```
+
+### Keep Badges Non-Interactive
+
+Do not place interactive elements inside `w-badge`. If the user can click, dismiss, filter, or select the item, use an interactive component instead.
+
+The `disabled` variant is visual only. It does not disable related controls or remove anything from the tab order.
+
+```html
+<!-- Avoid -->
+<w-badge>
+  <button type="button">New</button>
+</w-badge>
+```
+
+### Dynamic Changes
+
+If a badge value changes after the page has loaded and users need to be notified, announce that change outside the badge with an appropriate live region or use [Alert](/docs/components/alert/overview) for important feedback.
+
+### Duplicate or Decorative Badges
+
+If the same information is already available in nearby accessible text and the badge is only a visual duplicate, hide the duplicate badge from assistive technologies.
+
+```html
+<p>Sponsored listing</p>
+<w-badge aria-hidden="true" variant="sponsored">Sponsored</w-badge>
+```