@warp-ds/elements 2.10.0-next.8 → 2.10.0

package/dist/docs/datepicker/datepicker.md

@@ -207,24 +207,25 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | calendar (JS only) | `HTMLDivElement` | `-` | - |
-| day-format | `string` | `'PPPP'` | The date format used for calendar day accessible names. |
-| header-format | `string` | `'MMMM yyyy'` | The date format used in the calendar header. |
+| day-format | `string` | `"PPPP"` | The date format used for calendar day accessible names. |
+| header-format | `string` | `"MMMM yyyy"` | The date format used in the calendar header. |
 | input (JS only) | `HTMLInputElement` | `-` | - |
 | isCalendarOpen (JS only) | `boolean` | `false` | - |
-| isDayDisabled (JS only) | `(day: Date) => boolean` | `-` | Function used to disable dates in the calendar. |
-| label | `string` | `-` | The label displayed above the date input. |
+| isDayDisabled (JS only) | `((day: Date) => boolean) \| undefined` | `-` | Function used to disable dates in the calendar. |
+| label | `string \| undefined` | `-` | The label displayed above the date input. |
 | lang | `string` | `-` | The locale used for calendar labels and date formatting. |
 | month (JS only) | `unknown` | `-` | - |
-| name | `string` | `-` | The name submitted with the date value. |
+| name | `string \| undefined` | `-` | The name submitted with the date value. |
 | navigationDate (JS only) | `Date` | `-` | - |
 | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
 | selectedDate (JS only) | `Date \| null` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 | todayCell (JS only) | `HTMLTableCellElement` | `-` | - |
 | toggleButton (JS only) | `HTMLButtonElement` | `-` | - |
-| value | `string` | `-` | The selected date value. |
-| weekday-format | `string` | `'EEEEEE'` | The weekday format shown above the calendar grid. |
+| value | `string \| undefined` | `-` | The selected date value. |
+| weekday-format | `string` | `"EEEEEE"` | The weekday format shown above the calendar grid. |
 | weeks (JS only) | `unknown` | `-` | - |
 | wrapper (JS only) | `HTMLDivElement` | `-` | - |
 
@@ -244,7 +245,7 @@ The date format used for calendar day accessible names.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
 
 - Type: `string`
-- Default: `'PPPP'`
+- Default: `"PPPP"`
 
 #### header-format
 
@@ -253,7 +254,7 @@ The date format used in the calendar header.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
 
 - Type: `string`
-- Default: `'MMMM yyyy'`
+- Default: `"MMMM yyyy"`
 
 #### input (JS only)
 
@@ -275,7 +276,7 @@ Function used to disable dates in the calendar.
 
 Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.
 
-- Type: `(day: Date) => boolean`
+- Type: `((day: Date) => boolean) | undefined`
 - Default: `-`
 
 #### label
@@ -284,7 +285,7 @@ The label displayed above the date input.
 
 Use this to give the datepicker a visible and accessible name.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### lang
@@ -309,7 +310,7 @@ The name submitted with the date value.
 
 Use this when the datepicker belongs to a form and its value should be included in form data.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### navigationDate (JS only)
@@ -330,6 +331,13 @@ the query will point to an element that doesn't exist anymore.
 - Type: `HTMLButtonElement`
 - Default: `-`
 
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 #### selectedCell (JS only)
 
 
@@ -371,7 +379,7 @@ The selected date value.
 
 Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### weekday-format
@@ -381,7 +389,7 @@ The weekday format shown above the calendar grid.
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
 
 - Type: `string`
-- Default: `'EEEEEE'`
+- Default: `"EEEEEE"`
 
 #### weeks (JS only)
 

package/dist/docs/expandable/api.md

@@ -9,10 +9,10 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | animated | `boolean` | `false` | Will animate the expansion/collapse |
 | bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
 | box | `boolean` | `false` | Will make the expandable a Box |
-| button-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
-| content-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| button-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| content-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
 | expanded | `boolean` | `false` | Controls component's expanded state |
-| heading-level | `number` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
+| heading-level | `number \| undefined` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
 | no-chevron | `boolean` | `false` | Controls chevron visibility |
 | title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
 
@@ -45,7 +45,7 @@ Will make the expandable a Box
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### content-class
@@ -54,7 +54,7 @@ Will make the expandable a Box
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### expanded
@@ -68,7 +68,7 @@ Controls component's expanded state
 
 Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### no-chevron

package/dist/docs/expandable/expandable.md

@@ -77,10 +77,10 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | animated | `boolean` | `false` | Will animate the expansion/collapse |
 | bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
 | box | `boolean` | `false` | Will make the expandable a Box |
-| button-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
-| content-class | `string` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| button-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
+| content-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
 | expanded | `boolean` | `false` | Controls component's expanded state |
