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

package/dist/docs/pill/pill.md

@@ -4,14 +4,47 @@
 
 Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
-
 ## Usage
 
+<elements-example>
+
+```html
+<w-pill>Filter</w-pill>
+```
+
+</elements-example>
+
 ## Accessibility
 
+Pills are designed to show active filters. By default they include generic accessible labels, but you can override these with your own.
+
 ## Examples
 
+### Closable
+
+For example to dismiss or turn off parts of a filter.
+
+<elements-example>
+
+```html
+<w-pill can-close>Filter</w-pill>
+```
+
+</elements-example>
+
+
+### Suggestion
+
+<elements-example>
+
+```html
+<w-pill suggestion>Suggestion</w-pill>
+```
+
+</elements-example>
+
+## Styling API
+
 ## `<w-pill>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,27 +53,25 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| can-close | `boolean` | `false` | - |
-| close-aria-label | `string` | `-` | - |
+| 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` | `-` | - |
-| openFilterSrText (JS only) | `unknown` | `-` | - |
+| open-aria-label | `string` | `-` | Label read by screen readers when targeting the pill. |
 | open-sr-label | `string` | `-` | **Deprecated**: Used "open-arial-label" instead. |
-| removeFilterSrText (JS only) | `unknown` | `-` | - |
-| suggestion | `boolean` | `false` | - |
+| suggestion | `boolean` | `false` | Whether the pill should be rendered as a suggestion. |
 
 ### Property Details
 
 #### can-close
 
-
+Whether the pill should be removable via a close button.
 
 - Type: `boolean`
 - Default: `false`
 
 #### close-aria-label
 
-
+Label read by screen readers when targeting the close button.
 
 - Type: `string`
 - Default: `-`
@@ -56,18 +87,11 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### open-aria-label
 
-
+Label read by screen readers when targeting the pill.
 
 - Type: `string`
 - Default: `-`
 
-#### openFilterSrText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### open-sr-label
 
 **Deprecated**: Used "open-arial-label" instead.
@@ -77,16 +101,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 - Type: `string`
 - Default: `-`
 
-#### removeFilterSrText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### suggestion
 
-
+Whether the pill should be rendered as a suggestion.
 
 - Type: `boolean`
 - Default: `false`
@@ -95,12 +112,12 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### w-pill-click
 
-
+Fires when the pill itself is clicked.
 
 - Type: `CustomEvent`
 #### w-pill-close
 
-
+Fires when the pill's close button is clicked.
 
 - Type: `CustomEvent`
 

package/dist/docs/pill/styling.md

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

package/dist/docs/pill/usage.md

@@ -1 +1,9 @@
 ## Usage
+
+<elements-example>
+
+```html
+<w-pill>Filter</w-pill>
+```
+
+</elements-example>

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