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

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,77 +113,73 @@ 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` | `-` | The URL the link points to |
+| rel | `string` | `-` | Relationship of the linked URL. |
+| small | `boolean` | `false` | Render a smaller version |
+| target | `string` | `-` | Where to display the linked URL (e.g. `_blank`) |
+| variant | [`ButtonVariant`](#buttonvariant) | `-` | 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`
 - Default: `-`
 
 #### rel
 
+Relationship of the linked URL.
 
+If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
 
 - Type: `string`
 - 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`
 - Default: `-`
 
 #### variant
 
-
+Visual style for the link/button.
 
 - Type: [`ButtonVariant`](#buttonvariant)
 - Default: `-`

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/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).

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/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).

package/dist/docs/pagination/styling.md

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

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).

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/select/select.md

@@ -158,6 +158,8 @@ The `readonly` boolean attribute makes the selection immutable. Unlike disabled
 
 </elements-example>
 
+## Styling API
+
 ## `<w-select>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/select/styling.md

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

package/dist/docs/slider/slider.md

@@ -306,6 +306,8 @@ The text field doubles as a visualization of the exact value, which is difficult
 
 </elements-example>
 
+## Styling API
+
 ## `<w-slider>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/slider/styling.md

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

package/dist/docs/slider-thumb/slider-thumb.md

@@ -10,6 +10,8 @@ Component to place inside a `<w-slider>`.
 
 ## Examples
 
+## Styling API
+
 ### `<w-slider-thumb>` API
 
 #### Properties

package/dist/docs/slider-thumb/styling.md

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

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

@@ -103,6 +103,8 @@ Each `<w-step>` can be marked as `active` or `completed` to indicate progress. T
 
 </elements-example>
 
+## Styling API
+
 ## `<w-step-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

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

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

package/dist/docs/switch/styling.md

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

package/dist/docs/switch/switch.md

@@ -34,6 +34,8 @@ The internal control is rendered as a native `button` with `role="switch"` and `
 
 </elements-example>
 
+## Styling API
+
 ## `<w-switch>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/tabs/styling.md

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

package/dist/docs/tabs/tabs.md

@@ -97,6 +97,8 @@ Use the `over` attribute to position icons above the label:
 
 </elements-example>
 
+## Styling API
+
 ## `<w-tabs>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/textarea/styling.md

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

package/dist/docs/textarea/textarea.md

@@ -111,6 +111,8 @@ Makes the textarea content immutable while remaining focusable. The contents can
 
 </elements-example>
 
+## Styling API
+
 ## `<w-textarea>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/textfield/styling.md

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

package/dist/docs/textfield/textfield.md

@@ -181,6 +181,8 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
 
 </elements-example>
 
+## Styling API
+
 ## `<w-textfield>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).