@warp-ds/elements 2.10.0-next.18 → 2.10.0-next.19

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -128,11 +128,72 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 
 ### Breadcrumbs
 
-The styling API for the Breadcrumbs component is under construction.
+The breadcrumbs components support styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+`w-breadcrumbs` does not expose component-specific tokens. Set `w-breadcrumb-item` tokens on `w-breadcrumbs` or another ancestor to style all items in a breadcrumb trail.
+
+```css
+w-breadcrumbs {
+	--w-c-breadcrumb-item-link-color: var(--w-s-color-text-link);
+	--w-c-breadcrumb-item-separator-spacing: 1.2rem;
+}
+```
 
 ### Breadcrumb Item
 
-The w-breadcrumb-item component supports styling through **parts**.
+The `w-breadcrumb-item` component supports styling through **component tokens** and **parts**.
+
+#### Component tokens
+
+Set these on `w-breadcrumb-item` to override one item, or on `w-breadcrumbs` to let the values inherit into all item children.
+
+```css
+w-breadcrumb-item {
+	--w-c-breadcrumb-item-link-color-hover: var(--w-s-color-text-link-hover);
+	--w-c-breadcrumb-item-font-weight: 700;
+}
+```
+
+##### Layout and typography
+
+| Token                               | Purpose                                 | Default             |
+| ----------------------------------- | --------------------------------------- | ------------------- |
+| `--w-c-breadcrumb-item-font-size`   | Font size for the label and separator   | inherited font size |
+| `--w-c-breadcrumb-item-line-height` | Line height for the label and separator | `1.5`               |
+| `--w-c-breadcrumb-item-font-weight` | Font weight for the label and separator | `400`               |
+| `--w-c-breadcrumb-item-padding-x`   | Inline padding for linked items         | `0`                 |
+| `--w-c-breadcrumb-item-padding-y`   | Block padding for linked items          | `0`                 |
+
+##### Link color
+
+| Token                                     | Purpose                                    | Default                      |
+| ----------------------------------------- | ------------------------------------------ | ---------------------------- |
+| `--w-c-breadcrumb-item-link-color`        | Color for linked items                     | `var(--w-s-color-text-link)` |
+| `--w-c-breadcrumb-item-link-color-hover`  | Color for linked items on hover            | link color                   |
+| `--w-c-breadcrumb-item-link-color-active` | Color for linked items in the active state | link color                   |
+
+##### Text color
+
+| Token                              | Purpose                    | Default                 |
+| ---------------------------------- | -------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-text-color` | Color for non-linked items | `var(--w-s-color-text)` |
+
+##### Separator
+
+| Token                                     | Purpose                                     | Default                 |
+| ----------------------------------------- | ------------------------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-separator-color`   | Color for the separator                     | `var(--w-s-color-icon)` |
+| `--w-c-breadcrumb-item-separator-spacing` | Inline margin on each side of the separator | `0.8rem`                |
+
+The separator uses `--w-c-breadcrumb-item-font-size`, `--w-c-breadcrumb-item-line-height`, and `--w-c-breadcrumb-item-font-weight`.
+
+##### Focus
+
+| Token                                  | Purpose                               | Default              |
+| -------------------------------------- | ------------------------------------- | -------------------- |
+| `--w-c-breadcrumb-item-outline-width`  | Focus outline width for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-color`  | Focus outline color for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-offset` | Focus outline offset for linked items | native focus outline |
 
 #### Parts
 
@@ -146,11 +207,11 @@ Example:
 
 ```css
 w-breadcrumb-item::part(link) {
-  text-decoration-thickness: 2px;
+	text-decoration-thickness: 2px;
 }
 
 w-breadcrumb-item::part(separator) {
-  margin-inline: 1.2rem;
+	margin-inline: 1.2rem;
 }
 ```
 