-| heading-level | `number` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
+| heading-level | `number \| undefined` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
 | no-chevron | `boolean` | `false` | Controls chevron visibility |
 | title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
 
@@ -113,7 +113,7 @@ Will make the expandable a Box
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### content-class
@@ -122,7 +122,7 @@ Will make the expandable a Box
 
 
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### expanded
@@ -136,7 +136,7 @@ Controls component's expanded state
 
 Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### no-chevron

package/dist/docs/icon/api.md

@@ -8,7 +8,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 |-|-|-|-|
 | locale | `string` | `-` | Locale used for `<title>` text. |
 | name | `string` | `-` | Icon filename (without .svg) |
-| size | [`'small' \| 'medium' \| 'large' \| PixelValue`](#small-medium-large-pixelvalue) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
+| size | [`"small" \| "medium" \| "large" \| PixelValue \| undefined`](#small-medium-large-pixelvalue-undefined) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
 
 ### Property Details
 
@@ -32,12 +32,12 @@ Icon filename (without .svg)
 
 Size: small, medium, large or pixel value (e.g. "32px").
 
-- Type: [`'small' | 'medium' | 'large' | PixelValue`](#small-medium-large-pixelvalue)
+- Type: [`"small" | "medium" | "large" | PixelValue | undefined`](#small-medium-large-pixelvalue-undefined)
 - Default: `"medium"`
 
 ### Types
 
-#### 'small' | 'medium' | 'large' | PixelValue
+#### "small" | "medium" | "large" | PixelValue | undefined
 
-`'small' | 'medium' | 'large' | `${number}px``
+`'small' | 'medium' | 'large' | `${number}px` | undefined`
 

package/dist/docs/icon/icon.md

@@ -80,7 +80,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 |-|-|-|-|
 | locale | `string` | `-` | Locale used for `<title>` text. |
 | name | `string` | `-` | Icon filename (without .svg) |
-| size | [`'small' \| 'medium' \| 'large' \| PixelValue`](#small-medium-large-pixelvalue) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
+| size | [`"small" \| "medium" \| "large" \| PixelValue \| undefined`](#small-medium-large-pixelvalue-undefined) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
 
 ### Property Details
 
@@ -104,12 +104,12 @@ Icon filename (without .svg)
 
 Size: small, medium, large or pixel value (e.g. "32px").
 
-- Type: [`'small' | 'medium' | 'large' | PixelValue`](#small-medium-large-pixelvalue)
+- Type: [`"small" | "medium" | "large" | PixelValue | undefined`](#small-medium-large-pixelvalue-undefined)
 - Default: `"medium"`
 
 ### Types
 
-#### 'small' | 'medium' | 'large' | PixelValue
+#### "small" | "medium" | "large" | PixelValue | undefined
 
-`'small' | 'medium' | 'large' | `${number}px``
+`'small' | 'medium' | 'large' | `${number}px` | undefined`
 

package/dist/docs/index.md

@@ -9,16 +9,17 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 
 | Component | Element / API | Package | Summary | Docs |
 |-|-|-|-|-|
-| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. | [affix.md](./affix/affix.md) |
+| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. ## Accessibility Note Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`) cannot reference elements across shadow boundaries. This means: - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA - Interactive affixes (buttons) must have their own `aria-label` (already implemented) - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work For non-interactive labels (e.g., currency symbols), consider including the information in the main label or placeholder instead of relying on ARIA to announce affix content. | [affix.md](./affix/affix.md) |
 | Alert | `<w-alert>` | `alert` | Alert is an inline component used for displaying different types of messages. For accessibility reasons, alert should appear close to the element that triggered it. | [alert.md](./alert/alert.md) |
 | Attention | `<w-attention>` | `attention` | Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights. The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs. Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior. | [attention.md](./attention/attention.md) |
 | Badge | `<w-badge>` | `badge` | `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count. | [badge.md](./badge/badge.md) |
 | Box | `<w-box>` | `box` | Box is a layout component used for separating content areas on a page. | [box.md](./box/box.md) |
+| Breadcrumb Item | `<w-breadcrumb-item>` | `breadcrumb-item` | Represents one item in a `w-breadcrumbs` trail. Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items. | [breadcrumb-item.md](./breadcrumb-item/breadcrumb-item.md) |
 | Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | Shows the navigation structure for the current page. Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation. | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
 | Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. | [button.md](./button/button.md) |
 | Card | `<w-card>` | `card` | Card is a layout component used for separating content areas on a page. | [card.md](./card/card.md) |
 | Checkbox | `<w-checkbox>` | `checkbox` | Checkbox lets users select one or more options. Use it for independent yes/no choices, multi-select lists, and terms or consent confirmations. | [checkbox.md](./checkbox/checkbox.md) |
-| Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Use `w-checkbox-group` when several checkboxes share one label, help text, optional indicator, or required validation. | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
+| Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Checkboxes allow users to select multiple options from a list of choices. Use with `w-checkbox`. ## Architecture Note This component uses a <div> wrapper instead of the more semantic <fieldset> element. Note that w-radio-group uses <fieldset>, which provides better accessibility and follows HTML best practices. This inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.). | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
 | Combobox | `<w-combobox>` | `combobox` | A combobox element for text input with selectable options. | [combobox.md](./combobox/combobox.md) |
 | Datepicker | `<w-datepicker>` | `datepicker` | An input for dates. Uses the `lang` attribute on either the element or on `<html>` to determine the locale options. | [datepicker.md](./datepicker/datepicker.md) |
 | Expandable | `<w-expandable>` | `expandable` | Expandable is a layout component used for creating expandable content areas on a page. | [expandable.md](./expandable/expandable.md) |
@@ -35,6 +36,8 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 | Select | `<w-select>` | `select` | A dropdown component for selecting a single value. | [select.md](./select/select.md) |
 | Slider | `<w-slider>` | `slider` | Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`. | [slider.md](./slider/slider.md) |
 | Slider Thumb | `<w-slider-thumb>` | `slider-thumb` | Component to place inside a `<w-slider>`. | [slider-thumb.md](./slider-thumb/slider-thumb.md) |
+| Snackbar | `<w-snackbar>` | `snackbar` | A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo. Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages. | [snackbar.md](./snackbar/snackbar.md) |
+| Snackbar Item | `<w-snackbar-item>` | `snackbar-item` | An item to show in a `w-snackbar`. See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items. | [snackbar-item.md](./snackbar-item/snackbar-item.md) |
 | Step | `<w-step>` | `step` | Individual step component that shows a single step in a process | [step.md](./step/step.md) |
 | Step Indicator | `<w-step-indicator>` | `step-indicator` | Steps are used to show progress through a process or to guide users through a multi-step task. | [step-indicator.md](./step-indicator/step-indicator.md) |
 | Switch | `<w-switch>` | `switch` | The Switch component allows users to toggle between two states. | [switch.md](./switch/switch.md) |

package/dist/docs/link/api.md

@@ -9,11 +9,11 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | 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. |
+| href | `string \| undefined` | `-` | The URL the link points to |
+| rel | `string \| undefined` | `-` | 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. |
+| target | `string \| undefined` | `-` | Where to display the linked URL (e.g. `_blank`) |
+| variant | [`ButtonVariant \| undefined`](#buttonvariant-undefined) | `-` | Visual style for the link/button. |
 
 ### Property Details
 
@@ -44,7 +44,7 @@ Makes the link take up the full width of its parent
 
 The URL the link points to
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### rel
@@ -53,7 +53,7 @@ Relationship of the linked URL.
 
 If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### small
@@ -67,19 +67,19 @@ Render a smaller version
 
 Where to display the linked URL (e.g. `_blank`)
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### variant
 
 Visual style for the link/button.
 
-- Type: [`ButtonVariant`](#buttonvariant)
+- Type: [`ButtonVariant | undefined`](#buttonvariant-undefined)
 - Default: `-`
 
 ### Types
 
-#### ButtonVariant
+#### ButtonVariant | undefined
 
-`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined`
 

package/dist/docs/link/link.md

@@ -116,11 +116,11 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | 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. |
+| href | `string \| undefined` | `-` | The URL the link points to |
+| rel | `string \| undefined` | `-` | 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. |
+| target | `string \| undefined` | `-` | Where to display the linked URL (e.g. `_blank`) |
+| variant | [`ButtonVariant \| undefined`](#buttonvariant-undefined) | `-` | Visual style for the link/button. |
 
 ### Property Details
 
@@ -151,7 +151,7 @@ Makes the link take up the full width of its parent
 
 The URL the link points to
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### rel
@@ -160,7 +160,7 @@ Relationship of the linked URL.
 
 If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### small
@@ -174,19 +174,19 @@ Render a smaller version
 
 Where to display the linked URL (e.g. `_blank`)
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### variant
 
 Visual style for the link/button.
 
-- Type: [`ButtonVariant`](#buttonvariant)
+- Type: [`ButtonVariant | undefined`](#buttonvariant-undefined)
 - Default: `-`
 
 ### Types
 
-#### ButtonVariant
+#### ButtonVariant | undefined
 
-`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined`
 

package/dist/docs/modal/api.md

@@ -6,17 +6,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
@@ -26,6 +37,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/modal.md

@@ -40,10 +40,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 +91,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 +183,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 +266,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 +297,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