@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

package/dist/docs/attention/api.md

@@ -21,7 +21,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
-| placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
+| placement | [`Directions`](#directions) | `"bottom"` | Preferred placement relative to the trigger element. |
 | pointingAtDirection (JS only) | `pointingAtDirection() => void` | `-` | - |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -149,7 +149,7 @@ Preferred placement relative to the trigger element.
 Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
 
 - Type: [`Directions`](#directions)
-- Default: `'bottom'`
+- Default: `"bottom"`
 
 #### pointingAtDirection (JS only)
 

package/dist/docs/attention/attention.md

@@ -271,7 +271,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | highlight | `boolean` | `false` | Renders the component with highlight styling. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
 | no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
-| placement | [`Directions`](#directions) | `'bottom'` | Preferred placement relative to the trigger element. |
+| placement | [`Directions`](#directions) | `"bottom"` | Preferred placement relative to the trigger element. |
 | pointingAtDirection (JS only) | `pointingAtDirection() => void` | `-` | - |
 | popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
 | show | `boolean` | `false` | Controls whether the attention panel is visible. |
@@ -399,7 +399,7 @@ Preferred placement relative to the trigger element.
 Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
 
 - Type: [`Directions`](#directions)
-- Default: `'bottom'`
+- Default: `"bottom"`
 
 #### pointingAtDirection (JS only)
 

package/dist/docs/badge/api.md

@@ -6,8 +6,20 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| position | `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left' \| undefined` | `-` | Positions the badge in a corner of a parent element. |
-| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored' \| undefined` | `-` | Controls the badge color treatment. |
+| position | [`\| "top-left"
+		\| "top-right"
+		\| "bottom-right"
+		\| "bottom-left"
+		\| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined) | `-` | Positions the badge in a corner of a parent element. |
+| variant | [`\| "neutral"
+		\| "info"
+		\| "positive"
+		\| "warning"
+		\| "negative"
+		\| "disabled"
+		\| "price"
+		\| "sponsored"
+		\| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined) | `-` | Controls the badge color treatment. |
 
 ### Property Details
 
@@ -17,7 +29,11 @@ Positions the badge in a corner of a parent element.
 Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
 Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`
+- Type: [`| "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined)
 - Default: `-`
 
 #### variant
@@ -26,6 +42,36 @@ Controls the badge color treatment.
 If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`
+- Type: [`| "neutral"
+		| "info"
+		| "positive"
+		| "warning"
+		| "negative"
+		| "disabled"
+		| "price"
+		| "sponsored"
+		| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined)
 - Default: `-`
 
+### Types
+
+#### | "neutral"
+		| "info"
+		| "positive"
+		| "warning"
+		| "negative"
+		| "disabled"
+		| "price"
+		| "sponsored"
+		| undefined
+
+`'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`
+
+#### | "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined
+
+`'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`
+

package/dist/docs/badge/badge.md

@@ -186,8 +186,20 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| position | `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left' \| undefined` | `-` | Positions the badge in a corner of a parent element. |
-| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored' \| undefined` | `-` | Controls the badge color treatment. |
+| position | [`\| "top-left"
+		\| "top-right"
+		\| "bottom-right"
+		\| "bottom-left"
+		\| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined) | `-` | Positions the badge in a corner of a parent element. |
+| variant | [`\| "neutral"
+		\| "info"
+		\| "positive"
+		\| "warning"
+		\| "negative"
+		\| "disabled"
+		\| "price"
+		\| "sponsored"
+		\| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined) | `-` | Controls the badge color treatment. |
 
 ### Property Details
 
@@ -197,7 +209,11 @@ Positions the badge in a corner of a parent element.
 Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
 Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`
+- Type: [`| "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined`](#top-left-top-right-bottom-right-bottom-left-undefined)
 - Default: `-`
 
 #### variant
@@ -206,6 +222,36 @@ Controls the badge color treatment.
 If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`
+- Type: [`| "neutral"
+		| "info"
+		| "positive"
+		| "warning"
+		| "negative"
+		| "disabled"
+		| "price"
+		| "sponsored"
+		| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined)
 - Default: `-`
 
+### Types
+
+#### | "neutral"
+		| "info"
+		| "positive"
+		| "warning"
+		| "negative"
+		| "disabled"
+		| "price"
+		| "sponsored"
+		| undefined
+
+`'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`
+
+#### | "top-left"
+		| "top-right"
+		| "bottom-right"
+		| "bottom-left"
+		| undefined
+
+`'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`
+

package/dist/docs/box/api.md

@@ -10,7 +10,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | bordered | `boolean` | `false` | Shows the box as a bordered surface. |
 | info | `boolean` | `false` | Shows the box with information styling. |
 | neutral | `boolean` | `false` | Shows the box with neutral styling. |
-| role | `string` | `'region'` | ARIA role for the box wrapper. |
+| role | `string` | `"region"` | ARIA role for the box wrapper. |
 
 ### Property Details
 
@@ -52,5 +52,5 @@ ARIA role for the box wrapper.
 Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
 
 - Type: `string`
-- Default: `'region'`
+- Default: `"region"`
 

package/dist/docs/box/box.md

@@ -179,7 +179,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | bordered | `boolean` | `false` | Shows the box as a bordered surface. |
 | info | `boolean` | `false` | Shows the box with information styling. |
 | neutral | `boolean` | `false` | Shows the box with neutral styling. |
-| role | `string` | `'region'` | ARIA role for the box wrapper. |
+| role | `string` | `"region"` | ARIA role for the box wrapper. |
 
 ### Property Details
 
@@ -221,5 +221,5 @@ ARIA role for the box wrapper.
 Defaults to a role of `region`. Set `role="none"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.
 
 - Type: `string`
-- Default: `'region'`
+- Default: `"region"`
 

package/dist/docs/checkbox/api.md

@@ -18,7 +18,7 @@
 | 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 }` | - |
+| 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. |
@@ -140,7 +140,7 @@ A required checkbox is invalid until it is checked. For requiring at least one o
 
 
 - Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true }`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
 
 ##### validationMessage (JS only)
 

package/dist/docs/checkbox/checkbox.md

@@ -4,6 +4,180 @@
 
 Checkbox lets users select one or more options. Use it for independent yes/no choices, multi-select lists, and terms or consent confirmations.
 
+# Checkbox Styling
+
+The checkbox component provides a comprehensive styling API through CSS custom properties (tokens).
+
+## Styling API
+
+### Label Tokens
+
+Customize the appearance of the label text:
+
+```css
+--w-c-checkbox-label-font-size: var(--w-font-size-m);
+--w-c-checkbox-label-line-height: var(--w-line-height-m);
+```
+
+### Control Tokens
+
+Customize the checkbox control (the box itself):
+
+```css
+--w-c-checkbox-control-size: 2rem;
+--w-c-checkbox-gap: 8px;
+--w-c-checkbox-radius: 4px;
+--w-c-checkbox-border-width: 1px;
+```
+
+### Color Tokens - Default State
+
+```css
+--w-c-checkbox-bg: var(--w-s-color-background);
+--w-c-checkbox-border-color: var(--w-s-color-border-strong);
+--w-c-checkbox-icon-color: var(--w-s-color-icon-inverted);
+```
+
+### Color Tokens - Checked State
+
+```css
+--w-c-checkbox-bg-checked: var(--w-s-color-background-primary);
+--w-c-checkbox-border-color-checked: var(--w-s-color-border-primary);
+--w-c-checkbox-checked-icon: var(--w-icon-toggle-checked);
+```
+
+### Color Tokens - Invalid State
+
+```css
+--w-c-checkbox-border-color-invalid: var(--w-s-color-border-negative);
+--w-c-checkbox-bg-invalid-checked: var(--w-s-color-background-negative);
+```
+
+### Color Tokens - Disabled State
+
+```css
+--w-c-checkbox-bg-disabled: var(--w-s-color-background-disabled-subtle);
+--w-c-checkbox-border-color-disabled: var(--w-s-color-border-disabled);
+--w-c-checkbox-bg-disabled-checked: var(--w-s-color-background-disabled);
+```
+
+### Focus Tokens
+
+```css
+--w-c-checkbox-outline-width: 2px;
+--w-c-checkbox-outline-color: var(--w-s-color-border-focus);
+--w-c-checkbox-outline-offset: var(--w-outline-offset, 1px);
+```
+
+### Animation Tokens
+
+```css
+--w-c-checkbox-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+```
+
+## Parts
+
+For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
+
+- `::part(base)` - The wrapper `<label>` element
+- `::part(control)` - The visual checkbox control (the box)
+- `::part(input)` - The native `<input type="checkbox">` element
+- `::part(label)` - The label content wrapper
+
+```css
+w-checkbox::part(control) {
+  /* Custom styling for the checkbox box */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+w-checkbox::part(label) {
+  /* Custom styling for label text */
+  text-transform: uppercase;
+}
+```
+
+## Example Usage
+
+### Customizing Size
+
+```css
+w-checkbox {
+  --w-c-checkbox-control-size: 2.4rem;
+  --w-c-checkbox-gap: 12px;
+}
+```
+
+### Customizing Colors
+
+```css
+w-checkbox {
+  --w-c-checkbox-bg-checked: var(--w-s-color-background-success);
+  --w-c-checkbox-border-color-checked: var(--w-s-color-border-success);
+}
+```
+
+### Customizing Border Radius
+
+```css
+w-checkbox {
+  --w-c-checkbox-radius: 8px; /* More rounded */
+}
+
+/* Or fully rounded */
+w-checkbox {
+  --w-c-checkbox-radius: 50%;
+}
+```
+
+### Customizing Focus Outline
+
+```css
+w-checkbox {
+  --w-c-checkbox-outline-width: 3px;
+  --w-c-checkbox-outline-color: var(--w-s-color-border-info);
+  --w-c-checkbox-outline-offset: 2px;
+}
+```
+
+### Disabling Transitions
+
+```css
+w-checkbox {
+  --w-c-checkbox-transition: none;
+}
+```
+
+### Using Parts for Advanced Styling
+
+```css
+/* Add a subtle shadow to the checkbox */
+w-checkbox::part(control) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* Style the label with custom spacing */
+w-checkbox::part(label) {
+  padding-left: 4px;
+  font-weight: 500;
+}
+```
+
+## Label Content
+
+Unlike textfield/textarea components, checkbox labels accept rich HTML content via the default slot:
+
+```html
+<w-checkbox>
+  I agree to the <a href="/terms">terms and conditions</a>
+</w-checkbox>
+
+<w-checkbox>
+  <strong>Important:</strong> Check this box
+</w-checkbox>
+```
+
+Style the label content directly or use `::part(label)` to target the wrapper.
+
 ### `<w-checkbox>` API
 
 #### Properties
@@ -24,7 +198,7 @@ Checkbox lets users select one or more options. Use it for independent yes/no ch
 | 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 }` | - |
+| 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. |
@@ -146,7 +320,7 @@ A required checkbox is invalid until it is checked. For requiring at least one o
 
 
 - Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true }`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
 
 ##### validationMessage (JS only)
 

package/dist/docs/checkbox/styling.md

@@ -0,0 +1,173 @@
+# Checkbox Styling
+
+The checkbox component provides a comprehensive styling API through CSS custom properties (tokens).
+
+## Styling API
+
+### Label Tokens
+
+Customize the appearance of the label text:
+
+```css
+--w-c-checkbox-label-font-size: var(--w-font-size-m);
+--w-c-checkbox-label-line-height: var(--w-line-height-m);
+```
+
+### Control Tokens
+
+Customize the checkbox control (the box itself):
+
+```css
+--w-c-checkbox-control-size: 2rem;
+--w-c-checkbox-gap: 8px;
+--w-c-checkbox-radius: 4px;
+--w-c-checkbox-border-width: 1px;
+```
+
+### Color Tokens - Default State
+
+```css
+--w-c-checkbox-bg: var(--w-s-color-background);
+--w-c-checkbox-border-color: var(--w-s-color-border-strong);
+--w-c-checkbox-icon-color: var(--w-s-color-icon-inverted);
+```
+
+### Color Tokens - Checked State
+
+```css
+--w-c-checkbox-bg-checked: var(--w-s-color-background-primary);
+--w-c-checkbox-border-color-checked: var(--w-s-color-border-primary);
+--w-c-checkbox-checked-icon: var(--w-icon-toggle-checked);
+```
+
+### Color Tokens - Invalid State
+
+```css
+--w-c-checkbox-border-color-invalid: var(--w-s-color-border-negative);
+--w-c-checkbox-bg-invalid-checked: var(--w-s-color-background-negative);
+```
+
+### Color Tokens - Disabled State
+
+```css
+--w-c-checkbox-bg-disabled: var(--w-s-color-background-disabled-subtle);
+--w-c-checkbox-border-color-disabled: var(--w-s-color-border-disabled);
+--w-c-checkbox-bg-disabled-checked: var(--w-s-color-background-disabled);
+```
+
+### Focus Tokens
+
+```css
+--w-c-checkbox-outline-width: 2px;
+--w-c-checkbox-outline-color: var(--w-s-color-border-focus);
+--w-c-checkbox-outline-offset: var(--w-outline-offset, 1px);
+```
+
+### Animation Tokens
+
+```css
+--w-c-checkbox-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+```
+
+## Parts
+
+For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
+
+- `::part(base)` - The wrapper `<label>` element
+- `::part(control)` - The visual checkbox control (the box)
+- `::part(input)` - The native `<input type="checkbox">` element
+- `::part(label)` - The label content wrapper
+
+```css
+w-checkbox::part(control) {
+  /* Custom styling for the checkbox box */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+w-checkbox::part(label) {
+  /* Custom styling for label text */
+  text-transform: uppercase;
+}
+```
+
+## Example Usage
+
+### Customizing Size
+
+```css
+w-checkbox {
+  --w-c-checkbox-control-size: 2.4rem;
+  --w-c-checkbox-gap: 12px;
+}
+```
+
+### Customizing Colors
+
+```css
+w-checkbox {
+  --w-c-checkbox-bg-checked: var(--w-s-color-background-success);
+  --w-c-checkbox-border-color-checked: var(--w-s-color-border-success);
+}
+```
+
+### Customizing Border Radius
+
+```css
+w-checkbox {
+  --w-c-checkbox-radius: 8px; /* More rounded */
+}
+
+/* Or fully rounded */
+w-checkbox {
+  --w-c-checkbox-radius: 50%;
+}
+```
+
+### Customizing Focus Outline
+
+```css
+w-checkbox {
+  --w-c-checkbox-outline-width: 3px;
+  --w-c-checkbox-outline-color: var(--w-s-color-border-info);
+  --w-c-checkbox-outline-offset: 2px;
+}
+```
+
+### Disabling Transitions
+
+```css
+w-checkbox {
+  --w-c-checkbox-transition: none;
+}
+```
+
+### Using Parts for Advanced Styling
+
+```css
+/* Add a subtle shadow to the checkbox */
+w-checkbox::part(control) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* Style the label with custom spacing */
+w-checkbox::part(label) {
+  padding-left: 4px;
+  font-weight: 500;
+}
+```
+
+## Label Content
+
+Unlike textfield/textarea components, checkbox labels accept rich HTML content via the default slot:
+
+```html
+<w-checkbox>
+  I agree to the <a href="/terms">terms and conditions</a>
+</w-checkbox>
+
+<w-checkbox>
+  <strong>Important:</strong> Check this box
+</w-checkbox>
+```
+
+Style the label content directly or use `::part(label)` to target the wrapper.