@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.21

package/dist/docs/link/link.md

@@ -4,14 +4,107 @@
 
 Buttons are used to perform actions, with different visuals for different needs.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
-
 ## Usage
 
+**Do:**
+
+- Use the `<w-link>` component when you need a link that looks like a button.
+
+**Do Not:**
+
+- Use the `<w-link>` component when you need a link that looks like a link. In that case, use the native `<a>` tag.
+- Use the `<w-link>` component when you need a button that looks like a button. In that case, use the native `<w-button>` tag.
+
+The following table illustrates use cases and which element to use for the purpose.
+
+| If desired behaviour is | and desired styling is | then use     |
+| ----------------------- | ---------------------- | ------------ |
+| link                    | button                 | `<w-link>`   |
+| button                  | button                 | `<w-button>` |
+| link                    | link                   | `<a>`        |
+| button                  | link                   | `<w-button>` |
+
 ## Accessibility
 
 ## Examples
 
+### Primary
+
+<elements-example>
+
+```html
+<w-link variant="primary" href="#">Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Secondary
+
+This is the default appearance.
+
+<elements-example>
+
+```html
+<w-link href="#">Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Negative
+
+<elements-example>
+
+```html
+<w-link variant="negative" href="#">Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Utility
+
+<elements-example>
+
+```html
+<w-link variant="utility" href="#">Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Quiet
+
+<elements-example>
+
+```html
+<w-link variant="quiet" href="#">Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Small
+
+All variants can be small.
+
+<elements-example>
+
+```html
+<w-link href="#" small>Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+### Full width
+
+
+<elements-example>
+
+```html
+<w-link href="#" full-width>Go to the top of this page</w-link>
+```
+
+</elements-example>
+
+## Styling API
+
 ## `<w-link>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,84 +113,80 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| autofocus | `boolean` | `false` | - |
