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

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

@@ -0,0 +1,11 @@
+### `<w-modal-footer>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+
+#### Property Details
+
+No public fields documented.
+

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

@@ -0,0 +1,17 @@
+# ModalFooter (w-modal-footer)
+
+## Description
+
+The footer section of a modal, typically where you place actions.
+
+### `<w-modal-footer>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+
+#### Property Details
+
+No public fields documented.
+

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

@@ -0,0 +1,42 @@
+### `<w-modal-header>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| back | `boolean` | `false` | Whether the modal header should have a back button |
+| no-close | `boolean` | `false` | Lets you hide the close button in the header |
+| title | `string` | `-` | A short but descriptive title for the modal |
+
+#### Property Details
+
+##### back
+
+Whether the modal header should have a back button
+
+- Type: `boolean`
+- Default: `false`
+
+##### no-close
+
+Lets you hide the close button in the header
+
+- Type: `boolean`
+- Default: `false`
+
+##### title
+
+A short but descriptive title for the modal
+
+- Type: `string`
+- Default: `-`
+
+#### Events
+
+##### backClicked
+
+
+
+- Type: `CustomEvent`
+
+

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

@@ -0,0 +1,48 @@
+# ModalHeader (w-modal-header)
+
+## Description
+
+The header section of a modal, typically where you place the title and a close button.
+
+### `<w-modal-header>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| back | `boolean` | `false` | Whether the modal header should have a back button |
+| no-close | `boolean` | `false` | Lets you hide the close button in the header |
+| title | `string` | `-` | A short but descriptive title for the modal |
+
+#### Property Details
+
+##### back
+
+Whether the modal header should have a back button
+
+- Type: `boolean`
+- Default: `false`
+
+##### no-close
+
+Lets you hide the close button in the header
+
+- Type: `boolean`
+- Default: `false`
+
+##### title
+
+A short but descriptive title for the modal
+
+- Type: `string`
+- Default: `-`
+
+#### Events
+
+##### backClicked
+
+
+
+- Type: `CustomEvent`
+
+

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

@@ -6,22 +6,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/examples.md

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

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

@@ -3,14 +3,33 @@
 ## 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>
+
+## Styling API
+
 ## `<w-page-indicator>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -19,22 +38,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/styling.md

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

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,52 @@
 
 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>
+```
+
+## Styling API
+
 ## `<w-pagination>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,46 +58,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/styling.md

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

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>