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

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -5,8 +5,6 @@
 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.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
-
 ## Usage
 
 Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.
@@ -15,13 +13,13 @@ Use `w-breadcrumbs` near the top of a page or section, before the main page head
 
 ### Basic Breadcrumbs
 
-Use links for parent pages and mark the current page with `aria-current="page"`.
+Use w-breadcrumb-item components with an href for parent pages and mark the current page with the current-page attribute.
 
 ```html
 <w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <span aria-current="page">Oslo</span>
+  <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
@@ -29,13 +27,13 @@ Use links for parent pages and mark the current page with `aria-current="page"`.
 
 The current page should be the last breadcrumb item.
 
-Use a `span` when the current page should not be clickable:
+By default the current-page will not be presented as a link, setting href will change it to a link.
 
 ```html
 <w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <span aria-current="page">Oslo</span>
+  <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes/12345612" current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
@@ -55,33 +53,23 @@ The component has a localized default accessible label. Use `aria-label` when th
 
 ```html
 <w-breadcrumbs aria-label="Product category path">
-  <a href="/marketplace">Marketplace</a>
-  <a href="/marketplace/furniture">Furniture</a>
-  <span aria-current="page">Sofas</span>
+  <w-breadcrumb-item href="/marketplace">Marketplace</w-breadcrumb-item>
+  <w-breadcrumb-item href="/marketplace/furniture">Furniture</w-breadcrumb-item>
+  <w-breadcrumb-item href="/marketplace/furniture/1234566" current-page>Sofas</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
 ### Mark The Current Page
 
-The last breadcrumb item should represent the current page and include `aria-current="page"`.
-
-Use a non-link element for the current page when it should not be clickable:
-
-```html
-<w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <span aria-current="page">Oslo</span>
-</w-breadcrumbs>
-```
+The last breadcrumb item should represent the current page and include the current-page attribute which in turn ensures correct accessibility semantics are used.
 
-If the current page remains a link, keep `aria-current="page"` on that link:
+Omit an href attribute for the current page when it should not be clickable:
 
 ```html
 <w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <a href="/real-estate/homes/oslo" aria-current="page">Oslo</a>
+  <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
@@ -98,38 +86,142 @@ Breadcrumbs should support orientation within the site hierarchy. They should no
 ### Basic
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
-    <a href="#/real-estate">Real estate</a>
-    <a href="#/real-estate/homes">Homes for sale</a>
-    <span aria-current="page">Oslo</span>
+    <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+    <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
+
 </elements-example>
 
 ### Custom Accessible Label
 
 <elements-example>
+
 ```html
   <w-breadcrumbs aria-label="Product category path">
-    <a href="#/marketplace">Marketplace</a>
-    <a href="#/marketplace/furniture">Furniture</a>
-    <span aria-current="page">Sofas</span>
+    <w-breadcrumb-item href="#/marketplace">Marketplace</w-breadcrumb-item>
+    <w-breadcrumb-item href="#/marketplace/furniture">Furniture</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Sofas</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
+
 </elements-example>
 
 ### Short Path
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
-    <a href="#/help">Help</a>
-    <span aria-current="page">Contact us</span>
+    <w-breadcrumb-item href="#/help">Help</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Contact us</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
+
 </elements-example>
 
+## Styling API
+
+### Breadcrumbs
+
+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 **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
+
+Use `::part(...)` from outside the component.
+
+- `link` - the link element rendered when `href` is set.
+- `text` - the text element rendered when `href` is omitted.
+- `separator` - the separator rendered after non-current items.
+
+Example:
+
+```css
+w-breadcrumb-item::part(link) {
+	text-decoration-thickness: 2px;
+}
+
+w-breadcrumb-item::part(separator) {
+	margin-inline: 1.2rem;
+}
+```
+
+#### Notes
+
+- `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
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

package/dist/docs/breadcrumbs/examples.md

@@ -3,34 +3,40 @@
 ### Basic
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
-    <a href="#/real-estate">Real estate</a>
-    <a href="#/real-estate/homes">Homes for sale</a>
-    <span aria-current="page">Oslo</span>
+    <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+    <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
+
 </elements-example>
 
 ### Custom Accessible Label
 
 <elements-example>
+
 ```html
   <w-breadcrumbs aria-label="Product category path">
-    <a href="#/marketplace">Marketplace</a>
-    <a href="#/marketplace/furniture">Furniture</a>
-    <span aria-current="page">Sofas</span>
+    <w-breadcrumb-item href="#/marketplace">Marketplace</w-breadcrumb-item>
+    <w-breadcrumb-item href="#/marketplace/furniture">Furniture</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Sofas</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
+
 </elements-example>
 
 ### Short Path
 
 <elements-example>
+
 ```html
   <w-breadcrumbs>
-    <a href="#/help">Help</a>
-    <span aria-current="page">Contact us</span>
+    <w-breadcrumb-item href="#/help">Help</w-breadcrumb-item>
+    <w-breadcrumb-item current-page>Contact us</w-breadcrumb-item>
   </w-breadcrumbs>
 ```
-</elements-example>
+
+</elements-example>

package/dist/docs/breadcrumbs/styling.md

@@ -0,0 +1,97 @@
+## Styling API
+
+### Breadcrumbs
+
+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 **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
+
+Use `::part(...)` from outside the component.
+
+- `link` - the link element rendered when `href` is set.
+- `text` - the text element rendered when `href` is omitted.
+- `separator` - the separator rendered after non-current items.
+
+Example:
+
+```css
+w-breadcrumb-item::part(link) {
+	text-decoration-thickness: 2px;
+}
+
+w-breadcrumb-item::part(separator) {
+	margin-inline: 1.2rem;
+}
+```
+
+#### Notes
+
+- `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/breadcrumbs/usage.md

@@ -6,13 +6,13 @@ Use `w-breadcrumbs` near the top of a page or section, before the main page head
 
 ### Basic Breadcrumbs
 
-Use links for parent pages and mark the current page with `aria-current="page"`.
+Use w-breadcrumb-item components with an href for parent pages and mark the current page with the current-page attribute.
 
 ```html
 <w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <span aria-current="page">Oslo</span>
+  <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 
@@ -20,13 +20,13 @@ Use links for parent pages and mark the current page with `aria-current="page"`.
 
 The current page should be the last breadcrumb item.
 
-Use a `span` when the current page should not be clickable:
+By default the current-page will not be presented as a link, setting href will change it to a link.
 
 ```html
 <w-breadcrumbs aria-label="You are here">
-  <a href="/real-estate">Real estate</a>
-  <a href="/real-estate/homes">Homes for sale</a>
-  <span aria-current="page">Oslo</span>
+  <w-breadcrumb-item href="/real-estate">Real estate</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes">Homes for sale</w-breadcrumb-item>
+  <w-breadcrumb-item href="/real-estate/homes/12345612" current-page>Oslo</w-breadcrumb-item>
 </w-breadcrumbs>
 ```
 

package/dist/docs/button/api.md

@@ -7,23 +7,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
 
@@ -42,21 +43,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
@@ -80,7 +81,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
@@ -104,7 +105,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
@@ -122,7 +123,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)
@@ -146,7 +154,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
@@ -154,7 +162,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
@@ -162,7 +170,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
@@ -170,16 +178,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`