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

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

@@ -3,14 +3,31 @@
 ## Description
 
 A page indicator component that displays a series of dots representing pages.
+
 One dot is highlighted to indicate the currently selected page.
 
 ## Usage
 
+<elements-example>
+
+```html
+<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>
+```
+
+</elements-example>
+
 ## Accessibility
 
 ## Examples
 
+<elements-example>
+
+```html
+<w-page-indicator selected-page="3" page-count="5"></w-page-indicator>
+```
+
+</elements-example>
+
 ## `<w-page-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -19,22 +36,22 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| page-count | `number` | `-` | Total number of pages (minimum 1) |
-| selected-page | `number` | `-` | Currently selected page (1-based index, clamped to valid range) |
+| page-count | `number` | `1` | Total number of pages |
+| selected-page | `number` | `1` | Currently selected page (1-based index) |
 
 ### Property Details
 
 #### page-count
 
-Total number of pages (minimum 1)
+Total number of pages
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 
 #### selected-page
 
-Currently selected page (1-based index, clamped to valid range)
+Currently selected page (1-based index)
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 

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

@@ -1 +1,9 @@
 ## Usage
+
+<elements-example>
+
+```html
+<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>
+```
+
+</elements-example>

package/dist/docs/pagination/api.md

@@ -6,46 +6,48 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| base-url | `string` | `-` | - |
-| current-page | `number` | `-` | - |
-| pages | `number` | `-` | - |
-| visible-pages | `number` | `-` | - |
+| base-url | `string` | `-` | 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. |
+| visible-pages | `number` | `7` | The maximum number of page numbers visible. |
 
 ### Property Details
 
 #### base-url
 
+The base URL used to construct page links, for example `/search?page=`.
 
+The page number is appended to this URL.
 
 - Type: `string`
 - Default: `-`
 
 #### current-page
 
-
+The currently active page number.
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 
 #### pages
 
-
+The total number of pages.
 
 - Type: `number`
 - Default: `-`
 
 #### visible-pages
 
-
+The maximum number of page numbers visible.
 
 - Type: `number`
-- Default: `-`
+- Default: `7`
 
 ### Events
 
 #### page-click
 
-Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
 
 - Type: `CustomEvent`
 

package/dist/docs/pagination/examples.md

@@ -1 +1,21 @@
 ## Examples
+
+### Single-page app behavior
+
+By default the pagination component uses link which trigger a full page navigation.
+
+If you want to override this in your app and handle things like scroll and focus management on your own you can add an event listener to the pagination component and prevent the default navigation.
+
+```html
+<w-pagination base-url="/search?page=" pages="10" current-page="5"></w-pagination>
+
+<script type="module">
+  const pagination = document.querySelector('w-pagination');
+
+  pagination.addEventListener('page-click', (event) => {
+    event.preventDefault();
+    // event.detail = { clickedPage: string }
+    console.log('Do something with the clicked page after preventing default navigation:', event.detail.clickedPage);
+  });
+</script>
+```

package/dist/docs/pagination/pagination.md

@@ -4,14 +4,50 @@
 
 Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
-
 ## Usage
 
+
+The pagination component automatically shows/hides navigation buttons based on the current page:
+
+- **First page button** (double chevron): Shown when current page is greater than 2
+- **Previous page button** (single chevron): Shown when current page is greater than 1
+- **Next page button** (single chevron): Shown when current page is less than total pages
+
+On mobile devices, the page numbers are hidden and replaced with a "Page X" label for a cleaner interface.
+
+
+<elements-example>
+
+```html
+<w-pagination base-url="#/search?page=" pages="5" current-page="1"></w-pagination>
+```
+
+</elements-example>
+
 ## Accessibility
 
 ## Examples
 
+### Single-page app behavior
+
+By default the pagination component uses link which trigger a full page navigation.
+
+If you want to override this in your app and handle things like scroll and focus management on your own you can add an event listener to the pagination component and prevent the default navigation.
+
+```html
+<w-pagination base-url="/search?page=" pages="10" current-page="5"></w-pagination>
+
+<script type="module">
+  const pagination = document.querySelector('w-pagination');
+
+  pagination.addEventListener('page-click', (event) => {
+    event.preventDefault();
+    // event.detail = { clickedPage: string }
+    console.log('Do something with the clicked page after preventing default navigation:', event.detail.clickedPage);
+  });
+</script>
+```
+
 ## `<w-pagination>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,46 +56,48 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| base-url | `string` | `-` | - |
-| current-page | `number` | `-` | - |
-| pages | `number` | `-` | - |
-| visible-pages | `number` | `-` | - |
+| base-url | `string` | `-` | 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. |
+| visible-pages | `number` | `7` | The maximum number of page numbers visible. |
 
 ### Property Details
 
 #### base-url
 
+The base URL used to construct page links, for example `/search?page=`.
 