-| disabled | `boolean` | `false` | - |
-| full-width | `boolean` | `false` | - |
-| href | `string` | `-` | - |
-| rel | `string` | `-` | - |
-| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| small | `boolean` | `false` | - |
-| target | `string` | `-` | - |
-| variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
+| autofocus | `boolean` | `false` | Focus the link after it is rendered |
+| disabled | `boolean` | `false` | Applies disabled styling, but you need to disable clicks on your own. |
+| full-width | `boolean` | `false` | Makes the link take up the full width of its parent |
+| href | `string \| undefined` | `-` | The URL the link points to |
+| rel | `string \| undefined` | `-` | Relationship of the linked URL. |
+| small | `boolean` | `false` | Render a smaller version |
+| target | `string \| undefined` | `-` | Where to display the linked URL (e.g. `_blank`) |
+| variant | [`ButtonVariant \| undefined`](#buttonvariant-undefined) | `-` | Visual style for the link/button. |
 
 ### Property Details
 
 #### autofocus
 
-
+Focus the link after it is rendered
 
 - Type: `boolean`
 - Default: `false`
 
 #### disabled
 
+Applies disabled styling, but you need to disable clicks on your own.
 
+The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
 
 - Type: `boolean`
 - Default: `false`
 
 #### full-width
 
-
+Makes the link take up the full width of its parent
 
 - Type: `boolean`
 - Default: `false`
 
 #### href
 
+The URL the link points to
 
-
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### rel
 
+Relationship of the linked URL.
 
+If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
-#### shadowRootOptions (JS only)
-
-
-
-- Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
-
 #### small
 
-
+Render a smaller version
 
 - Type: `boolean`
 - Default: `false`
 
 #### target
 
+Where to display the linked URL (e.g. `_blank`)
 
-
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### variant
 
+Visual style for the link/button.
 
-
-- Type: [`ButtonVariant`](#buttonvariant)
+- Type: [`ButtonVariant | undefined`](#buttonvariant-undefined)
 - Default: `-`
 
 ### Types
 
-#### ButtonVariant
+#### ButtonVariant | undefined
 
-`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined`
 

package/dist/docs/link/styling.md

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

package/dist/docs/link/usage.md

@@ -1 +1,19 @@
 ## Usage
+
+**Do:**
+
+- Use the `<w-link>` component when you need a link that looks like a button.
+
+**Do Not:**
+
+- Use the `<w-link>` component when you need a link that looks like a link. In that case, use the native `<a>` tag.
+- Use the `<w-link>` component when you need a button that looks like a button. In that case, use the native `<w-button>` tag.
+
+The following table illustrates use cases and which element to use for the purpose.
+
+| If desired behaviour is | and desired styling is | then use     |
+| ----------------------- | ---------------------- | ------------ |
+| link                    | button                 | `<w-link>`   |
+| button                  | button                 | `<w-button>` |
+| link                    | link                   | `<a>`        |
+| button                  | link                   | `<w-button>` |

package/dist/docs/modal/api.md

@@ -6,17 +6,26 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| content-id | `string` | `-` | - |
+| close (JS only) | `close() => void` | `-` | - |
+| content-id | `string \| undefined` | `-` | - |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
 
 ### Property Details
 
+#### close (JS only)
+
+
+
+- Type: `close() => void`
+- Default: `-`
+
 #### content-id
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### ignore-backdrop-clicks
@@ -26,6 +35,13 @@ Ignores clicks to the backdrop when set
 - Type: `boolean`
 - Default: `false`
 
+#### open (JS only)
+
+
+
+- Type: `open() => void`
+- Default: `-`
+
 #### show
 
 Controls if the modal should show or hide.

package/dist/docs/modal/modal.md

@@ -185,6 +185,8 @@ modal.addEventListener('command', function (event: CommandEvent) {
 
 </elements-example>
 
+## Styling API
+
 ## `<w-modal>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -193,17 +195,26 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| content-id | `string` | `-` | - |
+| close (JS only) | `close() => void` | `-` | - |
+| content-id | `string \| undefined` | `-` | - |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
 
 ### Property Details
 
+#### close (JS only)
+
+
+
+- Type: `close() => void`
+- Default: `-`
+
 #### content-id
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### ignore-backdrop-clicks
@@ -213,6 +224,13 @@ Ignores clicks to the backdrop when set
 - Type: `boolean`
 - Default: `false`
 
+#### open (JS only)
+
+
+
+- Type: `open() => void`
+- Default: `-`
+
 #### show
 
 Controls if the modal should show or hide.

package/dist/docs/modal/styling.md

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

package/dist/docs/modal-footer/modal-footer.md

@@ -4,12 +4,6 @@
 
 The footer section of a modal, typically where you place actions.
 
-## Usage
-
-## Accessibility
-
-## Examples
-
 ### `<w-modal-footer>` API
 
 #### Properties

package/dist/docs/modal-header/modal-header.md

@@ -4,12 +4,6 @@
 
 The header section of a modal, typically where you place the title and a close button.
 
-## Usage
-
-## Accessibility
-
-## Examples
-
 ### `<w-modal-header>` API
 
 #### Properties

package/dist/docs/page-indicator/page-indicator.md

@@ -28,6 +28,8 @@ One dot is highlighted to indicate the currently selected page.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-page-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/page-indicator/styling.md

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

package/dist/docs/pagination/api.md

@@ -6,9 +6,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| base-url | `string` | `-` | The base URL used to construct page links, for example `/search?page=`. |
+| base-url | `string \| undefined` | `-` | The base URL used to construct page links, for example `/search?page=`. |
 | current-page | `number` | `1` | The currently active page number. |
-| pages | `number` | `-` | The total number of pages. |
+| pages | `number` | `0` | The total number of pages. |
 | visible-pages | `number` | `7` | The maximum number of page numbers visible. |
 
 ### Property Details
@@ -19,7 +19,7 @@ The base URL used to construct page links, for example `/search?page=`.
 
 The page number is appended to this URL.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### current-page
@@ -34,7 +34,7 @@ The currently active page number.
 The total number of pages.
 
 - Type: `number`
-- Default: `-`
+- Default: `0`
 
 #### visible-pages
 

package/dist/docs/pagination/pagination.md

@@ -48,6 +48,8 @@ If you want to override this in your app and handle things like scroll and focus
 </script>
 ```
 
+## Styling API
+
 ## `<w-pagination>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -56,9 +58,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| base-url | `string` | `-` | The base URL used to construct page links, for example `/search?page=`. |
+| base-url | `string \| undefined` | `-` | The base URL used to construct page links, for example `/search?page=`. |
 | current-page | `number` | `1` | The currently active page number. |
-| pages | `number` | `-` | The total number of pages. |
+| pages | `number` | `0` | The total number of pages. |
 | visible-pages | `number` | `7` | The maximum number of page numbers visible. |
 
 ### Property Details
@@ -69,7 +71,7 @@ The base URL used to construct page links, for example `/search?page=`.
 
 The page number is appended to this URL.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### current-page
@@ -84,7 +86,7 @@ The currently active page number.
 The total number of pages.
 
 - Type: `number`
-- Default: `-`
+- Default: `0`
 
 #### visible-pages
 

package/dist/docs/pagination/styling.md

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

package/dist/docs/pill/api.md

@@ -7,10 +7,10 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | can-close | `boolean` | `false` | Whether the pill should be removable via a close button. |
-| close-aria-label | `string` | `-` | Label read by screen readers when targeting the close button. |
-| close-sr-label | `string` | `-` | **Deprecated**: Used "close-arial-label" instead. |
-| open-aria-label | `string` | `-` | Label read by screen readers when targeting the pill. |
-| open-sr-label | `string` | `-` | **Deprecated**: Used "open-arial-label" instead. |
+| close-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the close button. |
+| close-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "close-arial-label" instead. |
+| open-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the pill. |
+| open-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "open-arial-label" instead. |
 | suggestion | `boolean` | `false` | Whether the pill should be rendered as a suggestion. |
 
 ### Property Details
@@ -26,7 +26,7 @@ Whether the pill should be removable via a close button.
 
 Label read by screen readers when targeting the close button.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### close-sr-label
@@ -35,14 +35,14 @@ Label read by screen readers when targeting the close button.
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### open-aria-label
 
 Label read by screen readers when targeting the pill.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### open-sr-label
@@ -51,7 +51,7 @@ Label read by screen readers when targeting the pill.
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### suggestion

package/dist/docs/pill/pill.md

@@ -43,6 +43,8 @@ For example to dismiss or turn off parts of a filter.
 
 </elements-example>
 
+## Styling API
+
 ## `<w-pill>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -52,10 +54,10 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | can-close | `boolean` | `false` | Whether the pill should be removable via a close button. |
-| close-aria-label | `string` | `-` | Label read by screen readers when targeting the close button. |
-| close-sr-label | `string` | `-` | **Deprecated**: Used "close-arial-label" instead. |
-| open-aria-label | `string` | `-` | Label read by screen readers when targeting the pill. |
-| open-sr-label | `string` | `-` | **Deprecated**: Used "open-arial-label" instead. |
+| close-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the close button. |
+| close-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "close-arial-label" instead. |
+| open-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the pill. |
+| open-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "open-arial-label" instead. |
 | suggestion | `boolean` | `false` | Whether the pill should be rendered as a suggestion. |
 
 ### Property Details
@@ -71,7 +73,7 @@ Whether the pill should be removable via a close button.
 
 Label read by screen readers when targeting the close button.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### close-sr-label
@@ -80,14 +82,14 @@ Label read by screen readers when targeting the close button.
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### open-aria-label
 
 Label read by screen readers when targeting the pill.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### open-sr-label
@@ -96,7 +98,7 @@ Label read by screen readers when targeting the pill.
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### suggestion

package/dist/docs/pill/styling.md

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

package/dist/docs/radio/radio.md

@@ -2,13 +2,7 @@
 
 ## Description
 
-
-
-## Usage
-
-## Accessibility
-
-## Examples
+A radio input typically consists of two components:
 
 ### `<w-radio>` API
 

package/dist/docs/radio-group/api.md

@@ -7,9 +7,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | disabled | `boolean` | `false` | Disables the radio group and all child radios. |
-| help-text | `string` | `''` | Help text for the radio group. |
+| help-text | `string` | `""` | Help text for the radio group. |
 | invalid | `boolean` | `false` | Marks the radio group as invalid. |
-| label | `string` | `''` | Label for the radio group. |
+| label | `string` | `""` | Label for the radio group. |
 | name | `string \| null` | `null` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. |
 | optional | `boolean` | `false` | Whether to show optional text next to the label. |
 | required | `boolean` | `false` | Makes selecting a radio in the the group required. |
@@ -30,7 +30,7 @@ Help text for the radio group.
 If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.
 
 - Type: `string`
-- Default: `''`
+- Default: `""`
 
 #### invalid
 
@@ -44,7 +44,7 @@ Marks the radio group as invalid.
 Label for the radio group.
 
 - Type: `string`
-- Default: `''`
+- Default: `""`
 
 #### name