dap-design-system 0.62.4 → 0.63.1

package/dist/manifest/vscode.html-custom-data.json

@@ -2,36 +2,9 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "dap-ds-accordion-group",
-      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
-      "attributes": [
-        {
-          "name": "autoClose",
-          "description": "Whether to close other accordions when one is opened.",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The variant of the accordion",
-          "values": [
-            { "name": "default" },
-            { "name": "collapsed" },
-            { "name": "clean" },
-            { "name": "clean-collapsed" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/accordion-group"
-        }
-      ]
-    },
     {
       "name": "dap-ds-accordion",
-      "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
+      "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.\n- **heading-text** - The text of the heading.",
       "attributes": [],
       "references": [
         {
@@ -42,7 +15,7 @@
     },
     {
       "name": "dap-ds-anchor-heading",
-      "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
+      "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.\n- **link-text** - Alias of the text part.",
       "attributes": [
         {
           "name": "variant",
@@ -62,6 +35,76 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-avatar",
+      "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
+      "attributes": [
+        {
+          "name": "shape",
+          "description": "The shape of the avatar",
+          "values": [
+            { "name": "circle" },
+            { "name": "rounded" },
+            { "name": "square" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The variant type of the avatar",
+          "values": [
+            { "name": "image" },
+            { "name": "initials" },
+            { "name": "icon" }
+          ]
+        },
+        {
+          "name": "src",
+          "description": "The source of the avatar image",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "The alt text of the avatar",
+          "values": []
+        },
+        {
+          "name": "initials",
+          "description": "The initials to display when variant is 'initials'",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the avatar",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Loading state indicator",
+          "values": []
+        },
+        {
+          "name": "interactive",
+          "description": "Whether the avatar is interactive (clickable)",
+          "values": []
+        },
+        {
+          "name": "width",
+          "description": "The width of the avatar. This will override the size",
+          "values": []
+        },
+        {
+          "name": "height",
+          "description": "The height of the avatar. This will override the size",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/avatar"
+        }
+      ]
+    },
     {
       "name": "dap-ds-avatar-group",
       "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
@@ -104,9 +147,93 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-accordion-group",
+      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
+      "attributes": [
+        {
+          "name": "autoClose",
+          "description": "Whether to close other accordions when one is opened.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The variant of the accordion",
+          "values": [
+            { "name": "default" },
+            { "name": "collapsed" },
+            { "name": "clean" },
+            { "name": "clean-collapsed" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/accordion-group"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-badge",
+      "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of the badge",
+          "values": [
+            { "name": "neutral" },
+            { "name": "brand" },
+            { "name": "info" },
+            { "name": "positive" },
+            { "name": "warning" },
+            { "name": "negative" }
+          ]
+        },
+        {
+          "name": "icon",
+          "description": "The icon of the badge, this is a name of a built in icon",
+          "values": []
+        },
+        {
+          "name": "live",
+          "description": "Whether the badge represents dynamic content that should announce changes",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/badge"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-breadcrumb",
+      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **list** - The ordered list holding the breadcrumb items.",
+      "attributes": [
+        { "name": "variant", "values": [] },
+        {
+          "name": "mobile",
+          "description": "Mobile version of the breadcrumb",
+          "values": []
+        },
+        {
+          "name": "aria-labelledby",
+          "description": "The aria-labelledby of the breadcrumb",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/breadcrumb"
+        }
+      ]
+    },
     {
       "name": "dap-ds-banner",
-      "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** -  The title of the banner.",
+      "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **close-button** - The close button wrapper of the banner.",
       "attributes": [
         {
           "name": "variant",
@@ -152,29 +279,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-breadcrumb",
-      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
-      "attributes": [
-        { "name": "variant", "values": [] },
-        {
-          "name": "mobile",
-          "description": "Mobile version of the breadcrumb",
-          "values": []
-        },
-        {
-          "name": "aria-labelledby",
-          "description": "The aria-labelledby of the breadcrumb",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/breadcrumb"
-        }
-      ]
-    },
     {
       "name": "dap-ds-breadcrumb-item",
       "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
@@ -217,40 +321,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-badge",
-      "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "The type of the badge",
-          "values": [
-            { "name": "neutral" },
-            { "name": "brand" },
-            { "name": "info" },
-            { "name": "positive" },
-            { "name": "warning" },
-            { "name": "negative" }
-          ]
-        },
-        {
-          "name": "icon",
-          "description": "The icon of the badge, this is a name of a built in icon",
-          "values": []
-        },
-        {
-          "name": "live",
-          "description": "Whether the badge represents dynamic content that should announce changes",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/badge"
-        }
-      ]
-    },
     {
       "name": "dap-ds-button",
       "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\nA caller focusing a button the same tick it mounts -- a \"Save\" button that appears\nonly after the form it belongs to opens, say -- would otherwise get a TypeError,\nnot a no-op. Throwing out of a focus() call breaks whatever effect made it.\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Subtle neutral button properties: _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg** - Background color of subtle neutral button (default: var(--dds-button-subtle-background-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg-hover** - Background color of subtle neutral button on hover (default: var(--dds-button-subtle-background-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg-active** - Background color of subtle neutral button when active (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border** - Border color of subtle neutral button (default: var(--dds-button-subtle-border-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border-hover** - Border color of subtle neutral button on hover (default: var(--dds-button-subtle-border-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border-active** - Border color of subtle neutral button when active (default: var(--dds-button-subtle-border-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text** - Text color of subtle neutral button (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text-hover** - Text color of subtle neutral button on hover (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text-active** - Text color of subtle neutral button when active (default: var(--dds-button-subtle-text-neutral-hover)) Subtle inverted button properties: _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg** - Background color of subtle inverted button (default: var(--dds-button-subtle-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg-hover** - Background color of subtle inverted button on hover (default: var(--dds-button-subtle-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg-active** - Background color of subtle inverted button when active (default: var(--dds-button-subtle-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border** - Border color of subtle inverted button (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border-hover** - Border color of subtle inverted button on hover (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border-active** - Border color of subtle inverted button when active (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text** - Text color of subtle inverted button (default: var(--dds-button-subtle-text-inverted)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text-hover** - Text color of subtle inverted button on hover (default: var(--dds-button-subtle-text-inverted)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text-active** - Text color of subtle inverted button when active (default: var(--dds-button-subtle-text-inverted)) Subtle menu button properties: _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg** - Background color of subtle menu button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg-hover** - Background color of subtle menu button on hover (default: var(--dds-button-subtle-background-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg-active** - Background color of subtle menu button when active (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border** - Border color of subtle menu button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border-hover** - Border color of subtle menu button on hover (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border-active** - Border color of subtle menu button when active (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text** - Text color of subtle menu button (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text-hover** - Text color of subtle menu button on hover (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text-active** - Text color of subtle menu button when active (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-border-radius** - Border radius of subtle menu button (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-border-radius** - Border radius of subtle menu button while the menu is open (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-border** - Border color of subtle menu button while the menu is open (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-background** - Background color of subtle menu button while the menu is open (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-color** - Text color of subtle menu button while the menu is open (default: var(--dds-button-subtle-text-neutral-hover)) Subtle menu item button properties: _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg** - Background color of subtle menu item button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg-hover** - Background color of subtle menu item button on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg-active** - Background color of subtle menu item button when active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text** - Text color of subtle menu item button (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-hover** - Text color of subtle menu item button on hover (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-active** - Text color of subtle menu item button when active (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-disabled** - Text color of disabled subtle menu item button (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-padding** - Padding of subtle menu item button (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-border-radius** - Border radius of subtle menu item button (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-font-weight** - Font weight of subtle menu item button (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-font-size** - Font size of subtle menu item button (default: var(--dds-font-size-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-line-height** - Line height of subtle menu item button (default: var(--dds-font-line-height-xlarge)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border** - Border color of danger subtle button (default: var(--dds-button-subtle-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border-hover** - Border color of danger subtle button on hover (default: var(--dds-button-subtle-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border-active** - Border color of danger subtle button when active (default: var(--dds-button-subtle-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
@@ -357,70 +427,41 @@
       ]
     },
     {
-      "name": "dap-ds-callout",
-      "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The variant of the callout",
-          "values": [
-            { "name": "brand" },
-            { "name": "positive" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "negative" }
-          ]
-        },
-        {
-          "name": "alignment",
-          "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
-          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
-        },
-        {
-          "name": "shade",
-          "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
-          "values": [
-            { "name": "subtle" },
-            { "name": "base" },
-            { "name": "medium" },
-            { "name": "strong" }
-          ]
-        },
-        {
-          "name": "noBorder",
-          "description": "If the callout has a border",
-          "values": []
-        },
-        {
-          "name": "closeable",
-          "description": "If the callout has a close button",
-          "values": []
-        },
-        {
-          "name": "title",
-          "description": "The header of the callout",
-          "values": []
-        },
+      "name": "dap-ds-button-group-separator",
+      "description": "A visual divider between items in a button group.\n---\n\n\n### **CSS Properties:**\n - **--dds-button-group-separator-color** - Color of the separator line (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-button-group-separator-size** - Thickness of the separator line (default: var(--dds-border-width-base)) _(default: undefined)_",
+      "attributes": [],
+      "references": [
         {
-          "name": "closeButtonLabel",
-          "description": "The label of the close button",
-          "values": []
-        },
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/button-group-separator"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-button-group-text",
+      "description": "Non-interactive text displayed inside a button group.\n---\n\n\n### **Slots:**\n - _default_ - The text content. Can also hold an icon or a `<label>` for a grouped input.\n\n### **CSS Properties:**\n - **--dds-button-group-text-background** - Background color (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-border-color** - Border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-color** - Text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-button-group-text-padding-x** - Horizontal padding (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-group-text-border-radius** - Corner radius outside a group (default: var(--dds-radius-rounded)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The text container.",
+      "attributes": [],
+      "references": [
         {
-          "name": "closeButtonTestId",
-          "description": "`data-testid` for the default close button.",
-          "values": []
-        },
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/button-group-text"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-button-group",
+      "description": "A container that groups related buttons with consistent, connected styling.\n---\n\n\n### **Slots:**\n - _default_ - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.\n\n### **CSS Properties:**\n - **--dds-button-group-gap** - Spacing between nested button groups (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-button-group-overlap** - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-button-group-start-start-radius** - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`. _(default: undefined)_\n- **--dds-button-group-start-end-radius** - Set on grouped items to square off their start-end corner. _(default: undefined)_\n- **--dds-button-group-end-start-radius** - Set on grouped items to square off their end-start corner. _(default: undefined)_\n- **--dds-button-group-end-end-radius** - Set on grouped items to square off their end-end corner. _(default: undefined)_",
+      "attributes": [
         {
-          "name": "opened",
-          "description": "If the callout is opened",
-          "values": []
+          "name": "orientation",
+          "description": "The layout direction of the group",
+          "values": [{ "name": "ButtonGroupOrientation" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/callout"
+          "url": "https://shoelace.style/components/button-group"
         }
       ]
     },
@@ -488,7 +529,7 @@
     },
     {
       "name": "dap-ds-calendar",
-      "description": "A calendar is a visual representation of dates. It allows users to select a date.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the calendar value changes.\n\n### **Slots:**\n - _default_ - The content of the calendar.\n\n### **CSS Properties:**\n - **--dds-calendar-display** - The display property of the calendar container (default: flex) _(default: undefined)_\n- **--dds-calendar-isolation** - The isolation property of the calendar (default: isolate) _(default: undefined)_\n- **--dds-calendar-block-display** - The display property of the calendar block (default: block) _(default: undefined)_\n- **--dds-calendar-transition** - The transition property for the calendar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-calendar-header-display** - The display property of the calendar header (default: grid) _(default: undefined)_\n- **--dds-calendar-header-grid-flow** - The grid-auto-flow property of the calendar header (default: column) _(default: undefined)_\n- **--dds-calendar-header-width** - The width of the calendar header (default: 100%) _(default: undefined)_\n- **--dds-calendar-header-gap** - The gap between header items (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-select-min-height** - The minimum height of the select trigger (default: auto) _(default: undefined)_\n- **--dds-calendar-select-max-height** - The maximum height of the select trigger (default: 32px) _(default: undefined)_\n- **--dds-calendar-select-padding** - The padding of the select trigger (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-select-border-radius** - The border radius of the select trigger (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-select-border-color** - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n- **--dds-calendar-select-background** - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-calendar-select-color** - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-calendar-select-font-size** - The font size of the select trigger (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-select-font-style** - The font style of the select trigger (default: normal) _(default: undefined)_\n- **--dds-calendar-select-font-weight** - The font weight of the select trigger (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-nav-button-margin** - The margin of the navigation buttons (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-nav-button-color** - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar container.\n- **calendar-header** - The header of the calendar.\n- **body** - The body of the calendar.\n- **calendar-grid-header** - The header of the calendar grid.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.",
+      "description": "A calendar is a visual representation of dates. It allows users to select a date.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the calendar value changes.\n\n### **Slots:**\n - _default_ - The content of the calendar.\n\n### **CSS Properties:**\n - **--dds-calendar-display** - The display property of the calendar container (default: flex) _(default: undefined)_\n- **--dds-calendar-isolation** - The isolation property of the calendar (default: isolate) _(default: undefined)_\n- **--dds-calendar-block-display** - The display property of the calendar block (default: block) _(default: undefined)_\n- **--dds-calendar-transition** - The transition property for the calendar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-calendar-header-display** - The display property of the calendar header (default: grid) _(default: undefined)_\n- **--dds-calendar-header-grid-flow** - The grid-auto-flow property of the calendar header (default: column) _(default: undefined)_\n- **--dds-calendar-header-width** - The width of the calendar header (default: 100%) _(default: undefined)_\n- **--dds-calendar-header-gap** - The gap between header items (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-select-min-height** - The minimum height of the select trigger (default: auto) _(default: undefined)_\n- **--dds-calendar-select-max-height** - The maximum height of the select trigger (default: 32px) _(default: undefined)_\n- **--dds-calendar-select-padding** - The padding of the select trigger (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-select-border-radius** - The border radius of the select trigger (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-select-border-color** - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n- **--dds-calendar-select-background** - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-calendar-select-color** - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-calendar-select-font-size** - The font size of the select trigger (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-select-font-style** - The font style of the select trigger (default: normal) _(default: undefined)_\n- **--dds-calendar-select-font-weight** - The font weight of the select trigger (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-nav-button-margin** - The margin of the navigation buttons (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-nav-button-color** - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar container.\n- **calendar-header** - The header of the calendar.\n- **body** - The body of the calendar.\n- **calendar-grid-header** - The header of the calendar grid.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.",
       "attributes": [
         {
           "name": "mode",
@@ -524,72 +565,70 @@
       ]
     },
     {
-      "name": "dap-ds-avatar",
-      "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
+      "name": "dap-ds-callout",
+      "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n- **icon-base** - The base of the icon.",
       "attributes": [
-        {
-          "name": "shape",
-          "description": "The shape of the avatar",
-          "values": [
-            { "name": "circle" },
-            { "name": "rounded" },
-            { "name": "square" }
-          ]
-        },
         {
           "name": "variant",
-          "description": "The variant type of the avatar",
+          "description": "The variant of the callout",
           "values": [
-            { "name": "image" },
-            { "name": "initials" },
-            { "name": "icon" }
+            { "name": "brand" },
+            { "name": "positive" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "negative" }
           ]
         },
         {
-          "name": "src",
-          "description": "The source of the avatar image",
-          "values": []
+          "name": "alignment",
+          "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
         },
         {
-          "name": "alt",
-          "description": "The alt text of the avatar",
-          "values": []
+          "name": "shade",
+          "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+          "values": [
+            { "name": "subtle" },
+            { "name": "base" },
+            { "name": "medium" },
+            { "name": "strong" }
+          ]
         },
         {
-          "name": "initials",
-          "description": "The initials to display when variant is 'initials'",
+          "name": "noBorder",
+          "description": "If the callout has a border",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Accessible label for the avatar",
+          "name": "closeable",
+          "description": "If the callout has a close button",
           "values": []
         },
         {
-          "name": "loading",
-          "description": "Loading state indicator",
+          "name": "title",
+          "description": "The header of the callout",
           "values": []
         },
         {
-          "name": "interactive",
-          "description": "Whether the avatar is interactive (clickable)",
+          "name": "closeButtonLabel",
+          "description": "The label of the close button",
           "values": []
         },
         {
-          "name": "width",
-          "description": "The width of the avatar. This will override the size",
+          "name": "closeButtonTestId",
+          "description": "`data-testid` for the default close button.",
           "values": []
         },
         {
-          "name": "height",
-          "description": "The height of the avatar. This will override the size",
+          "name": "opened",
+          "description": "If the callout is opened",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/avatar"
+          "url": "https://shoelace.style/components/callout"
         }
       ]
     },
@@ -694,7 +733,7 @@
     },
     {
       "name": "dap-ds-card",
-      "description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
+      "description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.\n- **high-contrast** - The high contrast indicator of the card.",
       "attributes": [
         {
           "name": "interactive",
@@ -752,7 +791,7 @@
     },
     {
       "name": "dap-ds-checkbox",
-      "description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
+      "description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **base-label** - The label element wrapping the control.\n- **wrapper** - The wrapper of the control and label.\n- **feedback** - The feedback of the checkbox.\n- **high-contrast** - The high contrast indicator of the checkbox.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "indeterminate",
@@ -789,7 +828,7 @@
     },
     {
       "name": "dap-ds-chip",
-      "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
+      "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base\n- **content** - The content slot of the chip.",
       "attributes": [
         {
           "name": "removeable",
@@ -847,7 +886,7 @@
     },
     {
       "name": "dap-ds-code-puncher",
-      "description": "A composable PIN/OTP input component for entering verification codes.\n---\n\n\n### **Events:**\n - **dds-input** - Fires on each digit input.\n- **dds-change** - Fires when value changes.\n- **dds-complete** - Fires when all slots are filled.\n- **dds-focus** - Fires when component gains focus.\n- **dds-blur** - Fires when component loses focus.\n\n### **Slots:**\n - **default** - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n\n### **CSS Parts:**\n - **base** - The main container.\n- **slots** - The slots container.\n- **label** - The label element.\n- **description** - The description element.\n- **feedback** - The feedback element.",
+      "description": "A composable PIN/OTP input component for entering verification codes.\n---\n\n\n### **Events:**\n - **dds-input** - Fires on each digit input.\n- **dds-change** - Fires when value changes.\n- **dds-complete** - Fires when all slots are filled.\n- **dds-focus** - Fires when component gains focus.\n- **dds-blur** - Fires when component loses focus.\n\n### **Slots:**\n - **default** - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n\n### **CSS Parts:**\n - **base** - The main container.\n- **slots** - The slots container.\n- **label** - The label element.\n- **description** - The description element.\n- **feedback** - The feedback element.\n- **tooltip** - The tooltip of the code puncher.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "mask",
@@ -879,7 +918,7 @@
     },
     {
       "name": "dap-ds-combobox",
-      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-clear** - Emitted when the select is cleared.\n- **dds-search** - Emitted when the manual input value changes.\n- **dds-input** - Emitted when typing happens in the input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **option-list** - The option list of the select.\n- **input** - The input of the select.",
+      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-clear** - Emitted when the select is cleared.\n- **dds-search** - Emitted when the manual input value changes.\n- **dds-input** - Emitted when typing happens in the input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **option-list** - The option list of the select.\n- **input** - The input of the select.\n- **chips** - The container of the selected chips.\n- **indicator-icon** - The dropdown indicator icon.\n- **search-button** - The search button.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [],
       "references": [
         {
@@ -974,7 +1013,7 @@
     },
     {
       "name": "dap-ds-command",
-      "description": "A command is a component that displays a list of commands.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the command value changes.\n- **dds-opened** - Fired when the popup is opened.\n- **dds-closed** - Fired when the popup is closed.\n- **dds-close** - Fired when the popup should be closed.\n\n### **Slots:**\n - **trigger** - The trigger element for the command dropdown.\n- _default_ - The command items.\n\n### **CSS Properties:**\n - **--dds-popup-z-index** - Z-index of the popup (default: var(--dds-z-index-20)) _(default: undefined)_\n- **--dds-popup-padding** - Default padding of the popup (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-popup-padding-xs** - Padding of the popup when size is xs (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-popup-padding-lg** - Padding of the popup when size is lg (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-popup-border-width** - Border width of the popup (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-popup-border-radius** - Border radius of the popup (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-popup-border-color** - Border color of the popup (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-popup-background** - Background color of the popup (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-popup-color** - Text color of the popup (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-popup-arrow-size** - Size of the popup arrow (default: var(--dds-tooltip-arrow-size)) _(default: undefined)_\n\n### **CSS Parts:**\n - **popup** - The main popup container.\n- **arrow** - The arrow of the popup.",
+      "description": "A command is a component that displays a list of commands.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the command value changes.\n- **dds-opened** - Fired when the popup is opened.\n- **dds-closed** - Fired when the popup is closed.\n- **dds-close** - Fired when the popup should be closed.\n\n### **Slots:**\n - **trigger** - The trigger element for the command dropdown.\n- _default_ - The command items.\n\n### **CSS Properties:**\n - **--dds-popup-z-index** - Z-index of the popup (default: var(--dds-z-index-20)) _(default: undefined)_\n- **--dds-popup-padding** - Default padding of the popup (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-popup-padding-xs** - Padding of the popup when size is xs (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-popup-padding-lg** - Padding of the popup when size is lg (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-popup-border-width** - Border width of the popup (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-popup-border-radius** - Border radius of the popup (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-popup-border-color** - Border color of the popup (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-popup-background** - Background color of the popup (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-popup-color** - Text color of the popup (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-popup-arrow-size** - Size of the popup arrow (default: var(--dds-tooltip-arrow-size)) _(default: undefined)_\n\n### **CSS Parts:**\n - **popup-base** - The popup element of the command.\n- **popup** - The popup container of the command.\n- **arrow** - The arrow of the popup.",
       "attributes": [
         {
           "name": "value",
@@ -1055,7 +1094,7 @@
     },
     {
       "name": "dap-ds-copybox-input",
-      "description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.",
+      "description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "copyButtonAriaLabel",
@@ -1094,7 +1133,7 @@
     },
     {
       "name": "dap-ds-datatable",
-      "description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n- **dds-column-sizing-change** - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-outer-border-width** - Width of the outer container border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-header-border-width** - Width of the header row bottom border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-row-border-width** - Width of the row (body cell) bottom borders only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-resize-handle-color** - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **resize-handle** - The column resize handle at the right edge of a resizable header cell.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.",
+      "description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n- **dds-column-sizing-change** - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-outer-border-width** - Width of the outer container border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-header-border-width** - Width of the header row bottom border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-row-border-width** - Width of the row (body cell) bottom borders only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-resize-handle-color** - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **resize-handle** - The column resize handle at the right edge of a resizable header cell.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.\n- **content** - The content container of the table.\n- **page-size-select-base** - The base of the pager page size select.\n- **page-size-select-trigger** - The trigger of the pager page size select.\n- **pager-button-first-base** - The base of the pager first button.\n- **pager-button-first-content** - The content of the pager first button.\n- **pager-button-previous-base** - The base of the pager previous button.\n- **pager-button-previous-content** - The content of the pager previous button.\n- **pager-button-next-base** - The base of the pager next button.\n- **pager-button-next-content** - The content of the pager next button.\n- **pager-button-last-base** - The base of the pager last button.\n- **pager-button-last-content** - The content of the pager last button.\n- **pager-page-numbers** - The page numbers container of the pager.\n- **pager-page-number** - The page number buttons of the pager.\n- **pager-page-number-active** - The active page number button of the pager.\n- **pager-page-number-base** - The base of the pager page number buttons.\n- **pager-page-number-content** - The content of the pager page number buttons.\n- **pager-page-info** - The page info text of the pager.",
       "attributes": [
         {
           "name": "rowKey",
@@ -1329,7 +1368,7 @@
     },
     {
       "name": "dap-ds-datepicker",
-      "description": "A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the datepicker value changes.\n- **dds-input** - Fired when the datepicker input value changes.\n- **dds-valid-date** - Fired when the datepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-date** - Fired when the datepicker input value is invalid. Happens on manual input typing. For `out-of-range` the typed text was a well-formed date, so `date` carries it as an ISO (`YYYY-MM-DD`) string and the consumer can phrase its own range message; for `invalid` the text could not be parsed and `date` is omitted.\n- **dds-clear** - Fired when the datepicker is cleared.\n- **dds-focus** - Emitted when the datepicker gains focus.\n- **dds-blur** - Emitted when the datepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main datepicker container.\n- **calendar** - The calendar of the datepicker.\n- **trigger** - The trigger button of the datepicker.\n- **label** - The label of the datepicker.\n- **description** - The description of the datepicker.\n- **feedback** - The feedback of the datepicker.\n- **tooltip** - The tooltip of the datepicker.\n- **input** - The input of the datepicker.\n- **clear-button** - The clear button of the datepicker.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.",
+      "description": "A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the datepicker value changes.\n- **dds-input** - Fired when the datepicker input value changes.\n- **dds-valid-date** - Fired when the datepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-date** - Fired when the datepicker input value is invalid. Happens on manual input typing. For `out-of-range` the typed text was a well-formed date, so `date` carries it as an ISO (`YYYY-MM-DD`) string and the consumer can phrase its own range message; for `invalid` the text could not be parsed and `date` is omitted.\n- **dds-clear** - Fired when the datepicker is cleared.\n- **dds-focus** - Emitted when the datepicker gains focus.\n- **dds-blur** - Emitted when the datepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main datepicker container.\n- **calendar** - The calendar of the datepicker.\n- **trigger** - The trigger button of the datepicker.\n- **label** - The label of the datepicker.\n- **description** - The description of the datepicker.\n- **feedback** - The feedback of the datepicker.\n- **tooltip** - The tooltip of the datepicker.\n- **input** - The input of the datepicker.\n- **clear-button** - The clear button of the datepicker.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.\n- **calendar-button** - The calendar icon button of the datepicker.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "value",
@@ -1533,7 +1572,7 @@
     },
     {
       "name": "dap-ds-file-input-list-item",
-      "description": "A file input list item is a container for file input list items.\n---\n\n\n### **Events:**\n - **dds-file-remove** - Dispatched when a file is removed from the list.\n- **dds-file-click** - Dispatched when a file is clicked.\n\n### **Slots:**\n - **delete-button** - The delete button.\n\n### **CSS Properties:**\n - **--dds-file-list-item-padding** - The padding of the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-border-width** - The border width of the file list item (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-file-list-item-border-color** - The border color of the file list item (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-file-list-item-border-radius** - The border radius of the file list item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-list-item-bg-color** - The background color of the file list item (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-file-list-item-font-weight** - The font weight of the file list item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-file-list-item-disabled-bg-color** - The background color of the disabled file list item (default: var(--dds-cold-grey-400)) _(default: undefined)_\n- **--dds-file-list-item-disabled-color** - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-file-list-item-content-margin** - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-content-gap** - The gap between content elements in the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-filename-color** - The color of the filename text (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-file-list-item-filesize-color** - The color of the filesize text (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-x** - The padding of the feedback section (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-y** - The padding of the feedback section (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-file-list-item-feedback-border-color** - The border color of the feedback section (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-file-list-item-feedback-font-size** - The font size of the feedback text (default: var(--dds-font-sm)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input list item container.\n- **feedback** - The feedback container.\n- **link** - The link text of the item component.\n- **filename** - The filename text of the item component.\n- **filesize** - The filesize text of the item component.\n- **spinner** - The spinner of the item component.\n- **remove-button** - The remove button of the item component.\n- **thumbnail** - The thumbnail of the item component.",
+      "description": "A file input list item is a container for file input list items.\n---\n\n\n### **Events:**\n - **dds-file-remove** - Dispatched when a file is removed from the list.\n- **dds-file-click** - Dispatched when a file is clicked.\n\n### **Slots:**\n - **delete-button** - The delete button.\n\n### **CSS Properties:**\n - **--dds-file-list-item-padding** - The padding of the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-border-width** - The border width of the file list item (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-file-list-item-border-color** - The border color of the file list item (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-file-list-item-border-radius** - The border radius of the file list item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-list-item-bg-color** - The background color of the file list item (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-file-list-item-font-weight** - The font weight of the file list item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-file-list-item-disabled-bg-color** - The background color of the disabled file list item (default: var(--dds-cold-grey-400)) _(default: undefined)_\n- **--dds-file-list-item-disabled-color** - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-file-list-item-content-margin** - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-content-gap** - The gap between content elements in the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-filename-color** - The color of the filename text (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-file-list-item-filesize-color** - The color of the filesize text (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-x** - The padding of the feedback section (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-y** - The padding of the feedback section (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-file-list-item-feedback-border-color** - The border color of the feedback section (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-file-list-item-feedback-font-size** - The font size of the feedback text (default: var(--dds-font-sm)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input list item container.\n- **feedback** - The feedback container.\n- **link** - The link text of the item component.\n- **filename** - The filename text of the item component.\n- **filesize** - The filesize text of the item component.\n- **spinner** - The spinner of the item component.\n- **remove-button** - The remove button of the item component.\n- **thumbnail** - The thumbnail of the item component.\n- **content** - The content of the list item.",
       "attributes": [
         {
           "name": "disabled",
@@ -1704,7 +1743,7 @@
     },
     {
       "name": "dap-ds-file-input",
-      "description": "A file input is a control that allows users to select files to upload.\n---\n\n\n### **Events:**\n - **dds-upload-start** - Fired when a file upload starts.\n- **dds-upload-progress** - Fired during file upload progress.\n- **dds-upload-complete** - Fired when a file upload completes successfully.\n- **dds-upload-error** - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.\n- **dds-all-uploads-complete** - Fired when all file uploads are complete.\n- **dds-file-removed** - Fired when a file is removed from the file input.\n- **dds-file-delete-error** - Fired when a file deletion from server encounters an error.\n- **dds-file-change** - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.\n- **dds-files-accepted** - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).\n\n### **Methods:**\n - **removeFile(fileData: _FileListElement | File_, options: _{ skipConfirm?: boolean }_, options.skipConfirm): _Promise<void> | void_** - Removes a single file from the file input and frees up a slot in the\n`maxFiles` budget.\n- **clearFiles(): _Promise<void>_** - Removes every selected file, so the whole `maxFiles` budget becomes\navailable again.\n\nThis is a programmatic API, so it never shows the confirmation dialog.\nFiles already uploaded are deleted from the server when `deleteUrl` is set,\nand in-flight uploads are aborted.\n- **abortUpload(fileName: _string_)** - Aborts upload for a specific file\n- **abortAllUploads()** - Aborts all active uploads\n- **startUpload()** - Manually start upload of all selected files\n\n### **Slots:**\n - **dropzone-content** - The content to display in the dropzone.\n\n### **CSS Properties:**\n - **--dds-file-input-holder-margin** - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0) _(default: undefined)_\n- **--dds-file-input-dropzone-padding** - The padding of the dropzone (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-file-input-dropzone-border** - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-radius** - The border radius of the dropzone (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-input-dropzone-background** - The background of the dropzone (default: var(--dds-color-background-primary)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-hover** - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-hover** - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-dragover** - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-dragover** - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-disabled** - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-file-input-dropzone-gap** - The gap between elements in the dropzone content (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-file-input-dropzone-accept-color** - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input container.\n- **input** - The file input control.\n- **label** - The file input label.\n- **description** - The file input description.\n- **feedback** - The file input feedback.\n- **tooltip** - The file input tooltip.\n- **upload-progress** - The upload progress container.\n- **browse-button** - The browse button.\n- **upload-button** - The upload button.\n- **dropzone** - The dropzone area.",
+      "description": "A file input is a control that allows users to select files to upload.\n---\n\n\n### **Events:**\n - **dds-upload-start** - Fired when a file upload starts.\n- **dds-upload-progress** - Fired during file upload progress.\n- **dds-upload-complete** - Fired when a file upload completes successfully.\n- **dds-upload-error** - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.\n- **dds-all-uploads-complete** - Fired when all file uploads are complete.\n- **dds-file-removed** - Fired when a file is removed from the file input.\n- **dds-file-delete-error** - Fired when a file deletion from server encounters an error.\n- **dds-file-change** - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.\n- **dds-files-accepted** - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).\n\n### **Methods:**\n - **removeFile(fileData: _FileListElement | File_, options: _{ skipConfirm?: boolean }_, options.skipConfirm): _Promise<void> | void_** - Removes a single file from the file input and frees up a slot in the\n`maxFiles` budget.\n- **clearFiles(): _Promise<void>_** - Removes every selected file, so the whole `maxFiles` budget becomes\navailable again.\n\nThis is a programmatic API, so it never shows the confirmation dialog.\nFiles already uploaded are deleted from the server when `deleteUrl` is set,\nand in-flight uploads are aborted.\n- **abortUpload(fileName: _string_)** - Aborts upload for a specific file\n- **abortAllUploads()** - Aborts all active uploads\n- **startUpload()** - Manually start upload of all selected files\n\n### **Slots:**\n - **dropzone-content** - The content to display in the dropzone.\n\n### **CSS Properties:**\n - **--dds-file-input-holder-margin** - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0) _(default: undefined)_\n- **--dds-file-input-dropzone-padding** - The padding of the dropzone (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-file-input-dropzone-border** - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-radius** - The border radius of the dropzone (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-input-dropzone-background** - The background of the dropzone (default: var(--dds-color-background-primary)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-hover** - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-hover** - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-dragover** - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-dragover** - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-disabled** - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-file-input-dropzone-gap** - The gap between elements in the dropzone content (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-file-input-dropzone-accept-color** - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input container.\n- **input** - The file input control.\n- **label** - The file input label.\n- **description** - The file input description.\n- **feedback** - The file input feedback.\n- **tooltip** - The file input tooltip.\n- **upload-progress** - The upload progress container.\n- **browse-button** - The browse button.\n- **upload-button** - The upload button.\n- **dropzone** - The dropzone area.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "uploadButtonLabel",
@@ -1937,7 +1976,7 @@
     },
     {
       "name": "dap-ds-icon-button",
-      "description": "An icon button is a button with an icon.\n---\n\n\n### **Slots:**\n - _default_ - The icon of the button.\n\n### **CSS Properties:**\n - **--dds-icon-button-border-width** - Border width of the icon button (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-icon-button-border-color** - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-icon-button-border-radius** - Border radius of the icon button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-icon-button-hover-border-width** - Border width on hover (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-icon-button-active-border-width** - Border width when active (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-icon-button-transition** - Transition property for the icon button (default: var(--dds-transition-all)) _(default: undefined)_\n- **--dds-icon-button-cursor** - Cursor style for the button (default: pointer) _(default: undefined)_\n- **--dds-icon-button-disabled-cursor** - Cursor style for the disabled button (default: not-allowed) _(default: undefined)_\n- **--dds-icon-button-column-gap** - Column gap between elements (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-lg** - Padding for large size (default: var(--dds-spacing-0)) _(default: undefined)_\n- **--dds-icon-button-padding-md** - Padding for medium size (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-sm** - Padding for small size (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-icon-button-padding-xs** - Padding for extra small size (default: var(--dds-spacing-25)) _(default: undefined)_\n- **--dds-icon-button-size-lg** - Size for large icon button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-icon-button-size-md** - Size for medium icon button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-icon-button-size-sm** - Size for small icon button (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-icon-button-size-xs** - Size for extra small icon button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-icon-button-neutral-bg** - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-icon-button-neutral-color** - Text color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-hover-bg** - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-active-bg** - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-icon-button-brand-bg** - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-color** - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-hover-bg** - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-icon-button-brand-active-bg** - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-icon-button-inverted-bg** - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) _(default: undefined)_\n- **--dds-icon-button-inverted-color** - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-hover-bg** - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) _(default: undefined)_\n- **--dds-icon-button-inverted-active-bg** - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-bg** - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-color** - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-hover-bg** - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-active-bg** - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-color** - Color for disabled state (default: var(--dds-icon-neutral-disabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-bg** - Background color for disabled state (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **content** - The icon of the button.\n- **icon** - The icon of the icon.\n- **icon-base** - The base of the icon.",
+      "description": "An icon button is a button with an icon.\n---\n\n\n### **Slots:**\n - _default_ - The icon of the button.\n\n### **CSS Properties:**\n - **--dds-icon-button-border-width** - Border width of the icon button (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-icon-button-border-color** - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-icon-button-border-radius** - Border radius of the icon button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-icon-button-hover-border-width** - Border width on hover (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-icon-button-active-border-width** - Border width when active (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-icon-button-transition** - Transition property for the icon button (default: var(--dds-transition-all)) _(default: undefined)_\n- **--dds-icon-button-cursor** - Cursor style for the button (default: pointer) _(default: undefined)_\n- **--dds-icon-button-disabled-cursor** - Cursor style for the disabled button (default: not-allowed) _(default: undefined)_\n- **--dds-icon-button-column-gap** - Column gap between elements (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-lg** - Padding for large size (default: var(--dds-spacing-0)) _(default: undefined)_\n- **--dds-icon-button-padding-md** - Padding for medium size (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-sm** - Padding for small size (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-icon-button-padding-xs** - Padding for extra small size (default: var(--dds-spacing-25)) _(default: undefined)_\n- **--dds-icon-button-size-lg** - Size for large icon button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-icon-button-size-md** - Size for medium icon button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-icon-button-size-sm** - Size for small icon button (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-icon-button-size-xs** - Size for extra small icon button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-icon-button-neutral-bg** - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-icon-button-neutral-color** - Text color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-hover-bg** - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-active-bg** - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-icon-button-brand-bg** - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-color** - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-hover-bg** - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-icon-button-brand-active-bg** - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-icon-button-inverted-bg** - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) _(default: undefined)_\n- **--dds-icon-button-inverted-color** - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-hover-bg** - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) _(default: undefined)_\n- **--dds-icon-button-inverted-active-bg** - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-bg** - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-color** - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-hover-bg** - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-active-bg** - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-color** - Color for disabled state (default: var(--dds-icon-neutral-disabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-bg** - Background color for disabled state (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **content** - The icon of the button.\n- **icon** - The icon of the icon.\n- **icon-base** - The base of the icon.\n- **high-contrast** - The high contrast indicator of the button.",
       "attributes": [
         {
           "name": "variant",
@@ -2155,7 +2194,7 @@
     },
     {
       "name": "dap-ds-list-item",
-      "description": "A list\n---\n\n\n### **Slots:**\n - _default_ - The content of the list item.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **actions** - The actions of the list item.\n\n### **CSS Properties:**\n - **--dds-list-item-gap** - Gap between list item elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-content-gap** - Gap between content elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-horizontal-gap** - Gap for horizontal alignment (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-list-item-vertical-gap** - Gap for vertical alignment (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-icon-size** - Size of the icon (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-list-item-number-size** - Size of the number icon (default: 20px) _(default: undefined)_\n- **--dds-list-item-actions-gap** - Gap between action elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-list-item-actions-padding** - Padding for the actions container (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-list-item-background-base** - Background color for base shade (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-list-item-background-subtle** - Background color for subtle shade (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-list-item-background-medium** - Background color for medium shade (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-list-item-background-strong** - Background color for strong shade (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-icon-brand** - Color for brand icon (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-neutral** - Color for neutral icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-list-item-icon-positive** - Color for positive icon (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-negative** - Color for negative icon (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-list-item-title-color** - Title text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-description-color** - Description text color (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-list-item-number-text-color** - Number text color (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main list item container.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **description** - The description of the list item.\n- **container** - The container of the list item.\n- **list-item-base** - The base list item container.\n- **icon-container** - The container of the icon.\n- **title-container** - The container of the title.\n- **description-container** - The container of the description.\n- **actions-container** - The container of the actions.\n- **iteractive-indicator-container** - The container of the interactive indicator.",
+      "description": "A list\n---\n\n\n### **Slots:**\n - _default_ - The content of the list item.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **actions** - The actions of the list item.\n\n### **CSS Properties:**\n - **--dds-list-item-gap** - Gap between list item elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-content-gap** - Gap between content elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-horizontal-gap** - Gap for horizontal alignment (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-list-item-vertical-gap** - Gap for vertical alignment (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-icon-size** - Size of the icon (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-list-item-number-size** - Size of the number icon (default: 20px) _(default: undefined)_\n- **--dds-list-item-actions-gap** - Gap between action elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-list-item-actions-padding** - Padding for the actions container (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-list-item-background-base** - Background color for base shade (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-list-item-background-subtle** - Background color for subtle shade (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-list-item-background-medium** - Background color for medium shade (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-list-item-background-strong** - Background color for strong shade (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-icon-brand** - Color for brand icon (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-neutral** - Color for neutral icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-list-item-icon-positive** - Color for positive icon (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-negative** - Color for negative icon (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-list-item-title-color** - Title text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-description-color** - Description text color (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-list-item-number-text-color** - Number text color (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main list item container.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **description** - The description of the list item.\n- **container** - The container of the list item.\n- **list-item-base** - The base list item container.\n- **icon-container** - The container of the icon.\n- **title-container** - The container of the title.\n- **description-container** - The container of the description.\n- **actions-container** - The container of the actions.\n- **iteractive-indicator-container** - The container of the interactive indicator.\n- **card-base** - The base of the inner card content.\n- **actions** - The actions slot of the list item.",
       "attributes": [
         {
           "name": "variant",
@@ -2528,7 +2567,7 @@
     },
     {
       "name": "dap-ds-number-input",
-      "description": "A number input component.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800) ). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main number input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.\n- **decrement-button** - The decrement button of the input.\n- **increment-button** - The increment button of the input.\n- **decrement-button-base** - The base of the decrement button.\n- **increment-button-base** - The base of the increment button.\n- **decrement-button-content** - The content of the decrement button.\n- **increment-button-content** - The content of the increment button.",
+      "description": "A number input component.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800) ). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main number input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.\n- **decrement-button** - The decrement button of the input.\n- **increment-button** - The increment button of the input.\n- **decrement-button-base** - The base of the decrement button.\n- **increment-button-base** - The base of the increment button.\n- **decrement-button-content** - The content of the decrement button.\n- **increment-button-content** - The content of the increment button.\n- **decrement-icon** - The icon of the decrement button.\n- **decrement-icon-base** - The base of the decrement icon.\n- **increment-icon** - The icon of the increment button.\n- **increment-icon-base** - The base of the increment icon.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "thousandSeparator",
@@ -2585,7 +2624,7 @@
     },
     {
       "name": "dap-ds-official-website-banner",
-      "description": "An official website banner is a banner that displays that the website is an official website.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
+      "description": "An official website banner is a banner that displays that the website is an official website.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.\n- **heading-text** - The text of the heading.",
       "attributes": [],
       "references": [
         {
@@ -2618,7 +2657,7 @@
     },
     {
       "name": "dap-ds-option-item",
-      "description": "An option item is a selectable item in a list of options.\n---\n\n\n### **Slots:**\n - **prefix** - The prefix of the option item.\n- _default_ - The label of the option item.\n- **suffix** - The suffix of the option item.\n\n### **CSS Properties:**\n - **--dds-option-item-padding-vertical** - The vertical padding of the option item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-option-item-padding-horizontal** - The horizontal padding of the option item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-option-item-border-radius** - The border radius of the option item (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-option-item-color** - The text color of the option item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-option-item-hover-bg** - The background color of the option item when hovered (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-option-item-active-bg** - The background color of the option item when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-option-item-disabled-color** - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-option-item-high-contrast-border** - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-option-item-selected-font-weight** - The font weight of the option item when selected (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-option-item-xs-font-size** - The font size of the option item in extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-option-item-lg-font-size** - The font size of the option item in large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-option-item-selected-icon-width** - The width of the selected icon (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main option item container.\n- **prefix** - The prefix of the option item.\n- **label** - The label of the option item.\n- **suffix** - The suffix of the option item.",
+      "description": "An option item is a selectable item in a list of options.\n---\n\n\n### **Slots:**\n - **prefix** - The prefix of the option item.\n- _default_ - The label of the option item.\n- **suffix** - The suffix of the option item.\n\n### **CSS Properties:**\n - **--dds-option-item-padding-vertical** - The vertical padding of the option item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-option-item-padding-horizontal** - The horizontal padding of the option item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-option-item-border-radius** - The border radius of the option item (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-option-item-color** - The text color of the option item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-option-item-hover-bg** - The background color of the option item when hovered (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-option-item-active-bg** - The background color of the option item when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-option-item-disabled-color** - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-option-item-high-contrast-border** - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-option-item-selected-font-weight** - The font weight of the option item when selected (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-option-item-xs-font-size** - The font size of the option item in extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-option-item-lg-font-size** - The font size of the option item in large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-option-item-selected-icon-width** - The width of the selected icon (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main option item container.\n- **prefix** - The prefix of the option item.\n- **label** - The label of the option item.\n- **suffix** - The suffix of the option item.\n- **high-contrast** - The high contrast indicator of the option item.",
       "attributes": [
         {
           "name": "selected",
@@ -2665,7 +2704,7 @@
     },
     {
       "name": "dap-ds-option-list",
-      "description": "An option list is a list of selectable options.\n---\n\n\n### **Events:**\n - **dds-cancel** - Fired when the escape key is pressed.\n- **dds-option-change** - Fired when the option list value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-list-changed** - Fired when the available options list changes.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Parts:**\n - **base** - The main option list container.\n- **option-item** - The option item of the option list.\n- **popup-base** - The base of the popup.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.",
+      "description": "An option list is a list of selectable options.\n---\n\n\n### **Events:**\n - **dds-cancel** - Fired when the escape key is pressed.\n- **dds-option-change** - Fired when the option list value changes. `item` is set when the options come from `items`.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-list-changed** - Fired when the available options list changes.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Parts:**\n - **base** - The main option list container.\n- **option-item** - The option item of the option list.\n- **popup-base** - The base of the popup.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.",
       "attributes": [
         {
           "name": "filterText",
@@ -2702,6 +2741,11 @@
           "description": "Whether the option list items are selectable, whether it shows the selected icon",
           "values": []
         },
+        {
+          "name": "items",
+          "description": "The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.",
+          "values": [{ "name": "DapDSOptionData[]" }]
+        },
         {
           "name": "multiselectable",
           "description": "Whether multiple options can be selected; exposed as aria-multiselectable on the listbox.",
@@ -2846,7 +2890,7 @@
     },
     {
       "name": "dap-ds-password-input",
-      "description": "A password input a field for entering a password.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **postfix** - The postfix of the password input.\n- **password-input** - The password input.\n- **password-input--visible** - The visible password input.\n- **show-button** - The show button of the password input.\n- **show-button-base** - The base of the show button.\n- **show-button-content** - The content of the show button.\n- **show-icon** - The show icon of the password input.\n- **show-icon-base** - The base of the show icon.\n- **hide-button** - The hide button of the password input.\n- **hide-button-base** - The base of the hide button.\n- **hide-button-content** - The content of the hide button.\n- **hide-icon** - The hide icon of the password input.\n- **hide-icon-base** - The base of the hide icon.",
+      "description": "A password input a field for entering a password.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **postfix** - The postfix of the password input.\n- **show-button** - The show button of the password input.\n- **show-button-base** - The base of the show button.\n- **show-button-content** - The content of the show button.\n- **show-icon** - The show icon of the password input.\n- **show-icon-base** - The base of the show icon.\n- **hide-icon** - The hide icon of the password input.\n- **hide-icon-base** - The base of the hide icon.\n- **base** - The main input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "toggleButtonTestId",
@@ -2936,7 +2980,7 @@
     },
     {
       "name": "dap-ds-radio-button",
-      "description": "A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio button is checked.\n- **dds-blur** - Emitted when the radio button loses focus.\n- **dds-focus** - Emitted when the radio button gains focus.\n- **dds-input** - Emitted when the radio button receives input.\n\n### **CSS Properties:**\n - **--dds-radio-size** - Sets the size of the radio button. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-radio-border-width** - Sets the border width of the radio button. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-radio-border-radius** - Sets the border radius of the radio button. (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-radio-border-color** - Sets the border color of the radio button. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-radio-background-color** - Sets the background color of the radio button. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-radio-hover-border-color** - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-radio-hover-background-color** - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-radio-active-border-color** - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-radio-active-background-color** - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-radio-checked-background-color** - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-radio-checked-hover-background-color** - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-radio-checked-active-background-color** - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-radio-disabled-background-color** - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled)) _(default: undefined)_\n- **--dds-radio-icon-background-color** - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static)) _(default: undefined)_\n- **--dds-radio-disabled-icon-background-color** - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-radio-invalid-border-color** - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-background-color** - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-hover-border-color** - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-hover-background-color** - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-active-border-color** - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-active-background-color** - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-checked-background-color** - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-hover-background-color** - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-active-background-color** - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted)) _(default: undefined)_\n- **--dds-radio-icon-size** - Sets the size of the radio button icon. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-radio-readonly-border-color** - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-background-color** - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-icon-color** - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main radio button container.\n- **wrapper** - The wrapper of the radio button.\n- **base-label** - The main label container.\n- **label** - The label of the radio button.\n- **input** - The native input of the radio button.\n- **control** - The control of the radio button.\n- **label-container** - The label container of the radio button.\n- **description** - The description of the radio button.",
+      "description": "A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio button is checked.\n- **dds-blur** - Emitted when the radio button loses focus.\n- **dds-focus** - Emitted when the radio button gains focus.\n- **dds-input** - Emitted when the radio button receives input.\n\n### **CSS Properties:**\n - **--dds-radio-size** - Sets the size of the radio button. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-radio-border-width** - Sets the border width of the radio button. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-radio-border-radius** - Sets the border radius of the radio button. (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-radio-border-color** - Sets the border color of the radio button. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-radio-background-color** - Sets the background color of the radio button. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-radio-hover-border-color** - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-radio-hover-background-color** - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-radio-active-border-color** - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-radio-active-background-color** - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-radio-checked-background-color** - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-radio-checked-hover-background-color** - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-radio-checked-active-background-color** - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-radio-disabled-background-color** - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled)) _(default: undefined)_\n- **--dds-radio-icon-background-color** - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static)) _(default: undefined)_\n- **--dds-radio-disabled-icon-background-color** - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-radio-invalid-border-color** - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-background-color** - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-hover-border-color** - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-hover-background-color** - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-active-border-color** - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-active-background-color** - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-checked-background-color** - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-hover-background-color** - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-active-background-color** - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted)) _(default: undefined)_\n- **--dds-radio-icon-size** - Sets the size of the radio button icon. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-radio-readonly-border-color** - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-background-color** - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-icon-color** - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main radio button container.\n- **wrapper** - The wrapper of the radio button.\n- **base-label** - The main label container.\n- **label** - The label of the radio button.\n- **input** - The native input of the radio button.\n- **control** - The control of the radio button.\n- **label-container** - The label container of the radio button.\n- **description** - The description of the radio button.\n- **feedback** - The feedback of the radio button.\n- **high-contrast** - The high contrast indicator of the radio button.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "focusable",
@@ -3005,7 +3049,7 @@
     },
     {
       "name": "dap-ds-scroll-area",
-      "description": "A component that provides a customizable scrollable area with a custom scrollbar.\n---\n\n\n### **Slots:**\n - _default_ - The content to be scrolled\n\n### **CSS Properties:**\n - **--dds-scroll-area-radius** - The border radius of the scroll area and its elements (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-scroll-area-background** - The background color of the scroll area (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-background** - The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-scroll-area-thumb-background** - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) _(default: undefined)_\n- **--dds-scroll-area-thumb-hover-background** - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) _(default: undefined)_\n- **--dds-scroll-area-thumb-active-background** - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) _(default: undefined)_\n- **--dds-scroll-area-transition** - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-size** - The width/height of the scrollbar (default: 10px) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The viewport element that contains the scrollable content\n- **scrollbar** - The scrollbar container\n- **corner** - The corner between vertical and horizontal scrollbars",
+      "description": "A component that provides a customizable scrollable area with a custom scrollbar.\n---\n\n\n### **Slots:**\n - _default_ - The content to be scrolled\n\n### **CSS Properties:**\n - **--dds-scroll-area-radius** - The border radius of the scroll area and its elements (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-scroll-area-background** - The background color of the scroll area (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-background** - The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-scroll-area-thumb-background** - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) _(default: undefined)_\n- **--dds-scroll-area-thumb-hover-background** - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) _(default: undefined)_\n- **--dds-scroll-area-thumb-active-background** - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) _(default: undefined)_\n- **--dds-scroll-area-transition** - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-size** - The width/height of the scrollbar (default: 10px) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The viewport element that contains the scrollable content\n- **scrollbar** - The scrollbar container\n- **base** - The main scroll area container.\n- **thumb** - The thumb of the scrollbar.",
       "attributes": [
         {
           "name": "orientation",
@@ -3054,7 +3098,7 @@
     },
     {
       "name": "dap-ds-search",
-      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the search value changes.\n- **dds-blur** - Emitted when the search loses focus.\n- **dds-focus** - Emitted when the search gains focus.\n- **dds-clear** - Emitted when the search is cleared.\n- **dds-search** - Emitted when the search input value changes.\n- **dds-input** - Emitted when typing happens in the search input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main search container.\n- **trigger** - The trigger button of the search.\n- **search-button** - The trailing search icon button.\n- **label** - The label of the search.\n- **description** - The description of the search.\n- **feedback** - The feedback of the search.\n- **tooltip** - The tooltip of the search.\n- **option-list** - The option list of the search.\n- **input** - The input of the search.",
+      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the search value changes.\n- **dds-blur** - Emitted when the search loses focus.\n- **dds-focus** - Emitted when the search gains focus.\n- **dds-clear** - Emitted when the search is cleared.\n- **dds-search** - Emitted when the search input value changes.\n- **dds-input** - Emitted when typing happens in the search input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main search container.\n- **trigger** - The trigger button of the search.\n- **search-button** - The trailing search icon button.\n- **label** - The label of the search.\n- **description** - The description of the search.\n- **feedback** - The feedback of the search.\n- **tooltip** - The tooltip of the search.\n- **option-list** - The option list of the search.\n- **input** - The input of the search.\n- **chips** - The container of the selected chips.\n- **indicator-icon** - The dropdown indicator icon.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [],
       "references": [
         {
@@ -3065,7 +3109,7 @@
     },
     {
       "name": "dap-ds-select",
-      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.",
+      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n- **--dds-select-picker-max-height** - Max height of the customizable select picker (default: 20rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.\n- **native-button** - The button of the customizable native select (experimental `customizable` mode).\n- **native-option** - The options of the customizable native select (experimental `customizable` mode).\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "placement",
@@ -3110,6 +3154,11 @@
           "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
           "values": []
         },
+        {
+          "name": "customizable",
+          "description": "Experimental: render a native `<select>` that opts into the customizable select\n(`appearance: base-select`) in supporting browsers, so the dropdown picker is styled\nlike the design system while keeping native keyboard, typeahead and top-layer behavior.\nBrowsers without support fall back to the classic native select (same as `native`).",
+          "values": []
+        },
         {
           "name": "loading",
           "description": "The loading state of the select.",
@@ -3134,6 +3183,11 @@
           "name": "disableViewportAutoClose",
           "description": "Whether to keep popup open when trigger leaves viewport.",
           "values": []
+        },
+        {
+          "name": "items",
+          "description": "The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.",
+          "values": [{ "name": "DapDSOptionData[]" }]
         }
       ],
       "references": [
@@ -3145,7 +3199,7 @@
     },
     {
       "name": "dap-ds-sidenav-group",
-      "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
+      "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **icon** - The toggle icon of the side navigation group.",
       "attributes": [
         {
           "name": "href",
@@ -3366,7 +3420,7 @@
     },
     {
       "name": "dap-ds-snackbar-message",
-      "description": "The Snackbar component shows a sliding message to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Fires when the snackbar closes.\n\n### **Slots:**\n - **default** - The content of the snackbar.\n\n### **CSS Properties:**\n - **--dds-snackbar-width** - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall))) _(default: undefined)_\n- **--dds-snackbar-gap** - Gap between snackbar elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-padding** - Padding inside the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-margin-bottom** - Bottom margin of the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-transition** - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete) _(default: undefined)_\n- **--dds-snackbar-border-radius** - Border radius of the snackbar (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-snackbar-font-size** - Font size used in the snackbar (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-snackbar-background** - Background color of the snackbar (default: var(--dds-snackbar-error-background)) _(default: undefined)_\n- **--dds-snackbar-border** - Border color of the snackbar (default: var(--dds-snackbar-error-border)) _(default: undefined)_\n- **--dds-snackbar-text** - Text color of the snackbar (default: var(--dds-snackbar-variant-text)) _(default: undefined)_\n- **--dds-snackbar-icon** - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon)) _(default: undefined)_\n- **--dds-snackbar-link** - Link color of the snackbar (default: var(--dds-snackbar-variant-link)) _(default: undefined)_\n- **--dds-snackbar-information-background** - Background color for information variant (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-snackbar-information-border** - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-information-icon** - Icon color for information variant (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-background** - Background color for success variant (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-snackbar-success-border** - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-icon** - Icon color for success variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-background** - Background color for error variant (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-snackbar-error-border** - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-icon** - Icon color for error variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-variant-text** - Text color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-icon** - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-link** - Link color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-animation-duration** - Duration of entrance animations (default: 0.3s) _(default: undefined)_\n- **--dds-snackbar-animation-timing** - Timing function for animations (default: ease-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main snackbar container.\n- **text** - The text part of the snackbar.\n- **closebutton** - The close button part of the component.\n- **icon** - The icon part of the close button.",
+      "description": "The Snackbar component shows a sliding message to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Fires when the snackbar closes.\n\n### **Slots:**\n - **default** - The content of the snackbar.\n\n### **CSS Properties:**\n - **--dds-snackbar-width** - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall))) _(default: undefined)_\n- **--dds-snackbar-gap** - Gap between snackbar elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-padding** - Padding inside the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-margin-bottom** - Bottom margin of the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-transition** - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete) _(default: undefined)_\n- **--dds-snackbar-border-radius** - Border radius of the snackbar (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-snackbar-font-size** - Font size used in the snackbar (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-snackbar-background** - Background color of the snackbar (default: var(--dds-snackbar-error-background)) _(default: undefined)_\n- **--dds-snackbar-border** - Border color of the snackbar (default: var(--dds-snackbar-error-border)) _(default: undefined)_\n- **--dds-snackbar-text** - Text color of the snackbar (default: var(--dds-snackbar-variant-text)) _(default: undefined)_\n- **--dds-snackbar-icon** - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon)) _(default: undefined)_\n- **--dds-snackbar-link** - Link color of the snackbar (default: var(--dds-snackbar-variant-link)) _(default: undefined)_\n- **--dds-snackbar-information-background** - Background color for information variant (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-snackbar-information-border** - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-information-icon** - Icon color for information variant (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-background** - Background color for success variant (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-snackbar-success-border** - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-icon** - Icon color for success variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-background** - Background color for error variant (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-snackbar-error-border** - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-icon** - Icon color for error variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-variant-text** - Text color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-icon** - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-link** - Link color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-animation-duration** - Duration of entrance animations (default: 0.3s) _(default: undefined)_\n- **--dds-snackbar-animation-timing** - Timing function for animations (default: ease-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main snackbar container.\n- **text** - The text part of the snackbar.\n- **closebutton** - The close button part of the component.\n- **close-icon** - The icon of the close button.\n- **actions** - The actions container of the snackbar.\n- **actions-base** - The base of the actions container.",
       "attributes": [
         {
           "name": "actions",
@@ -3413,7 +3467,7 @@
     },
     {
       "name": "dap-ds-snackbar",
-      "description": "The Snackbar is a container of sliding messages.\n---\n\n\n### **Methods:**\n - **show(message: _string_, options: _MessageOptionsType_): _void_** - Static method to show a snackbar message anywhere in the application\n- **success(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a success message\n- **error(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an error message\n- **info(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an information message\n- **default(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a default message\n- **closeAll(): _void_** - Static method to close all snackbar messages globally\n- **closeAll(): _void_** - Close all currently displayed messages\n\n### **CSS Properties:**\n - **--dds-snackbar-spacing** - Spacing used for positioning the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-z-index** - Z-index of the snackbar container (default: 10000) _(default: undefined)_\n- **--dds-snackbar-pointer-events** - Pointer events behavior for the snackbar (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **host** - The host element\n- **message** - The message part of the snackbar\n- **message-base** - The base part of the message\n- **message-text** - The text part of the message\n- **message-closebutton** - The close button part of the message\n- **message-close-icon** - The close icon part of the message\n- **message-actions** - The actions part of the message",
+      "description": "The Snackbar is a container of sliding messages.\n---\n\n\n### **Methods:**\n - **show(message: _string_, options: _MessageOptionsType_): _void_** - Static method to show a snackbar message anywhere in the application\n- **success(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a success message\n- **error(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an error message\n- **info(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an information message\n- **default(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a default message\n- **closeAll(): _void_** - Static method to close all snackbar messages globally\n- **closeAll(): _void_** - Close all currently displayed messages\n\n### **CSS Properties:**\n - **--dds-snackbar-spacing** - Spacing used for positioning the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-z-index** - Z-index of the snackbar container (default: 10000) _(default: undefined)_\n- **--dds-snackbar-pointer-events** - Pointer events behavior for the snackbar (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **message** - The message part of the snackbar\n- **message-base** - The base part of the message\n- **message-text** - The text part of the message\n- **message-closebutton** - The close button part of the message\n- **message-close-icon** - The close icon part of the message\n- **message-actions** - The actions part of the message",
       "attributes": [
         {
           "name": "maxItems",
@@ -3504,7 +3558,7 @@
     },
     {
       "name": "dap-ds-stack",
-      "description": "A stack is a container for stacked content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the stack.\n\n### **CSS Parts:**\n - **stack** - The main stack container.",
+      "description": "A stack is a container for stacked content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the stack.\n\n### **CSS Parts:**\n - **stack** - Alias of the base part.\n- **base** - The main stack container.",
       "attributes": [
         {
           "name": "direction",
@@ -3546,7 +3600,7 @@
     },
     {
       "name": "dap-ds-switch",
-      "description": "A switch is a graphical control element that allows the user to toggle between two states.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-blur** - Emitted when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-input** - Emitted when the input receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the switch input element.\n- **blur(): _void_** - Programmatically blurs the switch input element.\n\n### **CSS Parts:**\n - **base** - The main switch container.\n- **baselabel** - The main label container\n- **label** - The label of the switch.\n- **input** - The native input of the switch.\n- **control** - The control of the switch.\n- **description** - The description of the switch.",
+      "description": "A switch is a graphical control element that allows the user to toggle between two states.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-blur** - Emitted when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-input** - Emitted when the input receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the switch input element.\n- **blur(): _void_** - Programmatically blurs the switch input element.\n\n### **CSS Parts:**\n - **base** - The main switch container.\n- **baselabel** - The main label container\n- **label** - The label of the switch.\n- **input** - The native input of the switch.\n- **control** - The control of the switch.\n- **description** - The description of the switch.\n- **label-container** - The label container of the switch.\n- **feedback** - The feedback of the switch.\n- **high-contrast** - The high contrast indicator of the switch.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "border",
@@ -3568,7 +3622,7 @@
     },
     {
       "name": "dap-ds-tab-group",
-      "description": "A tab group component. It is used with dap-ds-tab component to create a tab group.\n---\n\n\n### **Events:**\n - **dds-tab-select** - Fired when select a new tab.\n\n### **Slots:**\n - _default_ - The tab items.\n\n### **CSS Properties:**\n - **--dds-tab-group-border-radius** - Border radius of the tab group container (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-tab-border-radius** - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0) _(default: undefined)_\n- **--dds-tab-group-border-width** - Border width of the tab navigation (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-tab-group-border-color** - Border color of the tab navigation (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tab-height-sm** - Height of small tabs (default: 40px) _(default: undefined)_\n- **--dds-tab-height-lg** - Height of large tabs (default: 50px) _(default: undefined)_\n- **--dds-tab-font-size-sm** - Font size of small tabs (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-tab-font-size-lg** - Font size of large tabs (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-tab-padding** - Padding of the tab buttons (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tab-border-width** - Border width for tabs (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-tab-selected-border-color** - Border color for selected tabs (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-tab-text-color** - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-tab-hover-text-color** - Text color for tabs on hover (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-tab-disabled-text-color** - Text color for disabled tabs (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-tab-hover-background** - Background color for tabs on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-tab-active-background** - Background color for active tabs (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container.\n- **tab-nav** - The tab navigation container.\n- **tab-content** - The tab content container.",
+      "description": "A tab group component. It is used with dap-ds-tab component to create a tab group.\n---\n\n\n### **Events:**\n - **dds-tab-select** - Fired when select a new tab.\n\n### **Slots:**\n - _default_ - The tab items.\n\n### **CSS Properties:**\n - **--dds-tab-group-border-radius** - Border radius of the tab group container (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-tab-border-radius** - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0) _(default: undefined)_\n- **--dds-tab-group-border-width** - Border width of the tab navigation (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-tab-group-border-color** - Border color of the tab navigation (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tab-height-sm** - Height of small tabs (default: 40px) _(default: undefined)_\n- **--dds-tab-height-lg** - Height of large tabs (default: 50px) _(default: undefined)_\n- **--dds-tab-font-size-sm** - Font size of small tabs (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-tab-font-size-lg** - Font size of large tabs (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-tab-padding** - Padding of the tab buttons (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tab-border-width** - Border width for tabs (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-tab-selected-border-color** - Border color for selected tabs (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-tab-text-color** - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-tab-hover-text-color** - Text color for tabs on hover (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-tab-disabled-text-color** - Text color for disabled tabs (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-tab-hover-background** - Background color for tabs on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-tab-active-background** - Background color for active tabs (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container.\n- **tab-list** - The tab list container (role=\"tablist\") holding the tab buttons.\n- **tab-nav** - The individual tab buttons.\n- **high-contrast** - The high contrast indicator inside the tab buttons.\n- **tab-group-content** - The tab content container.",
       "attributes": [
         {
           "name": "selectedTabId",
@@ -3617,7 +3671,7 @@
     },
     {
       "name": "dap-ds-table-cell",
-      "description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main cell container.",
+      "description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_",
       "attributes": [
         {
           "name": "last",
@@ -3688,7 +3742,7 @@
     },
     {
       "name": "dap-ds-table",
-      "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
+      "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **caption** - The caption of the table.",
       "attributes": [
         {
           "name": "role",
@@ -3715,7 +3769,7 @@
     },
     {
       "name": "dap-ds-textarea",
-      "description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.",
+      "description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.\n- **footer** - The footer of the textarea holding the feedback and counter.\n- **counter-container** - The container of the counter.",
       "attributes": [
         {
           "name": "hideCounter",
@@ -3784,7 +3838,7 @@
     },
     {
       "name": "dap-ds-time-grid",
-      "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
+      "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.\n- **presets-section** - The presets section.\n- **preset-button** - Individual preset buttons.\n- **second-section** - The second selection section.",
       "attributes": [
         {
           "name": "selectedHour",
@@ -3851,7 +3905,7 @@
     },
     {
       "name": "dap-ds-timepicker",
-      "description": "A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the timepicker value changes.\n- **dds-input** - Fired when the timepicker input value changes.\n- **dds-valid-time** - Fired when the timepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-time** - Fired when the timepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the timepicker is cleared.\n- **dds-focus** - Emitted when the timepicker gains focus.\n- **dds-blur** - Emitted when the timepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-timepicker-background** - The background color of the timepicker. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-timepicker-border-color** - The border color of the timepicker. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-border-width** - The border width of the timepicker. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-timepicker-border-radius** - The border radius of the timepicker. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-timepicker-text-color** - The text color of the timepicker. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-timepicker-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-timepicker-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-timepicker-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-timepicker-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-timepicker-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-timepicker-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-timepicker-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-timepicker-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-timepicker-min-width** - The minimum width of the timepicker. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timepicker container.\n- **trigger** - The trigger button of the timepicker.\n- **label** - The label of the timepicker.\n- **description** - The description of the timepicker.\n- **feedback** - The feedback of the timepicker.\n- **tooltip** - The tooltip of the timepicker.\n- **input** - The input of the timepicker.\n- **clear-button** - The clear button of the timepicker.",
+      "description": "A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the timepicker value changes.\n- **dds-input** - Fired when the timepicker input value changes.\n- **dds-valid-time** - Fired when the timepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-time** - Fired when the timepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the timepicker is cleared.\n- **dds-focus** - Emitted when the timepicker gains focus.\n- **dds-blur** - Emitted when the timepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-timepicker-background** - The background color of the timepicker. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-timepicker-border-color** - The border color of the timepicker. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-border-width** - The border width of the timepicker. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-timepicker-border-radius** - The border radius of the timepicker. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-timepicker-text-color** - The text color of the timepicker. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-timepicker-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-timepicker-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-timepicker-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-timepicker-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-timepicker-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-timepicker-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-timepicker-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-timepicker-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-timepicker-min-width** - The minimum width of the timepicker. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timepicker container.\n- **trigger** - The trigger button of the timepicker.\n- **label** - The label of the timepicker.\n- **description** - The description of the timepicker.\n- **feedback** - The feedback of the timepicker.\n- **tooltip** - The tooltip of the timepicker.\n- **input** - The input of the timepicker.\n- **clear-button** - The clear button of the timepicker.\n- **time-button** - The clock icon button of the timepicker.\n- **time-grid** - The time grid of the timepicker.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "value",
@@ -3973,7 +4027,7 @@
     },
     {
       "name": "dap-ds-toc",
-      "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
+      "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.\n- **title** - The title of the toc.\n- **nav** - The navigation element holding the links.",
       "attributes": [
         {
           "name": "root",
@@ -4048,7 +4102,7 @@
     },
     {
       "name": "dap-ds-tooltip",
-      "description": "A tooltip is a container for tooltip content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the tooltip.\n- **trigger** - The trigger element of the tooltip.\n\n### **CSS Properties:**\n - **--dds-tooltip-max-width** - The maximum width of the tooltip before its content will wrap (default: 14rem) _(default: undefined)_\n- **--dds-tooltip-padding** - The padding inside the tooltip (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tooltip-border-color** - The border color of the tooltip (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tooltip-bg-color** - The background color of the tooltip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-text-color** - The text color of the tooltip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-font-size** - The font size of the tooltip text (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-tooltip-box-shadow** - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tooltip container.\n- **trigger** - The trigger element of the tooltip.\n- **popup** - The popup of the tooltip.\n- **arrow** - The arrow of the tooltip.",
+      "description": "A tooltip is a container for tooltip content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the tooltip.\n- **trigger** - The trigger element of the tooltip.\n\n### **CSS Properties:**\n - **--dds-tooltip-max-width** - The maximum width of the tooltip before its content will wrap (default: 14rem) _(default: undefined)_\n- **--dds-tooltip-padding** - The padding inside the tooltip (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tooltip-border-color** - The border color of the tooltip (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tooltip-bg-color** - The background color of the tooltip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-text-color** - The text color of the tooltip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-font-size** - The font size of the tooltip text (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-tooltip-box-shadow** - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tooltip container.\n- **trigger** - The trigger element of the tooltip.\n- **popup** - The popup of the tooltip.\n- **arrow** - The arrow of the tooltip.\n- **base__popup** - Alias of the popup part.\n- **base__arrow** - Alias of the arrow part.",
       "attributes": [
         {
           "name": "content",
@@ -4105,7 +4159,7 @@
     },
     {
       "name": "dap-ds-tray",
-      "description": "A tray is a container for slide in content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the tray opens.\n- **dds-opened** - Fires after the tray opens.\n- **dds-before-close** - Fires before the tray closes.\n- **dds-closed** - Fires after the tray closed.\n- **dds-close** - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n\n### **CSS Properties:**\n - **--dds-modal-max-block-size** - Maximum height of the modal. (default: 80vh) _(default: undefined)_\n- **--dds-modal-max-inline-size** - Maximum width of the modal. (default: 600px) _(default: undefined)_\n- **--dds-modal-padding-sm** - Padding inside the modal. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-padding-lg** - Padding inside the modal. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-modal-transform-amount** - Amount to transform for entrance animation. (default: 2rem) _(default: undefined)_\n- **--dds-modal-transition-speed** - Speed of transition animations. (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-modal-transition-timing** - Timing function for transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-modal-border-width** - Border width of the modal. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-modal-border-color** - Border color of the modal. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-modal-border-radius** - Border radius of the modal. (default: var(--dds-radius-large, 16px)) _(default: undefined)_\n- **--dds-modal-background** - Background color of the modal. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-modal-header-margin-sm** - Margin below the header. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-header-margin-lg** - Margin below the header. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-margin-sm** - Margin above the footer. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-footer-margin-lg** - Margin above the footer. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-gap** - Gap between footer elements. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-tray-width-side** - Width of the side (left/right) trays. (default: 250px) _(default: undefined)_\n- **--dds-tray-min-width-horizontal** - Minimum width of the horizontal (top/bottom) trays. (default: 400px) _(default: undefined)_\n- **--dds-tray-min-height-horizontal** - Minimum height of the horizontal (top/bottom) trays. (default: 300px) _(default: undefined)_\n- **--dds-tray-min-height-vertical** - Minimum height of the vertical (left/right) trays. (default: 100%) _(default: undefined)_\n- **--dds-tray-transform-duration** - Duration of the transform animation. (default: 0.3s) _(default: undefined)_\n- **--dds-tray-transform-timing** - Timing function for the transform animation. (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tray container.\n- **panel** - The panel of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n- **content** - The content of the tray.\n- **body** - The body of the tray.",
+      "description": "A tray is a container for slide in content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the tray opens.\n- **dds-opened** - Fires after the tray opens.\n- **dds-before-close** - Fires before the tray closes.\n- **dds-closed** - Fires after the tray closed.\n- **dds-close** - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n\n### **CSS Properties:**\n - **--dds-modal-max-block-size** - Maximum height of the modal. (default: 80vh) _(default: undefined)_\n- **--dds-modal-max-inline-size** - Maximum width of the modal. (default: 600px) _(default: undefined)_\n- **--dds-modal-padding-sm** - Padding inside the modal. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-padding-lg** - Padding inside the modal. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-modal-transform-amount** - Amount to transform for entrance animation. (default: 2rem) _(default: undefined)_\n- **--dds-modal-transition-speed** - Speed of transition animations. (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-modal-transition-timing** - Timing function for transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-modal-border-width** - Border width of the modal. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-modal-border-color** - Border color of the modal. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-modal-border-radius** - Border radius of the modal. (default: var(--dds-radius-large, 16px)) _(default: undefined)_\n- **--dds-modal-background** - Background color of the modal. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-modal-header-margin-sm** - Margin below the header. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-header-margin-lg** - Margin below the header. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-margin-sm** - Margin above the footer. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-footer-margin-lg** - Margin above the footer. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-gap** - Gap between footer elements. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-tray-width-side** - Width of the side (left/right) trays. (default: 250px) _(default: undefined)_\n- **--dds-tray-min-width-horizontal** - Minimum width of the horizontal (top/bottom) trays. (default: 400px) _(default: undefined)_\n- **--dds-tray-min-height-horizontal** - Minimum height of the horizontal (top/bottom) trays. (default: 300px) _(default: undefined)_\n- **--dds-tray-min-height-vertical** - Minimum height of the vertical (left/right) trays. (default: 100%) _(default: undefined)_\n- **--dds-tray-transform-duration** - Duration of the transform animation. (default: 0.3s) _(default: undefined)_\n- **--dds-tray-transform-timing** - Timing function for the transform animation. (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tray container.\n- **panel** - The panel of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n- **content** - The content of the tray.\n- **header-container** - The container of the header.\n- **title** - The title of the tray.\n- **description** - The description of the tray.\n- **closebutton** - The close button of the tray.",
       "attributes": [
         {
           "name": "placement",
@@ -4184,7 +4238,7 @@
     },
     {
       "name": "dap-ds-form-label",
-      "description": "A form label is a container for labels in a form.\n---\n\n\n### **CSS Properties:**\n - **--dds-form-label-font-weight** - Font weight of the label. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-form-label-line-height** - Line height of the label. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-form-label-color** - Text color of the label. (default: var(--dds-text-neutral-enabled)) _(default: undefined)_\n- **--dds-form-label-disabled-color** - Text color when the label is disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-form-label-required-color** - Color of the required indicator. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-form-label-optional-color** - Color of the optional indicator. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-form-label-margin-bottom** - Bottom margin of the label. (default: var(--dds-spacing-200)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main form label container.\n- **required** - The required indicator of the form label.\n- **optional** - The optional indicator of the form label.",
+      "description": "A form label is a container for labels in a form.\n---\n\n\n### **CSS Properties:**\n - **--dds-form-label-font-weight** - Font weight of the label. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-form-label-line-height** - Line height of the label. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-form-label-color** - Text color of the label. (default: var(--dds-text-neutral-enabled)) _(default: undefined)_\n- **--dds-form-label-disabled-color** - Text color when the label is disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-form-label-required-color** - Color of the required indicator. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-form-label-optional-color** - Color of the optional indicator. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-form-label-margin-bottom** - Bottom margin of the label. (default: var(--dds-spacing-200)) _(default: undefined)_\n\n### **CSS Parts:**\n - **required** - The required indicator of the form label.\n- **optional** - The optional indicator of the form label.\n- **label-base** - The label element.",
       "attributes": [
         {
           "name": "for",
@@ -4211,7 +4265,7 @@
     },
     {
       "name": "dap-ds-input-group",
-      "description": "An input group is a container for inputs.\n---\n\n\n### **Slots:**\n - _default_ - The content of the input group items.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main input group container.\n- **label** - The label of the input group.\n- **description** - The description of the input group.\n- **tooltip** - The tooltip of the input group.\n- **container** - The container of the input group items.",
+      "description": "An input group is a container for inputs.\n---\n\n\n### **Slots:**\n - _default_ - The content of the input group items.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main input group container.\n- **label** - The label of the input group.\n- **description** - The description of the input group.\n- **tooltip** - The tooltip of the input group.\n- **container** - The container of the input group items.\n- **feedback** - The feedback of the input group.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [],
       "references": [
         {
@@ -4222,7 +4276,7 @@
     },
     {
       "name": "dap-ds-radio-group",
-      "description": "A radio group is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio group is checked.\n- **dds-blur** - Emitted when the radio group loses focus.\n- **dds-focus** - Emitted when the radio group gains focus.\n\n### **Slots:**\n - _default_ - The content of the radio group.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main radio group container.\n- **label** - The label of the radio group.\n- **tooltip** - The tooltip of the radio group.\n- **container** - The container of the radio group items.",
+      "description": "A radio group is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio group is checked.\n- **dds-blur** - Emitted when the radio group loses focus.\n- **dds-focus** - Emitted when the radio group gains focus.\n\n### **Slots:**\n - _default_ - The content of the radio group.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main radio group container.\n- **label** - The label of the radio group.\n- **tooltip** - The tooltip of the radio group.\n- **container** - The container of the radio group items.\n- **description** - The description of the radio group.\n- **feedback** - The feedback of the radio group.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
       "attributes": [
         {
           "name": "tooltipPlacement",