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

package/dist/docs/affix/affix.md

@@ -68,58 +68,46 @@ When `search` or `clear` is enabled, `w-affix` renders a button and a matching `
 
 ### Prefix Label
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="prefix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Suffix Label
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="suffix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Suffix Label
 
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Prefix Search Icon
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Search">
-    <w-affix slot="prefix" search></w-affix>
-  </w-textfield>
-</style-isolate>
+### Prefix Search Icon
 
+<elements-example>
+  
 ```html
 <w-textfield label="Search">
   <w-affix slot="prefix" search></w-affix>
 </w-textfield>
 ```
 
+</elements-example>
+
 ### Suffix Search Icon
 
 If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
 
-<style-isolate>
-  <form>
-    <w-textfield label="Search">
-      <w-affix slot="suffix" search></w-affix>
-    </w-textfield>
-  </form>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <form>
   <w-textfield label="Search">
@@ -128,92 +116,92 @@ If you wrap the textfield with affix in a form element, clicking the search butt
 </form>
 ```
 
+</elements-example>
+
 ### Suffix Clear Icon
 
 Clicking the clear button will reset the textfield
 
-<style-isolate>
-  <w-textfield label="Search input">
-    <w-affix slot="suffix" clear></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Search input">
   <w-affix slot="suffix" clear></w-affix>
 </w-textfield>
 ```
 
-### Icons
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Award">
-    <w-affix slot="prefix" icon="AwardMedal"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Icons
 
+<elements-example>
+  
 ```html
 <w-textfield label="Award">
   <w-affix slot="prefix" icon="AwardMedal"></w-affix>
 </w-textfield>
 ```
 
+</elements-example>
+
 ## API Documentation
 
 ### Properties
 
 | 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/affix/examples.md

@@ -2,58 +2,46 @@
 
 ### Prefix Label
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="prefix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Suffix Label
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="suffix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Suffix Label
 
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Prefix Search Icon
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Search">
-    <w-affix slot="prefix" search></w-affix>
-  </w-textfield>
-</style-isolate>
+### Prefix Search Icon
 
+<elements-example>
+  
 ```html
 <w-textfield label="Search">
   <w-affix slot="prefix" search></w-affix>
 </w-textfield>
 ```
 
+</elements-example>
+
 ### Suffix Search Icon
 
 If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
 
-<style-isolate>
-  <form>
-    <w-textfield label="Search">
-      <w-affix slot="suffix" search></w-affix>
-    </w-textfield>
-  </form>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <form>
   <w-textfield label="Search">
@@ -62,32 +50,30 @@ If you wrap the textfield with affix in a form element, clicking the search butt
 </form>
 ```
 
+</elements-example>
+
 ### Suffix Clear Icon
 
 Clicking the clear button will reset the textfield
 
-<style-isolate>
-  <w-textfield label="Search input">
-    <w-affix slot="suffix" clear></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Search input">
   <w-affix slot="suffix" clear></w-affix>
 </w-textfield>
 ```
 
-### Icons
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Award">
-    <w-affix slot="prefix" icon="AwardMedal"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Icons
 
+<elements-example>
+  
 ```html
 <w-textfield label="Award">
   <w-affix slot="prefix" icon="AwardMedal"></w-affix>
 </w-textfield>
 ```
+
+</elements-example>

package/dist/docs/alert/accessibility.md

@@ -10,15 +10,8 @@ assign it to its particular child (e.g. title), you can do so by setting `role`
 property of the `Alert` component to an empty string and assigning a respective
 `role` attribute on the child element.
 
-<style-isolate>
-  <w-alert variant="info" show role="">
-    <h3 role="alert" class="t5">
-      This is an alert styled as an information box
-    </h3>
-    <p>In this example only the title has the role of alert. All alerts can have a description.</p>
-  </w-alert>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-alert variant="info" show role="">
   <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
@@ -26,5 +19,7 @@ property of the `Alert` component to an empty string and assigning a respective
 </w-alert>
 ```
 
+</elements-example>
+
 Read more about live region `role`
 attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).

package/dist/docs/alert/alert.md

@@ -63,15 +63,8 @@ assign it to its particular child (e.g. title), you can do so by setting `role`
 property of the `Alert` component to an empty string and assigning a respective
 `role` attribute on the child element.
 
-<style-isolate>
-  <w-alert variant="info" show role="">
-    <h3 role="alert" class="t5">
-      This is an alert styled as an information box
-    </h3>
-    <p>In this example only the title has the role of alert. All alerts can have a description.</p>
-  </w-alert>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-alert variant="info" show role="">
   <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
@@ -79,6 +72,8 @@ property of the `Alert` component to an empty string and assigning a respective
 </w-alert>
 ```
 
+</elements-example>
+
 Read more about live region `role`
 attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).
 
@@ -86,74 +81,64 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
 
 ### Basic
 
-<style-isolate>
-  <w-alert show>
-    <p>We have updated your preferences.</p>
-  </w-alert>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-alert show>
   <p>We have updated your preferences.</p>
 </w-alert>
 ```
 
-### Info
+</elements-example>
 
-<style-isolate>
-  <w-alert variant="info" show>
-    <p>This is an informational alert.</p>
-  </w-alert>
-</style-isolate>
+### Info
 
+<elements-example>
+  
 ```html
 <w-alert variant="info" show>
   <p>This is an informational alert.</p>
 </w-alert>
 ```
 
-### Warning
+</elements-example>
 
-<style-isolate>
-  <w-alert variant="warning" show>
-    <p>Please double-check this value before continuing.</p>
-  </w-alert>
-</style-isolate>
+### Warning
 
+<elements-example>
+  
 ```html
 <w-alert variant="warning" show>
   <p>Please double-check this value before continuing.</p>
 </w-alert>
 ```
 
-### Negative
+</elements-example>
 
-<style-isolate>
-  <w-alert variant="negative" show>
-    <p>Something went wrong. Try again.</p>
-  </w-alert>
-</style-isolate>
+### Negative
 
+<elements-example>
+  
 ```html
 <w-alert variant="negative" show>
   <p>Something went wrong. Try again.</p>
 </w-alert>
 ```
 
-### Positive
+</elements-example>
 
-<style-isolate>
-  <w-alert variant="positive" show>
-    <p>Your changes were saved successfully.</p>
-  </w-alert>
-</style-isolate>
+### Positive
 
+<elements-example>
+  
 ```html
 <w-alert variant="positive" show>
   <p>Your changes were saved successfully.</p>
 </w-alert>
 ```
 
+</elements-example>
+
 ### Programmatic Visibility
 
 ```html
@@ -173,36 +158,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'`