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

package/dist/docs/affix/accessibility.md

@@ -0,0 +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

@@ -6,49 +6,213 @@ This component is usually used in other components like form elements to show a
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
 
+## 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` | `-` | - |
+| 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. |
+| label | `string` | `''` | Text label shown as prefix/suffix content. |
+| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
+| _icon | `unknown` | `-` | - |
 
 ### Property Details
 
 #### ariaLabel
 
+Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
 
-
-- Type: `string`
-- Default: `-`
+- 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.
+Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
 
 - Type: `boolean`
 - Default: `false`
 
 #### search
 
-Add this property to render a clickable Warp search icon.
-
-Set an `aria-label` that explains the action when using this.
+Shows a clickable search icon, typically in a prefix slot for search fields.
 
 - Type: `boolean`
 - Default: `false`
 
 #### 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
+
+
+
+- Type: `unknown`
 - Default: `-`
 
 ### Types

package/dist/docs/affix/api.md

@@ -4,43 +4,55 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaLabel | `string` | `-` | - |
-| clear | `boolean` | `false` | - |
-| search | `boolean` | `false` | - |
-| label | `string` | `-` | - |
+| 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. |
+| label | `string` | `''` | Text label shown as prefix/suffix content. |
+| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
+| _icon | `unknown` | `-` | - |
 
 ### Property Details
 
 #### ariaLabel
 
+Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
 
-
-- Type: `string`
-- Default: `-`
+- 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.
+Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
 
 - Type: `boolean`
 - Default: `false`
 
 #### search
 
-Add this property to render a clickable Warp search icon.
-
-Set an `aria-label` that explains the action when using this.
+Shows a clickable search icon, typically in a prefix slot for search fields.
 
 - Type: `boolean`
 - Default: `false`
 
 #### 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
+
+
+
+- Type: `unknown`
 - Default: `-`
 
 ### Types

package/dist/docs/affix/examples.md

@@ -0,0 +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

@@ -0,0 +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/attention/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/attention/attention.md

@@ -4,6 +4,12 @@
 
 
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/attention/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/attention/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/badge/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/badge/badge.md

@@ -6,6 +6,12 @@
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/badge/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/badge/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/box/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/box/box.md

@@ -6,6 +6,12 @@ Box is a layout component used for separating content areas on a page.
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/box/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/box/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/breadcrumbs/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -6,6 +6,12 @@ Breadcrumbs show the navigation structure for the current location.
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/breadcrumbs/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/breadcrumbs/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/button/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/button/button.md

@@ -6,6 +6,12 @@ Buttons are used to perform actions, widh different visuals for different needs.
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/button/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/button/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/card/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/card/card.md

@@ -6,6 +6,12 @@ Card is a layout component used for separating content areas on a page.
 
 [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
 
+## Usage
+
+## Accessibility
+
+## Examples
+
 ## API Documentation
 
 ### Properties

package/dist/docs/card/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/card/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/combobox/accessibility.md

@@ -0,0 +1 @@
+## Accessibility