@warp-ds/elements 2.9.1-next.3 → 2.9.1-next.4

package/dist/docs/breadcrumbs/examples.md

@@ -1 +1,36 @@
 ## Examples
+
+### Basic
+
+<elements-example>
+```html
+  <w-breadcrumbs>
+    <a href="#/real-estate">Real estate</a>
+    <a href="#/real-estate/homes">Homes for sale</a>
+    <span aria-current="page">Oslo</span>
+  </w-breadcrumbs>
+```
+</elements-example>
+
+### Custom Accessible Label
+
+<elements-example>
+```html
+  <w-breadcrumbs aria-label="Product category path">
+    <a href="#/marketplace">Marketplace</a>
+    <a href="#/marketplace/furniture">Furniture</a>
+    <span aria-current="page">Sofas</span>
+  </w-breadcrumbs>
+```
+</elements-example>
+
+### Short Path
+
+<elements-example>
+```html
+  <w-breadcrumbs>
+    <a href="#/help">Help</a>
+    <span aria-current="page">Contact us</span>
+  </w-breadcrumbs>
+```
+</elements-example>

package/dist/docs/breadcrumbs/usage.md

@@ -1 +1,37 @@
 ## Usage
+
+Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.
+
+Use `w-breadcrumbs` near the top of a page or section, before the main page heading or primary content. Add each breadcrumb item as a direct child. The component adds separators automatically.
+
+### Basic Breadcrumbs
+
+Use links for parent pages and mark the current page with `aria-current="page"`.
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+### Current Page
+
+The current page should be the last breadcrumb item.
+
+Use a `span` when the current page should not be clickable:
+
+```html
+<w-breadcrumbs aria-label="You are here">
+  <a href="/real-estate">Real estate</a>
+  <a href="/real-estate/homes">Homes for sale</a>
+  <span aria-current="page">Oslo</span>
+</w-breadcrumbs>
+```
+
+### Content Guidelines
+
+Keep breadcrumb labels short and ordered from broadest section to most specific page. Do not add slash separators yourself; the component inserts them between items.
+
+Breadcrumbs should not replace the page heading, primary navigation, or step navigation in a process.

package/dist/docs/button/api.md

@@ -1,21 +1,23 @@
-## API Documentation
+## `<w-button>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaValueTextLoading | `unknown` | `-` | - |
+| ariaValueTextLoading (JS only) | `unknown` | `-` | - |
 | autofocus | `boolean` | `false` | - |
-| buttonClass | `string` | `-` | **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
+| button-class | `string` | `-` | **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
 | disabled | `boolean` | `false` | - |
-| fullWidth | `boolean` | `false` | - |
+| full-width | `boolean` | `false` | - |
 | href | `string` | `-` | - |
-| iconOnly | `boolean` | `false` | - |
+| icon-only | `boolean` | `false` | - |
 | loading | `boolean` | `false` | - |
 | name | `string` | `-` | - |
 | quiet | `boolean` | `false` | **Deprecated**: Use `variant="quiet"` instead |
 | rel | `string` | `-` | - |
-| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 | small | `boolean` | `false` | - |
 | target | `string` | `-` | - |
 | type | [`ButtonType`](#buttontype) | `-` | - |
@@ -24,7 +26,7 @@
 
 ### Property Details
 
-#### ariaValueTextLoading
+#### ariaValueTextLoading (JS only)
 
 
 
@@ -38,7 +40,7 @@
 - Type: `boolean`
 - Default: `false`
 
-#### buttonClass
+#### button-class
 
 **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.
 
@@ -54,7 +56,7 @@
 - Type: `boolean`
 - Default: `false`
 
-#### fullWidth
+#### full-width
 
 
 
@@ -68,7 +70,7 @@
 - Type: `string`
 - Default: `-`
 
-#### iconOnly
+#### icon-only
 
 
 
@@ -105,7 +107,7 @@
 - Type: `string`
 - Default: `-`
 
-#### shadowRootOptions
+#### shadowRootOptions (JS only)
 
 
 
@@ -151,9 +153,9 @@
 
 #### ButtonType
 
-`'button' \| 'submit' \| 'reset'`
+`'button' | 'submit' | 'reset'`
 
 #### ButtonVariant
 
-`'negative' \| 'primary' \| 'secondary' \| 'negativeQuiet' \| 'utility' \| 'quiet' \| 'utilityQuiet' \| 'overlay' \| 'overlayInverted' \| 'overlayQuiet' \| 'overlayInvertedQuiet' \| 'pill' \| 'link'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'`
 

package/dist/docs/button/button.md

@@ -12,24 +12,26 @@ Buttons are used to perform actions, widh different visuals for different needs.
 
 ## Examples
 
-## API Documentation
+## `<w-button>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaValueTextLoading | `unknown` | `-` | - |
+| ariaValueTextLoading (JS only) | `unknown` | `-` | - |
 | autofocus | `boolean` | `false` | - |
-| buttonClass | `string` | `-` | **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
+| button-class | `string` | `-` | **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
 | disabled | `boolean` | `false` | - |
-| fullWidth | `boolean` | `false` | - |
+| full-width | `boolean` | `false` | - |
 | href | `string` | `-` | - |
-| iconOnly | `boolean` | `false` | - |
+| icon-only | `boolean` | `false` | - |
 | loading | `boolean` | `false` | - |
 | name | `string` | `-` | - |
 | quiet | `boolean` | `false` | **Deprecated**: Use `variant="quiet"` instead |
 | rel | `string` | `-` | - |
-| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 | small | `boolean` | `false` | - |
 | target | `string` | `-` | - |
 | type | [`ButtonType`](#buttontype) | `-` | - |
@@ -38,7 +40,7 @@ Buttons are used to perform actions, widh different visuals for different needs.
 
 ### Property Details
 
-#### ariaValueTextLoading
+#### ariaValueTextLoading (JS only)
 
 
 
@@ -52,7 +54,7 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - Type: `boolean`
 - Default: `false`
 
-#### buttonClass
+#### button-class
 
 **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.
 
@@ -68,7 +70,7 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - Type: `boolean`
 - Default: `false`
 
-#### fullWidth
+#### full-width
 
 
 
@@ -82,7 +84,7 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - Type: `string`
 - Default: `-`
 
-#### iconOnly
+#### icon-only
 
 
 
@@ -119,7 +121,7 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - Type: `string`
 - Default: `-`
 
-#### shadowRootOptions
+#### shadowRootOptions (JS only)
 
 
 
@@ -165,9 +167,9 @@ Buttons are used to perform actions, widh different visuals for different needs.
 
 #### ButtonType
 
-`'button' \| 'submit' \| 'reset'`
+`'button' | 'submit' | 'reset'`
 
 #### ButtonVariant
 
-`'negative' \| 'primary' \| 'secondary' \| 'negativeQuiet' \| 'utility' \| 'quiet' \| 'utilityQuiet' \| 'overlay' \| 'overlayInverted' \| 'overlayQuiet' \| 'overlayInvertedQuiet' \| 'pill' \| 'link'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'`
 

package/dist/docs/card/api.md

@@ -1,17 +1,19 @@
-## API Documentation
+## `<w-card>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| buttonText | `unknown` | `-` | - |
+| buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | - |
 | flat | `boolean` | `false` | - |
 | selected | `boolean` | `false` | - |
 
 ### Property Details
 
-#### buttonText
+#### buttonText (JS only)
 
 
 
@@ -39,6 +41,3 @@
 - Type: `boolean`
 - Default: `false`
 
-### Types
-
-No types documented.

package/dist/docs/card/card.md

@@ -12,20 +12,22 @@ Card is a layout component used for separating content areas on a page.
 
 ## Examples
 
-## API Documentation
+## `<w-card>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| buttonText | `unknown` | `-` | - |
+| buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | - |
 | flat | `boolean` | `false` | - |
 | selected | `boolean` | `false` | - |
 
 ### Property Details
 
-#### buttonText
+#### buttonText (JS only)
 
 
 
@@ -53,6 +55,3 @@ Card is a layout component used for separating content areas on a page.
 - Type: `boolean`
 - Default: `false`
 
-### Types
-
-No types documented.

package/dist/docs/combobox/api.md

@@ -1,23 +1,25 @@
-## API Documentation
+## `<w-combobox>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | autocomplete | `string \| undefined` | `'off'` | Autocomplete attribute for the input field |
-| disableStaticFiltering | `boolean` | `false` | Disable client-side static filtering |
+| disable-static-filtering | `boolean` | `false` | Disable client-side static filtering |
 | disabled | `boolean` | `false` | Whether the element is disabled |
-| helpText | `string \| undefined` | `''` | The content to display as the help text |
+| help-text | `string \| undefined` | `''` | The content to display as the help text |
 | invalid | `boolean` | `false` | Renders the input field in an invalid state |
 | label | `string \| undefined` | `''` | Label above input |
-| matchTextSegments | `boolean` | `false` | Whether the matching text segments in the options should be highlighted |
+| match-text-segments | `boolean` | `false` | Whether the matching text segments in the options should be highlighted |
 | name | `string \| undefined` | `''` | Name attribute for form submission |
-| openOnFocus | `boolean` | `false` | Whether the popover opens when focus is on the text field |
+| open-on-focus | `boolean` | `false` | Whether the popover opens when focus is on the text field |
 | optional | `boolean` | `false` | Whether to show optional text |
 | options | `ComboboxOption[]` | `[]` | The available options to select from |
 | placeholder | `string \| undefined` | `''` | Input placeholder |
 | required | `boolean` | `false` | Whether the element is required |
-| selectOnBlur | `boolean` | `true` | Select active option on blur |
+| select-on-blur | `boolean` | `true` | Select active option on blur |
 | value | `string` | `''` | The input value |
 
 ### Property Details
@@ -26,10 +28,10 @@
 
 Autocomplete attribute for the input field
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `'off'`
 
-#### disableStaticFiltering
+#### disable-static-filtering
 
 Disable client-side static filtering
 
@@ -43,11 +45,11 @@ Whether the element is disabled
 - Type: `boolean`
 - Default: `false`
 
-#### helpText
+#### help-text
 
 The content to display as the help text
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
 #### invalid
@@ -61,10 +63,10 @@ Renders the input field in an invalid state
 
 Label above input
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
-#### matchTextSegments
+#### match-text-segments
 
 Whether the matching text segments in the options should be highlighted
 
@@ -75,10 +77,10 @@ Whether the matching text segments in the options should be highlighted
 
 Name attribute for form submission
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
-#### openOnFocus
+#### open-on-focus
 
 Whether the popover opens when focus is on the text field
 
@@ -103,7 +105,7 @@ The available options to select from
 
 Input placeholder
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
 #### required
@@ -113,7 +115,7 @@ Whether the element is required
 - Type: `boolean`
 - Default: `false`
 
-#### selectOnBlur
+#### select-on-blur
 
 Select active option on blur
 
@@ -127,6 +129,3 @@ The input value
 - Type: `string`
 - Default: `''`
 
-### Types
-
-No types documented.

package/dist/docs/combobox/combobox.md

@@ -12,26 +12,28 @@ A combobox element for text input with selectable options.
 
 ## Examples
 
-## API Documentation
+## `<w-combobox>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | autocomplete | `string \| undefined` | `'off'` | Autocomplete attribute for the input field |
-| disableStaticFiltering | `boolean` | `false` | Disable client-side static filtering |
+| disable-static-filtering | `boolean` | `false` | Disable client-side static filtering |
 | disabled | `boolean` | `false` | Whether the element is disabled |
-| helpText | `string \| undefined` | `''` | The content to display as the help text |
+| help-text | `string \| undefined` | `''` | The content to display as the help text |
 | invalid | `boolean` | `false` | Renders the input field in an invalid state |
 | label | `string \| undefined` | `''` | Label above input |
-| matchTextSegments | `boolean` | `false` | Whether the matching text segments in the options should be highlighted |
+| match-text-segments | `boolean` | `false` | Whether the matching text segments in the options should be highlighted |
 | name | `string \| undefined` | `''` | Name attribute for form submission |
-| openOnFocus | `boolean` | `false` | Whether the popover opens when focus is on the text field |
+| open-on-focus | `boolean` | `false` | Whether the popover opens when focus is on the text field |
 | optional | `boolean` | `false` | Whether to show optional text |
 | options | `ComboboxOption[]` | `[]` | The available options to select from |
 | placeholder | `string \| undefined` | `''` | Input placeholder |
 | required | `boolean` | `false` | Whether the element is required |
-| selectOnBlur | `boolean` | `true` | Select active option on blur |
+| select-on-blur | `boolean` | `true` | Select active option on blur |
 | value | `string` | `''` | The input value |
 
 ### Property Details
@@ -40,10 +42,10 @@ A combobox element for text input with selectable options.
 
 Autocomplete attribute for the input field
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `'off'`
 
-#### disableStaticFiltering
+#### disable-static-filtering
 
 Disable client-side static filtering
 
@@ -57,11 +59,11 @@ Whether the element is disabled
 - Type: `boolean`
 - Default: `false`
 
-#### helpText
+#### help-text
 
 The content to display as the help text
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
 #### invalid
@@ -75,10 +77,10 @@ Renders the input field in an invalid state
 
 Label above input
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
-#### matchTextSegments
+#### match-text-segments
 
 Whether the matching text segments in the options should be highlighted
 
@@ -89,10 +91,10 @@ Whether the matching text segments in the options should be highlighted
 
 Name attribute for form submission
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
-#### openOnFocus
+#### open-on-focus
 
 Whether the popover opens when focus is on the text field
 
@@ -117,7 +119,7 @@ The available options to select from
 
 Input placeholder
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `''`
 
 #### required
@@ -127,7 +129,7 @@ Whether the element is required
 - Type: `boolean`
 - Default: `false`
 
-#### selectOnBlur
+#### select-on-blur
 
 Select active option on blur
 
@@ -141,6 +143,3 @@ The input value
 - Type: `string`
 - Default: `''`
 
-### Types
-
-No types documented.