@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.21

package/dist/docs/button/button.md

@@ -5,8 +5,6 @@
 Performs an action or renders a link with button styling.
 Use button variants to match action priority, risk, and context.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
-
 ## Usage
 
 Button is used for actions. Use it when the user can submit, save, confirm, cancel, open, close, or trigger something on the current page.
@@ -270,6 +268,79 @@ For backwards compatibility, if `href` is set, `w-button` renders a link with bu
 
 </elements-example>
 
+## Styling API
+
+This component supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**.
+
+### Parts
+
+Use `::part(...)` from outside the component.
+
+- `base` — the clickable element (`<button>` or `<w-link>`)
+
+Example:
+
+```css
+w-button::part(base) {
+  text-transform: uppercase;
+}
+```
+
+### Component tokens
+
+Set these on `w-button` to override visuals.
+
+```css
+w-button {
+  --w-c-button-bg: var(--w-s-color-background-primary);
+  --w-c-button-color: var(--w-s-color-text-inverted);
+}
+```
+
+#### Layout & typography
+
+- `--w-c-button-radius`
+- `--w-c-button-font-size`
+- `--w-c-button-line-height`
+- `--w-c-button-font-weight`
+- `--w-c-button-padding-x`
+- `--w-c-button-padding-y`
+
+#### Background
+
+- `--w-c-button-bg`
+- `--w-c-button-bg-hover`
+- `--w-c-button-bg-active`
+
+#### Text color
+
+- `--w-c-button-color`
+- `--w-c-button-color-hover`
+- `--w-c-button-color-active`
+
+#### Border
+
+- `--w-c-button-border-width`
+- `--w-c-button-border-color`
+- `--w-c-button-border-color-hover`
+- `--w-c-button-border-color-active`
+
+#### Focus
+
+- `--w-c-button-outline-width`
+- `--w-c-button-outline-color`
+- `--w-c-button-outline-offset`
+
+#### Motion
+
+- `--w-c-button-transition`
+
+### Notes
+
+- Variant defaults are set internally using fallbacks, so overriding tokens works across variants.
+- The `quiet` boolean is supported for backwards compatibility. Prefer `variant="quiet"` going forward.
+- When `loading` is set, the button is treated as disabled (no pointer interaction).
+
 ## `<w-button>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -279,23 +350,24 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | autofocus | `boolean` | `false` | Focuses the button when it is first rendered. |
-| button-class | `string` | `-` | Deprecated class applied to the internal control. **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
-| command | `string` | `-` | The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
-| commandfor | `string` | `-` | The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
+| button-class | `string \| undefined` | `-` | Deprecated class applied to the internal control. **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
+| command | `string \| undefined` | `-` | The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
+| commandfor | `string \| undefined` | `-` | The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. |
 | disabled | `boolean` | `false` | Visually disables the button. |
 | full-width | `boolean` | `false` | Makes the button fill its parent width. |
-| href | `string` | `-` | URL for rendering the button as a link. |
+| href | `string \| undefined` | `-` | URL for rendering the button as a link. |
 | icon-only | `boolean` | `false` | Marks the button as icon-only. |
 | loading | `boolean` | `false` | Shows the loading state. |
-| name | `string` | `-` | Form control name. |
+| name | `string \| undefined` | `-` | Form control name. |
 | quiet | `boolean` | `false` | Deprecated quiet visual treatment flag. **Deprecated**: Use `variant="quiet"` instead |
-| rel | `string` | `-` | Link relationship. |
+| rel | `string \| undefined` | `-` | Link relationship. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | Shadow root configuration. |
 | small | `boolean` | `false` | Renders the compact button size. |
