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

package/dist/docs/affix/accessibility.md

@@ -1 +1,8 @@
 ## Accessibility
+
+When `search` or `clear` is enabled, `w-affix` renders a button and a matching `aria-label`. If the `aria-label` incorrect for your context, you may provide your own describing the action.
+
+```html
+<w-affix search aria-label="Ad Search"></w-affix>
+<w-affix clear aria-label="Clear text input"></w-affix>
+```

package/dist/docs/affix/affix.md

@@ -8,50 +8,214 @@ This component is usually used in other components like form elements to show a
 
 ## Usage
 
+`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
+
+### In Textfield Slots
+
+`w-affix` is usually slotted into the w-textfield form element. Use the w-textfield's `prefix` or `suffix` slots to add the affix to the component.
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Text Label
+
+Use `label` to render static text, such as currency or unit indicators.
+
+```html
+<w-affix label="kr"></w-affix>
+```
+
+### Icons
+
+`w-affix` can also render any icon supported by `w-icon` using the attribute `icon`.
+
+```html
+<w-textfield label="Award">
+  <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+</w-textfield>
+```
+
+### Search Icon
+
+Use `search` to render a clickable search icon button. If you wrap the w-affix and surrounding w-textfield in a form, clicking the w-affix will submit the form.
+
+```html
+<w-affix search aria-label="Search"></w-affix>
+```
+
+### Clear Icon
+
+Use `clear` to render a clickable clear/reset icon button.
+When the clear attribute is used inside a w-textfield, clicking the clear button will automatically reset the w-textfield.
+
+```html
+<w-affix clear aria-label="Clear input"></w-affix>
+```
+
 ## Accessibility
 
+When `search` or `clear` is enabled, `w-affix` renders a button and a matching `aria-label`. If the `aria-label` incorrect for your context, you may provide your own describing the action.
+
+```html
+<w-affix search aria-label="Ad Search"></w-affix>
+<w-affix clear aria-label="Clear text input"></w-affix>
+```
+
 ## Examples
 
+### Prefix Label
+
+<style-isolate>
+  <w-textfield label="Price">
+    <w-affix slot="prefix" label="kr"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Suffix Label
+
+<style-isolate>
+  <w-textfield label="Price">
+    <w-affix slot="suffix" label="kr"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Prefix Search Icon
+
+<style-isolate>
+  <w-textfield label="Search">
+    <w-affix slot="prefix" search></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Search">
+  <w-affix slot="prefix" search></w-affix>
+</w-textfield>
+```
+
+### 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>
+
+```html
+<form>
+  <w-textfield label="Search">
+    <w-affix slot="prefix" search></w-affix>
+  </w-textfield>
+</form>
+```
+
+### 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>
+
+```html
+<w-textfield label="Search input">
+  <w-affix slot="suffix" clear></w-affix>
+</w-textfield>
+```
+
+### Icons
+
+<style-isolate>
+  <w-textfield label="Award">
+    <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Award">
+  <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+</w-textfield>
+```
+
 ## API Documentation
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `string` | `-` | - |
-| clear | `boolean` | `false` | - |
-| search | `boolean` | `false` | - |
-| label | `string` | `-` | - |
+| _icon | `unknown` | `-` | - |
+| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
+| clear | `boolean` | `false` | Renders a clear icon button. |
+| icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
+| label | `string` | `''` | Text label shown as prefix/suffix content. |
+| search | `boolean` | `false` | Renders a search icon button. |
 
 ### Property Details
 
-#### ariaLabel
+#### _icon
 
 
 
-- Type: `string`
+- Type: `unknown`
 - Default: `-`
 
+#### ariaLabel
+
+
+
+- Type: `string \| null`
+- Default: `null`
+
 #### clear
 
+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
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `string \| null`
+- Default: `null`
 
 #### label
 
 
 
 - Type: `string`
-- Default: `-`
+- Default: `''`
+
+#### search
+
+Add this property to render a clickable Warp search icon.
+
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/affix/api.md

@@ -4,40 +4,58 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `string` | `-` | - |
-| clear | `boolean` | `false` | - |
-| search | `boolean` | `false` | - |
-| label | `string` | `-` | - |
+| _icon | `unknown` | `-` | - |
+| ariaLabel | `string \| null` | `null` | Accessible label for icon-button variants. |
+| clear | `boolean` | `false` | Renders a clear icon button. |
+| icon | `string \| null` | `null` | Icon name rendered as prefix/suffix content. |
+| label | `string` | `''` | Text label shown as prefix/suffix content. |
+| search | `boolean` | `false` | Renders a search icon button. |
 
 ### Property Details
 
-#### ariaLabel
+#### _icon
 
 
 
-- Type: `string`
+- Type: `unknown`
 - Default: `-`
 
+#### ariaLabel
+
+
+
+- Type: `string \| null`
+- Default: `null`
+
 #### clear
 
+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
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `string \| null`
+- Default: `null`
 
 #### label
 
 
 
 - Type: `string`
-- Default: `-`
+- Default: `''`
+
+#### search
+
+Add this property to render a clickable Warp search icon.
+
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/affix/examples.md

@@ -1 +1,93 @@
 ## Examples
+
+### Prefix Label
+
+<style-isolate>
+  <w-textfield label="Price">
+    <w-affix slot="prefix" label="kr"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Suffix Label
+
+<style-isolate>
+  <w-textfield label="Price">
+    <w-affix slot="suffix" label="kr"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Prefix Search Icon
+
+<style-isolate>
+  <w-textfield label="Search">
+    <w-affix slot="prefix" search></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Search">
+  <w-affix slot="prefix" search></w-affix>
+</w-textfield>
+```
+
+### 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>
+
+```html
+<form>
+  <w-textfield label="Search">
+    <w-affix slot="prefix" search></w-affix>
+  </w-textfield>
+</form>
+```
+
+### 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>
+
+```html
+<w-textfield label="Search input">
+  <w-affix slot="suffix" clear></w-affix>
+</w-textfield>
+```
+
+### Icons
+
+<style-isolate>
+  <w-textfield label="Award">
+    <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+  </w-textfield>
+</style-isolate>
+
+```html
+<w-textfield label="Award">
+  <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+</w-textfield>
+```

package/dist/docs/affix/usage.md

@@ -1 +1,48 @@
 ## Usage
+
+`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
+
+### In Textfield Slots
+
+`w-affix` is usually slotted into the w-textfield form element. Use the w-textfield's `prefix` or `suffix` slots to add the affix to the component.
+
+```html
+<w-textfield label="Price">
+  <w-affix slot="suffix" label="kr"></w-affix>
+</w-textfield>
+```
+
+### Text Label
+
+Use `label` to render static text, such as currency or unit indicators.
+
+```html
+<w-affix label="kr"></w-affix>
+```
+
+### Icons
+
+`w-affix` can also render any icon supported by `w-icon` using the attribute `icon`.
+
+```html
+<w-textfield label="Award">
+  <w-affix slot="prefix" icon="AwardMedal"></w-affix>
+</w-textfield>
+```
+
+### Search Icon
+
+Use `search` to render a clickable search icon button. If you wrap the w-affix and surrounding w-textfield in a form, clicking the w-affix will submit the form.
+
+```html
+<w-affix search aria-label="Search"></w-affix>
+```
+
+### Clear Icon
+
+Use `clear` to render a clickable clear/reset icon button.
+When the clear attribute is used inside a w-textfield, clicking the clear button will automatically reset the w-textfield.
+
+```html
+<w-affix clear aria-label="Clear input"></w-affix>
+```

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'`