@warp-ds/elements 2.9.2-next.1 → 2.10.0-next.10

package/dist/docs/affix/affix.md

@@ -4,8 +4,6 @@
 
 This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
 
-[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.
@@ -144,6 +142,8 @@ Clicking the clear button will reset the textfield
 
 </elements-example>
 
+## Styling API
+
 ## `<w-affix>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/affix/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/alert/alert.md

@@ -6,8 +6,6 @@ Alert is an inline component used for displaying different types of messages.
 
 For accessibility reasons, alert should appear close to the element that triggered it.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
-
 ## Usage
 
 Alert is an inline component used for displaying different types of messages.
@@ -152,6 +150,8 @@ attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/AR
 </script>
 ```
 
+## Styling API
+
 ## `<w-alert>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/alert/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/attention/attention.md

@@ -246,6 +246,8 @@ When `can-close` is used, ensure your app listens to the `close` event and updat
 
 </elements-example>
 
+## Styling API
+
 ## `<w-attention>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/attention/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/badge/badge.md

@@ -176,6 +176,8 @@ If the same information is already available in nearby accessible text and the b
 
 </elements-example>
 
+## Styling API
+
 ## `<w-badge>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/badge/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/box/box.md

@@ -4,8 +4,6 @@
 
 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
 
 Box is a layout component for visually separating a section of content from the surrounding page.
@@ -89,13 +87,8 @@ If you must use box for a purely visual grouping, set role none:
 
 ### Basic
 
-<style-isolate>
-  <w-box aria-labelledby="delivery-heading">
-    <h2 id="delivery-heading">Delivery</h2>
-    <p>Choose how you want the item delivered.</p>
-  </w-box>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-box aria-labelledby="delivery-heading">
   <h2 id="delivery-heading">Delivery</h2>
@@ -103,14 +96,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Neutral
 
-<style-isolate>
-  <w-box neutral aria-labelledby="order-summary-heading">
-    <h2 id="order-summary-heading">Order summary</h2>
-    <p>Review the item price, delivery, and total before continuing.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box neutral aria-labelledby="order-summary-heading">
@@ -119,14 +109,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Info
 
-<style-isolate>
-  <w-box info aria-labelledby="good-to-know-heading">
-    <h2 id="good-to-know-heading">Good to know</h2>
-    <p>You can change the delivery method before payment.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box info aria-labelledby="good-to-know-heading">
@@ -135,14 +122,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Bordered
 
-<style-isolate>
-  <w-box bordered aria-labelledby="contact-seller-heading">
-    <h2 id="contact-seller-heading">Contact seller</h2>
-    <p>Send a message to ask about pickup times.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box bordered aria-labelledby="contact-seller-heading">
@@ -151,16 +135,11 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
 ### Bleed
 
-<style-isolate>
-  <div style="padding: 0 16px;">
-    <w-box neutral bleed aria-labelledby="summary-heading">
-      <h2 id="summary-heading">Summary</h2>
-      <p>This box extends into the horizontal gutter on narrow screens.</p>
-    </w-box>
-  </div>
-</style-isolate>
+<elements-example>
 
 ```html
 <div style="padding: 0 16px;">
@@ -171,13 +150,12 @@ If you must use box for a purely visual grouping, set role none:
 </div>
 ```
 
+</elements-example>
+
+
 ### Visual Grouping Without Accessibility Landmarking
 
-<style-isolate>
-  <w-box role="none">
-    <p>This box is only a visual container.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box role="none">
@@ -185,6 +163,10 @@ If you must use box for a purely visual grouping, set role none:
 </w-box>
 ```
 
+</elements-example>
+
+## Styling API
+
 ## `<w-box>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/box/examples.md

@@ -2,13 +2,8 @@
 
 ### Basic
 
-<style-isolate>
-  <w-box aria-labelledby="delivery-heading">
-    <h2 id="delivery-heading">Delivery</h2>
-    <p>Choose how you want the item delivered.</p>
-  </w-box>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-box aria-labelledby="delivery-heading">
   <h2 id="delivery-heading">Delivery</h2>
@@ -16,14 +11,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Neutral
 
-<style-isolate>
-  <w-box neutral aria-labelledby="order-summary-heading">
-    <h2 id="order-summary-heading">Order summary</h2>
-    <p>Review the item price, delivery, and total before continuing.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box neutral aria-labelledby="order-summary-heading">
@@ -32,14 +24,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Info
 
-<style-isolate>
-  <w-box info aria-labelledby="good-to-know-heading">
-    <h2 id="good-to-know-heading">Good to know</h2>
-    <p>You can change the delivery method before payment.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box info aria-labelledby="good-to-know-heading">
@@ -48,14 +37,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Bordered
 
-<style-isolate>
-  <w-box bordered aria-labelledby="contact-seller-heading">
-    <h2 id="contact-seller-heading">Contact seller</h2>
-    <p>Send a message to ask about pickup times.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box bordered aria-labelledby="contact-seller-heading">
@@ -64,16 +50,11 @@
 </w-box>
 ```
 
+</elements-example>
+
 ### Bleed
 
-<style-isolate>
-  <div style="padding: 0 16px;">
-    <w-box neutral bleed aria-labelledby="summary-heading">
-      <h2 id="summary-heading">Summary</h2>
-      <p>This box extends into the horizontal gutter on narrow screens.</p>
-    </w-box>
-  </div>
-</style-isolate>
+<elements-example>
 
 ```html
 <div style="padding: 0 16px;">
@@ -84,16 +65,17 @@
 </div>
 ```
 
+</elements-example>
+
+
 ### Visual Grouping Without Accessibility Landmarking
 
-<style-isolate>
-  <w-box role="none">
-    <p>This box is only a visual container.</p>
-  </w-box>
-</style-isolate>
+<elements-example>
 
 ```html
 <w-box role="none">
   <p>This box is only a visual container.</p>
 </w-box>
 ```
+
+</elements-example>

package/dist/docs/box/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -5,8 +5,6 @@
 Shows the navigation structure for the current page.
 Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
-
 ## Usage
 
 Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.
@@ -98,6 +96,7 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 ### Basic
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
     <a href="#/real-estate">Real estate</a>
@@ -105,11 +104,13 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
     <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>
@@ -117,19 +118,24 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
     <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>
 
+## Styling API
+
 ## `<w-breadcrumbs>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/breadcrumbs/examples.md

@@ -3,6 +3,7 @@
 ### Basic
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
     <a href="#/real-estate">Real estate</a>
@@ -10,11 +11,13 @@
     <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>
@@ -22,15 +25,18 @@
     <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>
+
+</elements-example>

package/dist/docs/breadcrumbs/styling.md

@@ -0,0 +1 @@
+## Styling API

package/dist/docs/button/accessibility.md

@@ -1 +1,43 @@
 ## Accessibility
+
+Buttons must have a clear accessible name and should describe the action they perform.
+
+### Use Descriptive Text
+
+Prefer visible text that names the action.
+
+```html
+<w-button>Save changes</w-button>
+```
+
+Avoid vague labels when the action is not obvious from context.
+
+```html
+<!-- Avoid -->
+<w-button>OK</w-button>
+```
+
+### Icon-Only Buttons
+
+If a button does not have visible text, include text for assistive technologies in the slotted content.
+
+```html
+<w-button variant="pill">
+  <w-icon name="Close"></w-icon>
+  <span class="sr-only">Close</span>
+</w-button>
+```
+
+The accessible text should describe the action, not the icon shape.
+
+### Disabled Buttons
+
+Avoid disabled buttons. A disabled control can prevent keyboard users from reaching it and often does not explain what must happen before the action becomes available.
+
+Prefer keeping the button available and showing validation or explanatory feedback when the user tries to continue.
+
+### Button Or Link
+
+Use a w-button for actions on the current page. Use a w-link for navigation.
+
+For backwards compatibility, if `href` is set, `w-button` renders a link with button styling. The accessible behavior is link behavior, even though the component looks like a button. This is deprecated behaviour and you should instead use the w-link component if you need to render a link that looks like a button.

package/dist/docs/button/api.md

@@ -6,36 +6,31 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| ariaValueTextLoading (JS only) | `unknown` | `-` | - |
-| autofocus | `boolean` | `false` | - |
-| 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` | - |
-| full-width | `boolean` | `false` | - |
-| href | `string` | `-` | - |
-| icon-only | `boolean` | `false` | - |
-| loading | `boolean` | `false` | - |
-| name | `string` | `-` | - |
-| quiet | `boolean` | `false` | **Deprecated**: Use `variant="quiet"` instead |
-| rel | `string` | `-` | - |
-| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| small | `boolean` | `false` | - |
-| target | `string` | `-` | - |
-| type | [`ButtonType`](#buttontype) | `-` | - |
-| value | `string` | `-` | - |
-| variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
+| autofocus | `boolean` | `false` | Focuses the button when it is first rendered. |
+| button-class | `string` | `-` | Deprecated class applied to the internal control. **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. |
+| command | `string` | `-` | The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
+| commandfor | `string` | `-` | The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
+| disabled | `boolean` | `false` | Visually disables the button. |
+| full-width | `boolean` | `false` | Makes the button fill its parent width. |
+| href | `string` | `-` | URL for rendering the button as a link. |
+| icon-only | `boolean` | `false` | Marks the button as icon-only. |
+| loading | `boolean` | `false` | Shows the loading state. |
+| name | `string` | `-` | Form control name. |
+| quiet | `boolean` | `false` | Deprecated quiet visual treatment flag. **Deprecated**: Use `variant="quiet"` instead |
+| rel | `string` | `-` | Link relationship. |
+| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | Shadow root configuration. |
+| small | `boolean` | `false` | Renders the compact button size. |
+| target | `string` | `-` | Link browsing context. |
+| type | [`ButtonType`](#buttontype) | `-` | Native button type. |
+| value | `string` | `-` | Form control value. |
+| variant | [`ButtonVariant`](#buttonvariant) | `-` | Visual style of the button. |
 
 ### Property Details
 
-#### ariaValueTextLoading (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### autofocus
 
-
+Focuses the button when it is first rendered.
+Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
 
 - Type: `boolean`
 - Default: `false`
@@ -44,49 +39,70 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 **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.
 
+Deprecated class applied to the internal control
+This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
 
+- Type: `string`
+- Default: `-`
+
+#### command
+
+The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
 
 - Type: `string`
 - Default: `-`
 
-#### disabled
+#### commandfor
 
+The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
 
+- Type: `string`
+- Default: `-`
+
+#### disabled
+
+Visually disables the button.
+Disabled buttons are discouraged because they can hide the reason an action is unavailable.
 
 - Type: `boolean`
 - Default: `false`
 
 #### full-width
 
-
+Makes the button fill its parent width.
+Useful in narrow layouts where the button should span the available inline space.
 
 - Type: `boolean`
 - Default: `false`
 
 #### href
 
-
+URL for rendering the button as a link.
+When set, the component renders `w-link` instead of a native `button`.
 
 - Type: `string`
 - Default: `-`
 
 #### icon-only
 
-
+Marks the button as icon-only.
+Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.
 
 - Type: `boolean`
 - Default: `false`
 
 #### loading
 
-
+Shows the loading state.
+Use after the user has triggered an action and the action is in progress.
 
 - Type: `boolean`
 - Default: `false`
 
 #### name
 
-
+Form control name.
+Used when the button participates in form handling.
 
 - Type: `string`
 - Default: `-`
@@ -95,56 +111,64 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 **Deprecated**: Use `variant="quiet"` instead
 
-
+Deprecated quiet visual treatment flag
+Use `variant="quiet"` instead.
 
 - Type: `boolean`
 - Default: `false`
 
 #### rel
 
-
+Link relationship.
+Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
 
 - Type: `string`
 - Default: `-`
 
 #### shadowRootOptions (JS only)
 
-
+Shadow root configuration.
+Delegates focus from the host to the internal control.
 
 - Type: `object`
 - Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
 
 #### small
 
-
+Renders the compact button size.
+Use this in dense layouts where the default button size is too large.
 
 - Type: `boolean`
 - Default: `false`
 
 #### target
 
-
+Link browsing context.
+Passed to the rendered link when `href` is set.
 
 - Type: `string`
 - Default: `-`
 
 #### type
 
-
+Native button type.
+Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
 
 - Type: [`ButtonType`](#buttontype)
 - Default: `-`
 
 #### value
 
-
+Form control value.
+Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
 
 - Type: `string`
 - Default: `-`
 
 #### variant
 
-
+Visual style of the button.
+Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
 
 - Type: [`ButtonVariant`](#buttonvariant)
 - Default: `-`