-| target | `string` | `-` | Link browsing context. |
-| type | [`ButtonType`](#buttontype) | `-` | Native button type. |
-| value | `string` | `-` | Form control value. |
-| variant | [`ButtonVariant`](#buttonvariant) | `-` | Visual style of the button. |
+| target | `string \| undefined` | `-` | Link browsing context. |
+| type | [`ButtonType \| undefined`](#buttontype-undefined) | `-` | Native button type. |
+| value | `string \| undefined` | `-` | Form control value. |
+| variant | [`ButtonVariant \| undefined`](#buttonvariant-undefined) | `-` | Visual style of the button. |
 
 ### Property Details
 
@@ -314,21 +386,21 @@ Applies only when the component renders a native button. Link buttons with `href
 Deprecated class applied to the internal control
 This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### command
 
 The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### commandfor
 
 The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### disabled
@@ -352,7 +424,7 @@ Useful in narrow layouts where the button should span the available inline space
 URL for rendering the button as a link.
 When set, the component renders `w-link` instead of a native `button`.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### icon-only
@@ -376,7 +448,7 @@ Use after the user has triggered an action and the action is in progress.
 Form control name.
 Used when the button participates in form handling.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### quiet
@@ -394,7 +466,14 @@ Use `variant="quiet"` instead.
 Link relationship.
 Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
 
-- Type: `string`
+- Type: `string | undefined`
+- Default: `-`
+
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
 - Default: `-`
 
 #### shadowRootOptions (JS only)
@@ -418,7 +497,7 @@ Use this in dense layouts where the default button size is too large.
 Link browsing context.
 Passed to the rendered link when `href` is set.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### type
@@ -426,7 +505,7 @@ Passed to the rendered link when `href` is set.
 Native button type.
 Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
 
-- Type: [`ButtonType`](#buttontype)
+- Type: [`ButtonType | undefined`](#buttontype-undefined)
 - Default: `-`
 
 #### value
@@ -434,7 +513,7 @@ Controls whether the internal button behaves as a regular button, submits a form
 Form control value.
 Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### variant
@@ -442,16 +521,16 @@ Used with `name` when the button participates in form handling. Resets to its in
 Visual style of the button.
 Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
 
-- Type: [`ButtonVariant`](#buttonvariant)
+- Type: [`ButtonVariant | undefined`](#buttonvariant-undefined)
 - Default: `-`
 
 ### Types
 
-#### ButtonType
+#### ButtonType | undefined
 
-`'button' | 'submit' | 'reset'`
+`'button' | 'submit' | 'reset' | undefined`
 
-#### ButtonVariant
+#### ButtonVariant | undefined
 
-`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'`
+`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined`
 

package/dist/docs/button/styling.md

@@ -0,0 +1,72 @@
+## Styling API
+
+This component supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**.
+
+### Parts
+
+Use `::part(...)` from outside the component.
+
+- `base` — the clickable element (`<button>` or `<w-link>`)
+
+Example:
+
+```css
+w-button::part(base) {
+  text-transform: uppercase;
+}
+```
+
+### Component tokens
+
+Set these on `w-button` to override visuals.
+
+```css
+w-button {
+  --w-c-button-bg: var(--w-s-color-background-primary);
+  --w-c-button-color: var(--w-s-color-text-inverted);
+}
+```
+
+#### Layout & typography
+
+- `--w-c-button-radius`
+- `--w-c-button-font-size`
+- `--w-c-button-line-height`
+- `--w-c-button-font-weight`
+- `--w-c-button-padding-x`
+- `--w-c-button-padding-y`
+
+#### Background
+
+- `--w-c-button-bg`
+- `--w-c-button-bg-hover`
+- `--w-c-button-bg-active`
+
+#### Text color
+
+- `--w-c-button-color`
+- `--w-c-button-color-hover`
+- `--w-c-button-color-active`
+
+#### Border
+
+- `--w-c-button-border-width`
+- `--w-c-button-border-color`
+- `--w-c-button-border-color-hover`
+- `--w-c-button-border-color-active`
+
+#### Focus
+
+- `--w-c-button-outline-width`
+- `--w-c-button-outline-color`
+- `--w-c-button-outline-offset`
+
+#### Motion
+
+- `--w-c-button-transition`
+
+### Notes
+
+- Variant defaults are set internally using fallbacks, so overriding tokens works across variants.
+- The `quiet` boolean is supported for backwards compatibility. Prefer `variant="quiet"` going forward.
+- When `loading` is set, the button is treated as disabled (no pointer interaction).

package/dist/docs/card/api.md

@@ -9,6 +9,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | Whether the whole card is interactive. |
 | flat | `boolean` | `false` | Whether the card uses the flat visual treatment. |
+| keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | selected | `boolean` | `false` | Whether the card is visually selected. |
 
 ### Property Details
@@ -38,6 +39,13 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 - Type: `boolean`
 - Default: `false`
 
+#### keypressed (JS only)
+
+
+
+- Type: `keypressed(e: KeyboardEvent) => void`
+- Default: `-`
+
 #### selected
 
 Whether the card is visually selected.

package/dist/docs/card/card.md

@@ -4,8 +4,6 @@
 
 Card is a layout component used for separating content areas on a page.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
-
 ## Usage
 
 Card is a layout component for visually grouping related content as one item.
@@ -237,6 +235,8 @@ Use a button for an action on the current page:
 
 </elements-example>
 
+## Styling API
+
 ## `<w-card>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -248,6 +248,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | Whether the whole card is interactive. |
 | flat | `boolean` | `false` | Whether the card uses the flat visual treatment. |
+| keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | selected | `boolean` | `false` | Whether the card is visually selected. |
 
 ### Property Details
@@ -277,6 +278,13 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 - Type: `boolean`
 - Default: `false`
 
+#### keypressed (JS only)
+
+
+
+- Type: `keypressed(e: KeyboardEvent) => void`
+- Default: `-`
+
 #### selected
 
 Whether the card is visually selected.

package/dist/docs/card/styling.md

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

package/dist/docs/checkbox/api.md

@@ -0,0 +1,176 @@
+### `<w-checkbox>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| _computedInvalid (JS only) | `boolean` | `-` | Computed invalid state: combines own invalid with group invalid |
+| blur (JS only) | `blur() => void` | `-` | - |
+| checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the checkbox passes constraint validation |
+| checked | `boolean` | `false` | Whether the checkbox is checked. |
+| click (JS only) | `click() => void` | `-` | - |
+| disabled | `boolean` | `false` | Whether the checkbox is disabled. |
+| focus (JS only) | `focus(options?: FocusOptions) => void` | `-` | - |
+| indeterminate | `boolean` | `false` | Whether the checkbox is visually indeterminate. |
+| input (JS only) | `HTMLInputElement` | `-` | - |
+| invalid | `boolean` | `false` | Whether the checkbox is visually invalid. |
+| name | `string \| undefined` | `-` | The name of the checkbox. |
+| reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid |
+| required | `boolean` | `false` | Whether the checkbox must be checked before form submission. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
+| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| validationMessage (JS only) | `string` | `-` | Returns the validation message if the checkbox is invalid, otherwise an empty string |
+| validity (JS only) | `ValidityState` | `-` | Returns the validity state of the checkbox |
+| value | `string \| null` | `null` | The value submitted when the checkbox is checked. |
+
+#### Property Details
+
+##### _computedInvalid (JS only)
+
+Computed invalid state: combines own invalid with group invalid
+
+- Type: `boolean`
+- Default: `-`
+
+##### blur (JS only)
+
+
+
+- Type: `blur() => void`
+- Default: `-`
+
+##### checkValidity (JS only)
+
+Checks whether the checkbox passes constraint validation
+
+- Type: `checkValidity() => boolean`
+- Default: `-`
+
+##### checked
+
+Whether the checkbox is checked.
+
+Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.
+
+- Type: `boolean`
+- Default: `false`
+
+##### click (JS only)
+
+
+
+- Type: `click() => void`
+- Default: `-`
+
+##### disabled
+
+Whether the checkbox is disabled.
+
+Disabled checkboxes cannot be focused, changed, or submitted with form data.
+
+- Type: `boolean`
+- Default: `false`
+
+##### focus (JS only)
+
+
+
+- Type: `focus(options?: FocusOptions) => void`
+- Default: `-`
+
+##### indeterminate
+
+Whether the checkbox is visually indeterminate.
+
+Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.
+
+- Type: `boolean`
+- Default: `false`
+
+##### input (JS only)
+
+
+
+- Type: `HTMLInputElement`
+- Default: `-`
+
+##### invalid
+
+Whether the checkbox is visually invalid.
+
+Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.
+
+- Type: `boolean`
+- Default: `false`
+
+##### name
+
+The name of the checkbox.
+
+When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.
+
+- Type: `string | undefined`
+- Default: `-`
+
+##### reportValidity (JS only)
+
+Checks validity and shows the browser's validation message if invalid
+
+- Type: `reportValidity() => boolean`
+- Default: `-`
+
+##### required
+
+Whether the checkbox must be checked before form submission.
+
+A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.
+
+- Type: `boolean`
+- Default: `false`
+
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
+##### shadowRootOptions (JS only)
+
+
+
+- Type: `object`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
+
+##### validationMessage (JS only)
+
+Returns the validation message if the checkbox is invalid, otherwise an empty string
+
+- Type: `string`
+- Default: `-`
+
+##### validity (JS only)
+
+Returns the validity state of the checkbox
+
+- Type: `ValidityState`
+- Default: `-`
+
+##### value
+
+The value submitted when the checkbox is checked.
+
+If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.
+
+- Type: `string | null`
+- Default: `null`
+
+#### Events
+
+##### change
+
+
+
+- Type: `Event`
+
+