@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

package/dist/docs/modal/modal.md

@@ -4,6 +4,8 @@
 
 Modals (or dialogs) display important information that users need to acknowledge.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+
 ## Usage
 
 To creat a modal you need three different components:
@@ -40,10 +42,8 @@ To open and close the modal using JavaScript, get a reference to the `<w-modal>`
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
-            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
-        </div>
+        <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+        <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
     </w-modal-footer>
 </w-modal>
 
@@ -93,10 +93,8 @@ The available commands for `<w-modal>` are:
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
-            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
-        </div>
+        <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+        <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
     </w-modal-footer>
 </w-modal>
 ```
@@ -187,6 +185,81 @@ modal.addEventListener('command', function (event: CommandEvent) {
 
 ## Styling API
 
+Modal supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+#### `<w-modal>` parts
+
+- `dialog` - the root element inside the component (`<dialog>` element).
+- `wrapper` - container for all elements, direct child of `<dialog>`.
+- `content` - the container for the `content` slot items (children).
+
+#### `<w-modal-header>` parts
+
+- `header` - the root element inside the component.
+- `top` - the container for the image (`top` slot).
+- `back` - the back button, if visible.
+- `title` - the title element.
+- `close` - the close button, if visible.
+
+#### `<w-modal-footer>` parts
+
+- `footer` - the container for slotted items (children)
+
+### Component tokens
+
+#### `<w-modal>` tokens
+
+Set these on `<w-modal>` to override visuals.
+
+```css
+w-modal {
+    --w-c-modal-backdrop-color: transparent;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-modal-height`
+- `--w-c-modal-max-height`
+- `--w-c-modal-min-height`
+- `--w-c-modal-translate-distance`
+- `--w-c-modal-width`
+
+##### Background
+
+- `--w-c-modal-backdrop-color`
+- `--w-c-modal-bg`
+
+##### Text color
+
+- `--w-c-modal-color`
+
+##### Shadow
+
+- `--w-c-modal-box-shadow`
+
+#### `<w-modal-header>` tokens
+
+Set these on `<w-modal-header>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-header-font-size`
+- `--w-c-modal-header-line-height`
+- `--w-c-modal-header-margin-bottom`
+
+#### `<w-modal-footer>` tokens
+
+Set these on `<w-modal-footer>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-footer-gap` - adjusts the flex gap between actions in the footer
+
 ## `<w-modal>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -195,17 +268,28 @@ 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` | `-` | **Deprecated**: This ID has no effect |
 | 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
 
+**Deprecated**: This ID has no effect
+
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### ignore-backdrop-clicks
@@ -215,6 +299,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

@@ -1 +1,76 @@
 ## Styling API
+
+Modal supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+#### `<w-modal>` parts
+
+- `dialog` - the root element inside the component (`<dialog>` element).
+- `wrapper` - container for all elements, direct child of `<dialog>`.
+- `content` - the container for the `content` slot items (children).
+
+#### `<w-modal-header>` parts
+
+- `header` - the root element inside the component.
+- `top` - the container for the image (`top` slot).
+- `back` - the back button, if visible.
+- `title` - the title element.
+- `close` - the close button, if visible.
+
+#### `<w-modal-footer>` parts
+
+- `footer` - the container for slotted items (children)
+
+### Component tokens
+
+#### `<w-modal>` tokens
+
+Set these on `<w-modal>` to override visuals.
+
+```css
+w-modal {
+    --w-c-modal-backdrop-color: transparent;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-modal-height`
+- `--w-c-modal-max-height`
+- `--w-c-modal-min-height`
+- `--w-c-modal-translate-distance`
+- `--w-c-modal-width`
+
+##### Background
+
+- `--w-c-modal-backdrop-color`
+- `--w-c-modal-bg`
+
+##### Text color
+
+- `--w-c-modal-color`
+
+##### Shadow
+
+- `--w-c-modal-box-shadow`
+
+#### `<w-modal-header>` tokens
+
+Set these on `<w-modal-header>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-header-font-size`
+- `--w-c-modal-header-line-height`
+- `--w-c-modal-header-margin-bottom`
+
+#### `<w-modal-footer>` tokens
+
+Set these on `<w-modal-footer>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-footer-gap` - adjusts the flex gap between actions in the footer

package/dist/docs/modal/usage.md

@@ -34,10 +34,8 @@ To open and close the modal using JavaScript, get a reference to the `<w-modal>`
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
-            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
-        </div>
+        <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+        <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
     </w-modal-footer>
 </w-modal>
 
@@ -87,10 +85,8 @@ The available commands for `<w-modal>` are:
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
-            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
-        </div>
+        <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+        <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
     </w-modal-footer>
 </w-modal>
 ```

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

@@ -4,6 +4,8 @@
 
 The footer section of a modal, typically where you place actions.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+
 ### `<w-modal-footer>` API
 
 #### Properties

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

@@ -4,6 +4,8 @@
 
 The header section of a modal, typically where you place the title and a close button.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+
 ### `<w-modal-header>` API
 
 #### Properties

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

@@ -6,6 +6,8 @@ A page indicator component that displays a series of dots representing pages.
 
 One dot is highlighted to indicate the currently selected page.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
+
 ## Usage
 
 <elements-example>

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

@@ -4,6 +4,8 @@
 
 Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
+
 ## Usage
 
 
@@ -58,9 +60,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
@@ -71,7 +73,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
@@ -86,7 +88,7 @@ The currently active page number.
 The total number of pages.
 
 - Type: `number`
-- Default: `-`
+- Default: `0`
 
 #### visible-pages
 

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

@@ -4,6 +4,8 @@
 
 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.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
+
 ## Usage
 
 <elements-example>
@@ -54,10 +56,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
@@ -73,7 +75,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
@@ -82,14 +84,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
@@ -98,7 +100,7 @@ Label read by screen readers when targeting the pill.
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### suggestion

package/dist/docs/radio/radio.md

@@ -2,7 +2,11 @@
 
 ## Description
 
-A radio input typically consists of two components:
+Radios allow users to select a single option from a list of choices.
+
+Wrap individual radio components in a radio group.
+
+[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
 
 ### `<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