@warp-ds/elements 2.10.0 → 2.11.0-next.1

package/dist/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A single-line input component used for entering and editing textual or numeric data.",
+          "description": "A single-line input component used for entering and editing textual or numeric data.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)",
           "name": "WarpTextField",
           "slots": [
             {
@@ -16,7 +16,7 @@
               "name": "suffix"
             },
             {
-              "description": "Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.",
+              "description": "Use with `<w-affix>` to include a prefix, for example a search icon.",
               "name": "prefix"
             }
           ],
@@ -555,7 +555,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "[Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)",
           "name": "WarpIcon",
           "members": [
             {
@@ -712,7 +712,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)",
           "name": "WarpAffix",
           "members": [
             {
@@ -866,7 +866,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
+          "description": "Alert is an inline component used for displaying different types of messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)",
           "name": "WarpAlert",
           "members": [
             {
@@ -981,7 +981,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)",
+          "description": "Link component to use when creating links that look like buttons.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)",
           "name": "WarpLink",
           "members": [
             {
@@ -1180,7 +1180,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Performs an action or renders a link with button styling.\nUse button variants to match action priority, risk, and context.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)",
+          "description": "Performs an action or renders a link with button styling.\n\nUse button variants to match action priority, risk, and context.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)",
           "name": "WarpButton",
           "members": [
             {
@@ -1627,7 +1627,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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.\n\nThe 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.\n\nNote: 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.",
+          "description": "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.\n\nAttention 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.\n\nThe 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.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)",
           "name": "WarpAttention",
           "members": [
             {
@@ -2084,7 +2084,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)",
+          "description": "Box is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)",
           "name": "WarpBox",
           "members": [
             {
@@ -2231,7 +2231,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Shows the navigation structure for the current page.\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
+          "description": "Shows the navigation structure for the current page.\n\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)",
           "name": "WarpBreadcrumbs",
           "members": [
             {
@@ -2312,7 +2312,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)",
           "name": "WarpBreadcrumbItem",
           "slots": [
             {
@@ -2401,7 +2401,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)",
+          "description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)",
           "name": "WarpCard",
           "members": [
             {
@@ -2435,6 +2435,14 @@
               "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.",
               "attribute": "clickable"
             },
+            {
+              "kind": "field",
+              "name": "buttonText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "keypressed",
@@ -2449,10 +2457,6 @@
               "type": {
                 "text": "keypressed(e: KeyboardEvent) => void"
               }
-            },
-            {
-              "kind": "field",
-              "name": "buttonText"
             }
           ],
           "attributes": [
@@ -2519,7 +2523,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)",
           "name": "WarpCheckbox",
           "members": [
             {
@@ -2779,14 +2783,6 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "name",
@@ -2910,7 +2906,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow users to select multiple options from a list of choices.\n\nUse with `w-checkbox`.\n\n## Architecture Note\nThis component uses a <div> wrapper instead of the more semantic <fieldset> element.\nNote that w-radio-group uses <fieldset>, which provides better accessibility and follows\nHTML best practices. This inconsistency exists for historical reasons and may be addressed\nin a future major version to align both on the more semantic approach.\n\nTODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing\nbackwards compatibility implications (CSS selectors, etc.).",
+          "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)",
           "name": "WarpCheckboxGroup",
           "members": [
             {
@@ -3344,7 +3340,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)",
+          "description": "A combobox element for text input with selectable options.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)",
           "name": "WarpCombobox",
           "members": [
             {
@@ -3962,7 +3958,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)",
+          "description": "A date picker allows the user to select a specific calendar date.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)",
           "name": "WarpDatepicker",
           "members": [
             {
@@ -4364,7 +4360,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Expandable is a layout component used for creating expandable content areas on a page.",
+          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)",
           "name": "WarpExpandable",
           "slots": [
             {
@@ -4647,7 +4643,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Modals (or dialogs) display important information that users need to acknowledge.",
+          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)",
           "name": "WarpModal",
           "cssProperties": [
             {
@@ -4936,7 +4932,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The footer section of a modal, typically where you place actions.",
+          "description": "The footer section of a modal, typically where you place actions.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)",
           "name": "WarpModalFooter",
           "cssProperties": [
             {
@@ -5014,7 +5010,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The header section of a modal, typically where you place the title and a close button.",
+          "description": "The header section of a modal, typically where you place the title and a close button.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)",
           "name": "WarpModalHeader",
           "cssProperties": [
             {
@@ -5216,7 +5212,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.",
+          "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)",
           "name": "WarpPageIndicator",
           "members": [
             {
@@ -5317,7 +5313,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.",
+          "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)",
           "name": "WarpPagination",
           "members": [
             {
@@ -5458,7 +5454,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.",
+          "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)",
           "name": "WarpPill",
           "members": [
             {
@@ -5659,7 +5655,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)",
           "name": "WarpRadio",
           "members": [
             {
@@ -5993,7 +5989,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)",
           "name": "WarpRadioGroup",
           "slots": [
             {
@@ -6001,7 +5997,7 @@
               "name": "label"
             },
             {
-              "description": "Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - 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 also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).",
+              "description": "Alternative to the `help-text` attribute should you need custom HTML.",
               "name": "help-text"
             }
           ],
@@ -6482,7 +6478,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A dropdown component for selecting a single value.",
+          "description": "A dropdown component for selecting a single value.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)",
           "name": "WarpSelect",
           "members": [
             {
@@ -6743,6 +6739,19 @@
               "name": "#helpId",
               "privacy": "private",
               "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -7220,7 +7229,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.",
+          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)",
           "name": "WarpSlider",
           "slots": [
             {
@@ -7700,7 +7709,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.",
+          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)",
           "name": "WarpSnackbarItem",
           "cssProperties": [
             {
@@ -7973,7 +7982,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.",
+          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)",
           "name": "WarpSnackbar",
           "cssProperties": [
             {
@@ -8072,7 +8081,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Individual step component that shows a single step in a process",
+          "description": "Individual step component that shows a single step in a process.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)",
           "name": "WarpStep",
           "members": [
             {
@@ -8196,7 +8205,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.",
+          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)",
           "name": "WarpStepIndicator",
           "members": [
             {
@@ -8277,7 +8286,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The Switch component allows users to toggle between two states.",
+          "description": "The Switch component allows users to toggle between two states.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)",
           "name": "WarpSwitch",
           "members": [
             {
@@ -8430,7 +8439,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Individual tab component used within w-tabs container.",
+          "description": "Individual tab component used within w-tabs container.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)",
           "name": "WarpTab",
           "members": [
             {
@@ -8560,7 +8569,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.",
+          "description": "Tab panel component that holds content for individual tabs.\n\nEach tab panel should have a name that matches a corresponding tab.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)",
           "name": "WarpTabPanel",
           "members": [
             {
@@ -8644,7 +8653,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tabs are used to organize content by grouping similar information on the same page.",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)",
           "name": "WarpTabs",
           "members": [
             {
@@ -8755,7 +8764,7 @@
               "type": {
                 "text": "WarpTabsChangeEvent"
               },
-              "description": "Includes `details.panelId` with the now active tab's ID"
+              "description": "Includes `details.panelId` with the now active tab panel's ID"
             }
           ],
           "attributes": [
@@ -8804,7 +8813,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\nThe component automatically handles:\n - Form integration\n - Auto-resizing based on content and row constraints\n - Built-in validation with customizable error messages\n - Accessibility attributes and labeling",
+          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)",
           "name": "WarpTextarea",
           "members": [
             {

package/dist/docs/affix/affix.md

@@ -4,15 +4,7 @@
 
 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.
+[Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
 
 ## Usage
 

package/dist/docs/alert/alert.md

@@ -4,7 +4,7 @@
 
 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.
+[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
 
 ## Usage
 

package/dist/docs/attention/attention.md

@@ -2,11 +2,13 @@
 
 ## Description
 
+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 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.
+[Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
 
 ## Usage
 

package/dist/docs/box/box.md

@@ -4,6 +4,8 @@
 
 Box is a layout component used for separating content areas on a page.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
+
 ## Usage
 
 Box is a layout component for visually separating a section of content from the surrounding page.

package/dist/docs/breadcrumb-item/breadcrumb-item.md

@@ -5,6 +5,8 @@
 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.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
+
 ### `<w-breadcrumb-item>` API
 
 #### Properties

package/dist/docs/breadcrumbs/breadcrumbs.md

@@ -3,8 +3,11 @@
 ## Description
 
 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.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
+
 ## Usage
 
 Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.

package/dist/docs/button/button.md

@@ -3,8 +3,11 @@
 ## Description
 
 Performs an action or renders a link with button styling.
+
 Use button variants to match action priority, risk, and context.
 
+[Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
+
 ## 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.

package/dist/docs/card/api.md

@@ -6,7 +6,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| 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` | `-` | - |
@@ -14,13 +13,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 ### Property Details
 
-#### buttonText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### clickable
 
 Whether the whole card is interactive.

package/dist/docs/card/card.md

@@ -2,13 +2,17 @@
 
 ## Description
 
-Card is a layout component used for separating content areas on a page.
+Card is a layout component used for grouping interactive content areas on a page.
+
+[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
 
 ## Usage
 
-Card is a layout component for visually grouping related content as one item.
+Card is a layout component used for grouping interactive content areas on a page.
+
+Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object.
 
-Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object. The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
+The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
 
 ### Basic Card
 
@@ -237,6 +241,57 @@ Use a button for an action on the current page:
 
 ## Styling API
 
+Card supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+- `base` - the root element of the card
+- `border` - the inset border of the card
+
+```css
+w-card::part(base) {
+	padding: 48px;
+	background: rebeccapurple;
+	color: cyan;
+}
+w-card::part(border) {
+	border-color: magenta;
+	border-width: 8px;
+}
+```
+
+### Component tokens
+
+Set these on `<w-card>` to override visuals.
+
+```css
+w-card {
+    --w-c-card-border-radius: 0px;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-card-border-radius`
+- `--w-c-card-border-width`
+- `--w-c-card-border-color`
+- `--w-c-card-border-color-active`
+- `--w-c-card-border-color-hover`
+
+##### Background
+
+- `--w-c-card-bg`
+- `--w-c-card-bg-active`
+- `--w-c-card-bg-hover`
+
+##### Shadow
+
+- `--w-c-card-box-shadow`
+- `--w-c-card-box-shadow-active`
+- `--w-c-card-box-shadow-hover`
+
 ## `<w-card>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -245,7 +300,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| 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` | `-` | - |
@@ -253,13 +307,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 ### Property Details
 
-#### buttonText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### clickable
 
 Whether the whole card is interactive.