@@ -158,6 +219,8 @@ w-breadcrumb-item::part(separator) {
 
 - `separator` is not rendered when `current-page` is set.
 - Use `link` for linked breadcrumb items and `text` for non-linked breadcrumb items.
+- Link color, padding, and focus tokens apply only when `href` is set.
+- Focus tokens do not make non-linked breadcrumb items keyboard-focusable.
 
 ## `<w-breadcrumbs>` API
 

package/dist/docs/breadcrumbs/styling.md

@@ -2,11 +2,72 @@
 
 ### Breadcrumbs
 
-The styling API for the Breadcrumbs component is under construction.
+The breadcrumbs components support styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+`w-breadcrumbs` does not expose component-specific tokens. Set `w-breadcrumb-item` tokens on `w-breadcrumbs` or another ancestor to style all items in a breadcrumb trail.
+
+```css
+w-breadcrumbs {
+	--w-c-breadcrumb-item-link-color: var(--w-s-color-text-link);
+	--w-c-breadcrumb-item-separator-spacing: 1.2rem;
+}
+```
 
 ### Breadcrumb Item
 
-The w-breadcrumb-item component supports styling through **parts**.
+The `w-breadcrumb-item` component supports styling through **component tokens** and **parts**.
+
+#### Component tokens
+
+Set these on `w-breadcrumb-item` to override one item, or on `w-breadcrumbs` to let the values inherit into all item children.
+
+```css
+w-breadcrumb-item {
+	--w-c-breadcrumb-item-link-color-hover: var(--w-s-color-text-link-hover);
+	--w-c-breadcrumb-item-font-weight: 700;
+}
+```
+
+##### Layout and typography
+
+| Token                               | Purpose                                 | Default             |
+| ----------------------------------- | --------------------------------------- | ------------------- |
+| `--w-c-breadcrumb-item-font-size`   | Font size for the label and separator   | inherited font size |
+| `--w-c-breadcrumb-item-line-height` | Line height for the label and separator | `1.5`               |
+| `--w-c-breadcrumb-item-font-weight` | Font weight for the label and separator | `400`               |
+| `--w-c-breadcrumb-item-padding-x`   | Inline padding for linked items         | `0`                 |
+| `--w-c-breadcrumb-item-padding-y`   | Block padding for linked items          | `0`                 |
+
+##### Link color
+
+| Token                                     | Purpose                                    | Default                      |
+| ----------------------------------------- | ------------------------------------------ | ---------------------------- |
+| `--w-c-breadcrumb-item-link-color`        | Color for linked items                     | `var(--w-s-color-text-link)` |
+| `--w-c-breadcrumb-item-link-color-hover`  | Color for linked items on hover            | link color                   |
+| `--w-c-breadcrumb-item-link-color-active` | Color for linked items in the active state | link color                   |
+
+##### Text color
+
+| Token                              | Purpose                    | Default                 |
+| ---------------------------------- | -------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-text-color` | Color for non-linked items | `var(--w-s-color-text)` |
+
+##### Separator
+
+| Token                                     | Purpose                                     | Default                 |
+| ----------------------------------------- | ------------------------------------------- | ----------------------- |
+| `--w-c-breadcrumb-item-separator-color`   | Color for the separator                     | `var(--w-s-color-icon)` |
+| `--w-c-breadcrumb-item-separator-spacing` | Inline margin on each side of the separator | `0.8rem`                |
+
+The separator uses `--w-c-breadcrumb-item-font-size`, `--w-c-breadcrumb-item-line-height`, and `--w-c-breadcrumb-item-font-weight`.
+
+##### Focus
+
+| Token                                  | Purpose                               | Default              |
+| -------------------------------------- | ------------------------------------- | -------------------- |
+| `--w-c-breadcrumb-item-outline-width`  | Focus outline width for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-color`  | Focus outline color for linked items  | native focus outline |
+| `--w-c-breadcrumb-item-outline-offset` | Focus outline offset for linked items | native focus outline |
 
 #### Parts
 
@@ -20,11 +81,11 @@ Example:
 
 ```css
 w-breadcrumb-item::part(link) {
-  text-decoration-thickness: 2px;
+	text-decoration-thickness: 2px;
 }
 
 w-breadcrumb-item::part(separator) {
-  margin-inline: 1.2rem;
+	margin-inline: 1.2rem;
 }
 ```
 
@@ -32,3 +93,5 @@ w-breadcrumb-item::part(separator) {
 
 - `separator` is not rendered when `current-page` is set.
 - Use `link` for linked breadcrumb items and `text` for non-linked breadcrumb items.
+- Link color, padding, and focus tokens apply only when `href` is set.
+- Focus tokens do not make non-linked breadcrumb items keyboard-focusable.

package/dist/docs/index.md

@@ -9,7 +9,7 @@ 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) |

package/dist/docs/select/select.md

@@ -160,6 +160,97 @@ The `readonly` boolean attribute makes the selection immutable. Unlike disabled
 
 ## Styling API
 
+This section documents the supported styling hooks for `<w-select>`.
+
+Use these hooks to customize appearance without relying on internal structure or selectors.
+
+Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
+
+- Prefer **component tokens** for size, spacing, and state styling.
+- Use **parts** only for small, local tweaks.
+- Avoid relying on internal class names or selectors.
+
+### Parts
+
+The select exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
+
+| Part | Targets | Typical use |
+|---|---|---|
+| `input` | native select element | minor typography or spacing tweaks |
+
+Example:
+
+```css
+w-select::part(input) {
+  letter-spacing: 0.5px;
+}
+```
+
+Parts are intended as an **escape hatch**.
+Prefer component tokens for anything state‑ or size‑related.
+
+
+### Component tokens
+
+Component tokens (`--w-c-input-*`) act as inputs to the select styling.
+They can be set directly on the component or inherited from a parent container.
+
+These tokens are **shared across textfield, textarea, and select** for consistent form styling.
+
+```css
+.form-section {
+  --w-c-input-label-font-weight: 600;
+  --w-c-input-help-text-color: var(--w-s-color-text);
+}
+```
+
+Defaults are defined internally; setting a token is always optional.
+
+
+#### Label tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
+| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
+| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
+| `--w-c-input-label-font-weight` | label font weight | `700` |
+| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
+| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
+| `--w-c-input-label-display` | label display mode | `block` |
+
+
+#### Optional indicator tokens
+
+When `optional` attribute is set, these tokens control the "(optional)" text styling:
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
+| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
+| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
+| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
+| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
+
+
+#### Help text tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
+| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
+| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
+| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
+| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
+| `--w-c-input-help-text-display` | help text display mode | `block` |
+
+
+## Implementation notes
+
+### Shared token system
+
+Select shares its label, optional indicator, and help text tokens with `w-textfield` and `w-textarea`. This ensures consistent form styling across all text input components.
+
 ## `<w-select>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/select/styling.md

@@ -1 +1,92 @@
 ## Styling API
+
+This section documents the supported styling hooks for `<w-select>`.
+
+Use these hooks to customize appearance without relying on internal structure or selectors.
+
+Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
+
+- Prefer **component tokens** for size, spacing, and state styling.
+- Use **parts** only for small, local tweaks.
+- Avoid relying on internal class names or selectors.
+
+### Parts
+
+The select exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
+
+| Part | Targets | Typical use |
+|---|---|---|
+| `input` | native select element | minor typography or spacing tweaks |
+
+Example:
+
+```css
+w-select::part(input) {
+  letter-spacing: 0.5px;
+}
+```
+
+Parts are intended as an **escape hatch**.
+Prefer component tokens for anything state‑ or size‑related.
+
+
+### Component tokens
+
+Component tokens (`--w-c-input-*`) act as inputs to the select styling.
+They can be set directly on the component or inherited from a parent container.
+
+These tokens are **shared across textfield, textarea, and select** for consistent form styling.
+
+```css
+.form-section {
+  --w-c-input-label-font-weight: 600;
+  --w-c-input-help-text-color: var(--w-s-color-text);
+}
+```
+
+Defaults are defined internally; setting a token is always optional.
+
+
+#### Label tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
+| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
+| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
+| `--w-c-input-label-font-weight` | label font weight | `700` |
+| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
+| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
+| `--w-c-input-label-display` | label display mode | `block` |
+
+
+#### Optional indicator tokens
+
+When `optional` attribute is set, these tokens control the "(optional)" text styling:
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
+| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
+| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
+| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
+| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
+
+
+#### Help text tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
+| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
+| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
+| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
+| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
+| `--w-c-input-help-text-display` | help text display mode | `block` |
+
+
+## Implementation notes
+
+### Shared token system
+
+Select shares its label, optional indicator, and help text tokens with `w-textfield` and `w-textarea`. This ensures consistent form styling across all text input components.

package/dist/docs/textarea/styling.md

@@ -1 +1,92 @@
 ## Styling API
+
+This section documents the supported styling hooks for `<w-textarea>`.
+
+Use these hooks to customize appearance without relying on internal structure or selectors.
+
+Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
+
+- Prefer **component tokens** for size, spacing, and state styling.
+- Use **parts** only for small, local tweaks.
+- Avoid relying on internal class names or selectors.
+
+### Parts
+
+The textarea exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
+
+| Part | Targets | Typical use |
+|---|---|---|
+| `input` | native textarea element | minor typography or spacing tweaks |
+
+Example:
+
+```css
+w-textarea::part(input) {
+  letter-spacing: 0.5px;
+}
+```
+
+Parts are intended as an **escape hatch**.
+Prefer component tokens for anything state‑ or size‑related.
+
+
+### Component tokens
+
+Component tokens (`--w-c-input-*`) act as inputs to the textarea styling.
+They can be set directly on the component or inherited from a parent container.
+
+These tokens are **shared across textfield, textarea, and select** for consistent form styling.
+
+```css
+.form-section {
+  --w-c-input-label-font-weight: 600;
+  --w-c-input-help-text-color: var(--w-s-color-text);
+}
+```
+
+Defaults are defined internally; setting a token is always optional.
+
+
+#### Label tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
+| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
+| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
+| `--w-c-input-label-font-weight` | label font weight | `700` |
+| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
+| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
+| `--w-c-input-label-display` | label display mode | `block` |
+
+
+#### Optional indicator tokens
+
+When `optional` attribute is set, these tokens control the "(optional)" text styling:
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
+| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
+| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
+| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
+| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
+
+
+#### Help text tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
+| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
+| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
+| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
+| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
+| `--w-c-input-help-text-display` | help text display mode | `block` |
+
+
+## Implementation notes
+
+### Shared token system
+
+Textarea shares its label, optional indicator, and help text tokens with `w-textfield` and `w-select`. This ensures consistent form styling across all text input components.

package/dist/docs/textarea/textarea.md

@@ -113,6 +113,97 @@ Makes the textarea content immutable while remaining focusable. The contents can
 
 ## Styling API
 
+This section documents the supported styling hooks for `<w-textarea>`.
+
+Use these hooks to customize appearance without relying on internal structure or selectors.
+
+Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
+
+- Prefer **component tokens** for size, spacing, and state styling.
+- Use **parts** only for small, local tweaks.
+- Avoid relying on internal class names or selectors.
+
+### Parts
+
+The textarea exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
+
+| Part | Targets | Typical use |
+|---|---|---|
+| `input` | native textarea element | minor typography or spacing tweaks |
+
+Example:
+
+```css
+w-textarea::part(input) {
+  letter-spacing: 0.5px;
+}
+```
+
+Parts are intended as an **escape hatch**.
+Prefer component tokens for anything state‑ or size‑related.
+
+
+### Component tokens
+
+Component tokens (`--w-c-input-*`) act as inputs to the textarea styling.
+They can be set directly on the component or inherited from a parent container.
+
+These tokens are **shared across textfield, textarea, and select** for consistent form styling.
+
+```css
+.form-section {
+  --w-c-input-label-font-weight: 600;
+  --w-c-input-help-text-color: var(--w-s-color-text);
+}
+```
+
+Defaults are defined internally; setting a token is always optional.
+
+
+#### Label tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
+| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
+| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
+| `--w-c-input-label-font-weight` | label font weight | `700` |
+| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
+| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
+| `--w-c-input-label-display` | label display mode | `block` |
+
+
+#### Optional indicator tokens
+
+When `optional` attribute is set, these tokens control the "(optional)" text styling:
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
+| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
+| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
+| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
+| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
+
+
+#### Help text tokens
+
+| Token | Purpose | Default |
+|---|---|---|
+| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
+| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
+| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
+| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
+| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
+| `--w-c-input-help-text-display` | help text display mode | `block` |
+
+
+## Implementation notes
+
+### Shared token system
+
+Textarea shares its label, optional indicator, and help text tokens with `w-textfield` and `w-select`. This ensures consistent form styling across all text input components.
+
 ## `<w-textarea>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/textfield/api.md

@@ -20,6 +20,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | min-length | `number \| undefined` | `-` | **Deprecated**: Use the native `minlength` attribute |
 | minlength | `number \| undefined` | `-` | For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required. |
 | name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. |
+| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
 | pattern | `string \| undefined` | `-` | Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern) |
 | placeholder | `string \| undefined` | `-` | Shown in the textfield when it doesn't have a value |
 | prefixSlotChange (JS only) | `prefixSlotChange() => void` | `-` | - |
@@ -145,6 +146,13 @@ The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/
 - Type: `string | undefined`
 - Default: `-`
 
+#### optional
+
+Whether to show the optional indicator after the label.
+
+- Type: `boolean`
+- Default: `false`
+
 #### pattern
 
 Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)