+The page number is appended to this URL.
 
 - Type: `string`
 - Default: `-`
 
 #### current-page
 
-
+The currently active page number.
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 
 #### pages
 
-
+The total number of pages.
 
 - Type: `number`
 - Default: `-`
 
 #### visible-pages
 
-
+The maximum number of page numbers visible.
 
 - Type: `number`
-- Default: `-`
+- Default: `7`
 
 ### Events
 
 #### page-click
 
-Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
+Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
 
 - Type: `CustomEvent`
 

package/dist/docs/pagination/usage.md

@@ -1 +1,19 @@
 ## Usage
+
+
+The pagination component automatically shows/hides navigation buttons based on the current page:
+
+- **First page button** (double chevron): Shown when current page is greater than 2
+- **Previous page button** (single chevron): Shown when current page is greater than 1
+- **Next page button** (single chevron): Shown when current page is less than total pages
+
+On mobile devices, the page numbers are hidden and replaced with a "Page X" label for a cleaner interface.
+
+
+<elements-example>
+
+```html
+<w-pagination base-url="#/search?page=" pages="5" current-page="1"></w-pagination>
+```
+
+</elements-example>

package/dist/docs/pill/accessibility.md

@@ -1 +1,3 @@
 ## Accessibility
+
+Pills are designed to show active filters. By default they include generic accessible labels, but you can override these with your own.

package/dist/docs/pill/api.md

@@ -6,27 +6,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: `-`
@@ -42,18 +40,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.
@@ -63,16 +54,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`
@@ -81,12 +65,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/examples.md

@@ -1 +1,24 @@
 ## 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>

package/dist/docs/pill/pill.md

@@ -4,14 +4,45 @@
 
 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>
+
 ## `<w-pill>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,27 +51,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 +85,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 +99,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 +110,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/usage.md

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

package/dist/docs/radio/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/radio/api.md

@@ -0,0 +1,57 @@
+### `<w-radio>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| checked | `boolean` | `false` | Draws the radio in a checked state (reflected to attribute). |
+| disabled | `boolean` | `false` | Disables the radio. |
+| invalid | `boolean` | `false` | Draws the radio in an invalid state. |
+| name | `string` | `-` | The name of the radio, submitted as a name/value pair with form data. |
+| required | `boolean` | `false` | Makes the radio a required field. |
+| value | `string \| null` | `null` | The radio's value. When selected, the radio group will receive this value. |
+
+#### Property Details
+
+##### checked
+
+Draws the radio in a checked state (reflected to attribute).
+
+- Type: `boolean`
+- Default: `false`
+
+##### disabled
+
+Disables the radio.
+
+- Type: `boolean`
+- Default: `false`
+
+##### invalid
+
+Draws the radio in an invalid state.
+
+- Type: `boolean`
+- Default: `false`
+
+##### name
+
+The name of the radio, submitted as a name/value pair with form data.
+
+- Type: `string`
+- Default: `-`
+
+##### required
+
+Makes the radio a required field.
+
+- Type: `boolean`
+- Default: `false`
+
+##### value
+
+The radio's value. When selected, the radio group will receive this value.
+
+- Type: `string | null`
+- Default: `null`
+

package/dist/docs/radio/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/radio/radio.md

@@ -0,0 +1,69 @@
+# Radio (w-radio)
+
+## Description
+
+
+
+## Usage
+
+## Accessibility
+
+## Examples
+
+### `<w-radio>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| checked | `boolean` | `false` | Draws the radio in a checked state (reflected to attribute). |
+| disabled | `boolean` | `false` | Disables the radio. |
+| invalid | `boolean` | `false` | Draws the radio in an invalid state. |
+| name | `string` | `-` | The name of the radio, submitted as a name/value pair with form data. |
+| required | `boolean` | `false` | Makes the radio a required field. |
+| value | `string \| null` | `null` | The radio's value. When selected, the radio group will receive this value. |
+
+#### Property Details
+
+##### checked
+
+Draws the radio in a checked state (reflected to attribute).
+
+- Type: `boolean`
+- Default: `false`
+
+##### disabled
+
+Disables the radio.
+
+- Type: `boolean`
+- Default: `false`
+
+##### invalid
+
+Draws the radio in an invalid state.
+
+- Type: `boolean`
+- Default: `false`
+
+##### name
+
+The name of the radio, submitted as a name/value pair with form data.
+
+- Type: `string`
+- Default: `-`
+
+##### required
+
+Makes the radio a required field.
+
+- Type: `boolean`
+- Default: `false`
+
+##### value
+
+The radio's value. When selected, the radio group will receive this value.
+
+- Type: `string | null`
+- Default: `null`
+

package/dist/docs/radio/usage.md

@@ -0,0 +1 @@
+## Usage

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

@@ -0,0 +1 @@
+## Accessibility