dap-design-system 0.62.4 → 0.63.0

package/dist/manifest/web-types.json

@@ -6,48 +6,9 @@
   "contributions": {
     "html": {
       "elements": [
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "autoClose",
-              "description": "Whether to close other accordions when one is opened.",
-              "value": { "type": "string", "default": "'true'" }
-            },
-            {
-              "name": "variant",
-              "description": "The variant of the accordion",
-              "value": {
-                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
-                "default": "'default'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the accordion group." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "autoClose",
-                "description": "Whether to close other accordions when one is opened.",
-                "type": "string"
-              },
-              {
-                "name": "variant",
-                "description": "The variant of the accordion",
-                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -154,7 +115,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -180,107 +141,264 @@
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "layout",
-              "description": "Layout type for the avatar group",
-              "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
+              "name": "type",
+              "description": "The type of the badge",
+              "value": {
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
+                "default": "'neutral'"
+              }
             },
             {
-              "name": "max",
-              "description": "Maximum number of avatars to show before showing overflow",
-              "value": { "type": "number", "default": "3" }
+              "name": "icon",
+              "description": "The icon of the badge, this is a name of a built in icon",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "show-total",
-              "description": "Whether to show the total count in overflow indicator",
+              "name": "live",
+              "description": "Whether the badge represents dynamic content that should announce changes",
               "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the badge." },
+            { "name": "icon", "description": "The icon of the badge." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The type of the badge",
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
+              },
+              {
+                "name": "icon",
+                "description": "The icon of the badge, this is a name of a built in icon",
+                "type": "string | undefined"
+              },
+              {
+                "name": "live",
+                "description": "Whether the badge represents dynamic content that should announce changes",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The size of the badge. Default is `sm`.",
+                "type": "'sm' | 'lg'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "shape",
+              "description": "The shape of the avatar",
+              "value": {
+                "type": "'circle' | 'rounded' | 'square'",
+                "default": "'circle'"
+              }
             },
             {
-              "name": "interactive-overflow",
-              "description": "Interactive overflow indicator",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "variant",
+              "description": "The variant type of the avatar",
+              "value": {
+                "type": "'image' | 'initials' | 'icon'",
+                "default": "'image'"
+              }
             },
             {
-              "name": "label",
-              "description": "Accessible label for the avatar group",
+              "name": "src",
+              "description": "The source of the avatar image",
               "value": { "type": "string" }
             },
             {
-              "name": "overflow-label",
-              "description": "Accessible label for the overflow indicator",
+              "name": "alt",
+              "description": "The alt text of the avatar",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "initials",
+              "description": "The initials to display when variant is 'initials'",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible label for the avatar",
               "value": { "type": "string" }
+            },
+            {
+              "name": "loading",
+              "description": "Loading state indicator",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "interactive",
+              "description": "Whether the avatar is interactive (clickable)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "The width of the avatar. This will override the size",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "height",
+              "description": "The height of the avatar. This will override the size",
+              "value": { "type": "number" }
             }
           ],
           "slots": [
             {
-              "name": "",
-              "description": "The avatars to display in the group."
+              "name": "icon",
+              "description": "The icon to display when variant is 'icon'."
+            },
+            {
+              "name": "fallback",
+              "description": "Custom fallback content when image fails to load."
             }
           ],
           "events": [
             {
-              "name": "dds-overflow-click",
-              "description": "Fired when the overflow indicator is clicked."
+              "name": "dds-load",
+              "description": "Fired when the image loads successfully."
+            },
+            {
+              "name": "dds-error",
+              "description": "Fired when the image fails to load."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "layout",
-                "description": "Layout type for the avatar group",
-                "type": "'stack' | 'grid'"
+                "name": "shape",
+                "description": "The shape of the avatar",
+                "type": "'circle' | 'rounded' | 'square'"
               },
               {
-                "name": "max",
-                "description": "Maximum number of avatars to show before showing overflow",
-                "type": "number"
+                "name": "variant",
+                "description": "The variant type of the avatar",
+                "type": "'image' | 'initials' | 'icon'"
               },
               {
-                "name": "showTotal",
-                "description": "Whether to show the total count in overflow indicator",
-                "type": "boolean"
+                "name": "src",
+                "description": "The source of the avatar image",
+                "type": "string"
               },
               {
-                "name": "interactiveOverflow",
-                "description": "Interactive overflow indicator",
-                "type": "boolean"
+                "name": "alt",
+                "description": "The alt text of the avatar",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "Accessible label for the avatar group",
+                "name": "initials",
+                "description": "The initials to display when variant is 'initials'",
                 "type": "string"
               },
               {
-                "name": "overflowLabel",
-                "description": "Accessible label for the overflow indicator",
+                "name": "label",
+                "description": "Accessible label for the avatar",
                 "type": "string"
               },
+              {
+                "name": "loading",
+                "description": "Loading state indicator",
+                "type": "boolean"
+              },
+              {
+                "name": "interactive",
+                "description": "Whether the avatar is interactive (clickable)",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "The width of the avatar. This will override the size",
+                "type": "number"
+              },
+              {
+                "name": "height",
+                "description": "The height of the avatar. This will override the size",
+                "type": "number"
+              },
               {
                 "name": "size",
-                "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
+                "description": "The size of the avatar. Default is `md`.",
                 "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
               },
               {
                 "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
+                "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
               }
             ],
             "events": [
               {
-                "name": "dds-overflow-click",
-                "description": "Fired when the overflow indicator is clicked."
+                "name": "dds-load",
+                "description": "Fired when the image loads successfully."
+              },
+              {
+                "name": "dds-error",
+                "description": "Fired when the image fails to load."
               }
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "autoClose",
+              "description": "Whether to close other accordions when one is opened.",
+              "value": { "type": "string", "default": "'true'" }
+            },
+            {
+              "name": "variant",
+              "description": "The variant of the accordion",
+              "value": {
+                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
+                "default": "'default'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the accordion group." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoClose",
+                "description": "Whether to close other accordions when one is opened.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "description": "The variant of the accordion",
+                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -373,7 +491,7 @@
         },
         {
           "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -417,136 +535,175 @@
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "href",
-              "description": "The URL of the breadcrumb item.",
-              "value": { "type": "string | undefined" }
+              "name": "layout",
+              "description": "Layout type for the avatar group",
+              "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
             },
             {
-              "name": "target",
-              "description": "The target of the breadcrumb item.",
-              "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
+              "name": "max",
+              "description": "Maximum number of avatars to show before showing overflow",
+              "value": { "type": "number", "default": "3" }
             },
             {
-              "name": "rel",
-              "description": "The rel of the breadcrumb item link.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
+              "name": "show-total",
+              "description": "Whether to show the total count in overflow indicator",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Whether the breadcrumb item is disabled.",
+              "name": "interactive-overflow",
+              "description": "Interactive overflow indicator",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "variant",
-              "description": "The variant of the breadcrumb item.",
-              "value": {
-                "type": "'normal' | 'inverted'",
-                "default": "'normal'"
-              }
+              "name": "label",
+              "description": "Accessible label for the avatar group",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "overflow-label",
+              "description": "Accessible label for the overflow indicator",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The content of the breadcrumb item."
-            },
+              "description": "The avatars to display in the group."
+            }
+          ],
+          "events": [
             {
-              "name": "separator",
-              "description": "The separator between breadcrumb items. Default is an arrow-right-s-line icon."
+              "name": "dds-overflow-click",
+              "description": "Fired when the overflow indicator is clicked."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "href",
-                "description": "The URL of the breadcrumb item.",
-                "type": "string | undefined"
+                "name": "layout",
+                "description": "Layout type for the avatar group",
+                "type": "'stack' | 'grid'"
               },
               {
-                "name": "target",
-                "description": "The target of the breadcrumb item.",
-                "type": "'_blank' | '_self' | '_parent' | '_top'"
+                "name": "max",
+                "description": "Maximum number of avatars to show before showing overflow",
+                "type": "number"
               },
               {
-                "name": "rel",
-                "description": "The rel of the breadcrumb item link.",
-                "type": "string"
+                "name": "showTotal",
+                "description": "Whether to show the total count in overflow indicator",
+                "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Whether the breadcrumb item is disabled.",
+                "name": "interactiveOverflow",
+                "description": "Interactive overflow indicator",
                 "type": "boolean"
               },
               {
-                "name": "variant",
-                "description": "The variant of the breadcrumb item.",
-                "type": "'normal' | 'inverted'"
+                "name": "label",
+                "description": "Accessible label for the avatar group",
+                "type": "string"
+              },
+              {
+                "name": "overflowLabel",
+                "description": "Accessible label for the overflow indicator",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
+                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
+                "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "dds-overflow-click",
+                "description": "Fired when the overflow indicator is clicked."
+              }
+            ]
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "type",
-              "description": "The type of the badge",
-              "value": {
-                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
-                "default": "'neutral'"
-              }
+              "name": "href",
+              "description": "The URL of the breadcrumb item.",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "icon",
-              "description": "The icon of the badge, this is a name of a built in icon",
-              "value": { "type": "string | undefined" }
+              "name": "target",
+              "description": "The target of the breadcrumb item.",
+              "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
             },
             {
-              "name": "live",
-              "description": "Whether the badge represents dynamic content that should announce changes",
+              "name": "rel",
+              "description": "The rel of the breadcrumb item link.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the breadcrumb item is disabled.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "The variant of the breadcrumb item.",
+              "value": {
+                "type": "'normal' | 'inverted'",
+                "default": "'normal'"
+              }
             }
           ],
           "slots": [
-            { "name": "", "description": "The content of the badge." },
-            { "name": "icon", "description": "The icon of the badge." }
+            {
+              "name": "",
+              "description": "The content of the breadcrumb item."
+            },
+            {
+              "name": "separator",
+              "description": "The separator between breadcrumb items. Default is an arrow-right-s-line icon."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "type",
-                "description": "The type of the badge",
-                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
+                "name": "href",
+                "description": "The URL of the breadcrumb item.",
+                "type": "string | undefined"
               },
               {
-                "name": "icon",
-                "description": "The icon of the badge, this is a name of a built in icon",
-                "type": "string | undefined"
+                "name": "target",
+                "description": "The target of the breadcrumb item.",
+                "type": "'_blank' | '_self' | '_parent' | '_top'"
               },
               {
-                "name": "live",
-                "description": "Whether the badge represents dynamic content that should announce changes",
-                "type": "boolean"
+                "name": "rel",
+                "description": "The rel of the breadcrumb item link.",
+                "type": "string"
               },
               {
-                "name": "size",
-                "description": "The size of the badge. Default is `sm`.",
-                "type": "'sm' | 'lg'"
+                "name": "disabled",
+                "description": "Whether the breadcrumb item is disabled.",
+                "type": "boolean"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
+                "name": "variant",
+                "description": "The variant of the breadcrumb item.",
+                "type": "'normal' | 'inverted'"
               }
             ],
             "events": []
@@ -731,140 +888,6 @@
             ]
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The variant of the callout",
-              "value": {
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
-                "default": "'brand'"
-              }
-            },
-            {
-              "name": "alignment",
-              "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
-              "value": {
-                "type": "'vertical' | 'horizontal'",
-                "default": "'horizontal'"
-              }
-            },
-            {
-              "name": "shade",
-              "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
-              "value": {
-                "type": "'subtle' | 'base' | 'medium' | 'strong'",
-                "default": "'base'"
-              }
-            },
-            {
-              "name": "noBorder",
-              "description": "If the callout has a border",
-              "value": { "type": "string", "default": "'true'" }
-            },
-            {
-              "name": "closeable",
-              "description": "If the callout has a close button",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "title",
-              "description": "The header of the callout",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "closeButtonLabel",
-              "description": "The label of the close button",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "closeButtonTestId",
-              "description": "`data-testid` for the default close button.",
-              "value": { "type": "string", "default": "'callout-close-button'" }
-            },
-            {
-              "name": "opened",
-              "description": "If the callout is opened",
-              "value": { "type": "string", "default": "'true'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the callout." },
-            { "name": "title", "description": "The title of the callout." },
-            { "name": "icon", "description": "The icon of the callout." },
-            { "name": "actions", "description": "The actions of the callout." },
-            {
-              "name": "close",
-              "description": "The close button of the callout."
-            }
-          ],
-          "events": [
-            {
-              "name": "dds-close",
-              "type": "{ void }",
-              "description": "Fired when the close button is clicked."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The variant of the callout",
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
-              },
-              {
-                "name": "alignment",
-                "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
-                "type": "'vertical' | 'horizontal'"
-              },
-              {
-                "name": "shade",
-                "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
-                "type": "'subtle' | 'base' | 'medium' | 'strong'"
-              },
-              {
-                "name": "noBorder",
-                "description": "If the callout has a border",
-                "type": "string"
-              },
-              {
-                "name": "closeable",
-                "description": "If the callout has a close button",
-                "type": "boolean"
-              },
-              {
-                "name": "title",
-                "description": "The header of the callout",
-                "type": "string"
-              },
-              {
-                "name": "closeButtonLabel",
-                "description": "The label of the close button",
-                "type": "string"
-              },
-              {
-                "name": "closeButtonTestId",
-                "description": "`data-testid` for the default close button.",
-                "type": "string"
-              },
-              {
-                "name": "opened",
-                "description": "If the callout is opened",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "dds-close",
-                "type": "{ void }",
-                "description": "Fired when the close button is clicked."
-              }
-            ]
-          }
-        },
         {
           "name": "dap-ds-calendar-cell",
           "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
@@ -993,7 +1016,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1111,158 +1134,189 @@
           }
         },
         {
-          "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-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)_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The text content. Can also hold an icon or a `<label>` for a grouped input."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "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)_",
           "doc-url": "",
           "attributes": [
             {
-              "name": "shape",
-              "description": "The shape of the avatar",
+              "name": "orientation",
+              "description": "The layout direction of the group",
               "value": {
-                "type": "'circle' | 'rounded' | 'square'",
-                "default": "'circle'"
+                "type": "ButtonGroupOrientation",
+                "default": "'horizontal'"
               }
-            },
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "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."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "The layout direction of the group",
+                "type": "ButtonGroupOrientation"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
             {
               "name": "variant",
-              "description": "The variant type of the avatar",
+              "description": "The variant of the callout",
               "value": {
-                "type": "'image' | 'initials' | 'icon'",
-                "default": "'image'"
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
+                "default": "'brand'"
               }
             },
             {
-              "name": "src",
-              "description": "The source of the avatar image",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "alt",
-              "description": "The alt text of the avatar",
-              "value": { "type": "string" }
+              "name": "alignment",
+              "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+              "value": {
+                "type": "'vertical' | 'horizontal'",
+                "default": "'horizontal'"
+              }
             },
             {
-              "name": "initials",
-              "description": "The initials to display when variant is 'initials'",
-              "value": { "type": "string" }
+              "name": "shade",
+              "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+              "value": {
+                "type": "'subtle' | 'base' | 'medium' | 'strong'",
+                "default": "'base'"
+              }
             },
             {
-              "name": "label",
-              "description": "Accessible label for the avatar",
-              "value": { "type": "string" }
+              "name": "noBorder",
+              "description": "If the callout has a border",
+              "value": { "type": "string", "default": "'true'" }
             },
             {
-              "name": "loading",
-              "description": "Loading state indicator",
+              "name": "closeable",
+              "description": "If the callout has a close button",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "interactive",
-              "description": "Whether the avatar is interactive (clickable)",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "title",
+              "description": "The header of the callout",
+              "value": { "type": "string" }
             },
             {
-              "name": "width",
-              "description": "The width of the avatar. This will override the size",
-              "value": { "type": "number" }
+              "name": "closeButtonLabel",
+              "description": "The label of the close button",
+              "value": { "type": "string" }
             },
             {
-              "name": "height",
-              "description": "The height of the avatar. This will override the size",
-              "value": { "type": "number" }
+              "name": "closeButtonTestId",
+              "description": "`data-testid` for the default close button.",
+              "value": { "type": "string", "default": "'callout-close-button'" }
+            },
+            {
+              "name": "opened",
+              "description": "If the callout is opened",
+              "value": { "type": "string", "default": "'true'" }
             }
           ],
           "slots": [
+            { "name": "", "description": "The content of the callout." },
+            { "name": "title", "description": "The title of the callout." },
+            { "name": "icon", "description": "The icon of the callout." },
+            { "name": "actions", "description": "The actions of the callout." },
             {
-              "name": "icon",
-              "description": "The icon to display when variant is 'icon'."
-            },
-            {
-              "name": "fallback",
-              "description": "Custom fallback content when image fails to load."
+              "name": "close",
+              "description": "The close button of the callout."
             }
           ],
           "events": [
             {
-              "name": "dds-load",
-              "description": "Fired when the image loads successfully."
-            },
-            {
-              "name": "dds-error",
-              "description": "Fired when the image fails to load."
+              "name": "dds-close",
+              "type": "{ void }",
+              "description": "Fired when the close button is clicked."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "shape",
-                "description": "The shape of the avatar",
-                "type": "'circle' | 'rounded' | 'square'"
-              },
               {
                 "name": "variant",
-                "description": "The variant type of the avatar",
-                "type": "'image' | 'initials' | 'icon'"
-              },
-              {
-                "name": "src",
-                "description": "The source of the avatar image",
-                "type": "string"
+                "description": "The variant of the callout",
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
               },
               {
-                "name": "alt",
-                "description": "The alt text of the avatar",
-                "type": "string"
+                "name": "alignment",
+                "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+                "type": "'vertical' | 'horizontal'"
               },
               {
-                "name": "initials",
-                "description": "The initials to display when variant is 'initials'",
-                "type": "string"
+                "name": "shade",
+                "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+                "type": "'subtle' | 'base' | 'medium' | 'strong'"
               },
               {
-                "name": "label",
-                "description": "Accessible label for the avatar",
+                "name": "noBorder",
+                "description": "If the callout has a border",
                 "type": "string"
               },
               {
-                "name": "loading",
-                "description": "Loading state indicator",
-                "type": "boolean"
-              },
-              {
-                "name": "interactive",
-                "description": "Whether the avatar is interactive (clickable)",
+                "name": "closeable",
+                "description": "If the callout has a close button",
                 "type": "boolean"
               },
               {
-                "name": "width",
-                "description": "The width of the avatar. This will override the size",
-                "type": "number"
+                "name": "title",
+                "description": "The header of the callout",
+                "type": "string"
               },
               {
-                "name": "height",
-                "description": "The height of the avatar. This will override the size",
-                "type": "number"
+                "name": "closeButtonLabel",
+                "description": "The label of the close button",
+                "type": "string"
               },
               {
-                "name": "size",
-                "description": "The size of the avatar. Default is `md`.",
-                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
+                "name": "closeButtonTestId",
+                "description": "`data-testid` for the default close button.",
+                "type": "string"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
+                "name": "opened",
+                "description": "If the callout is opened",
                 "type": "string"
               }
             ],
             "events": [
               {
-                "name": "dds-load",
-                "description": "Fired when the image loads successfully."
-              },
-              {
-                "name": "dds-error",
-                "description": "Fired when the image fails to load."
+                "name": "dds-close",
+                "type": "{ void }",
+                "description": "Fired when the close button is clicked."
               }
             ]
           }
@@ -1488,7 +1542,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1605,7 +1659,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1810,7 +1864,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1940,7 +1994,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -2118,7 +2172,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.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -2245,7 +2299,7 @@
               },
               {
                 "name": "searchMode",
-                "description": "The search mode of the select.",
+                "description": "The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode.",
                 "type": "'none' | 'typehead' | 'autocomplete' | 'manual'"
               },
               {
@@ -2253,6 +2307,16 @@
                 "description": "Whether the combobox should open on empty results.",
                 "type": "boolean"
               },
+              {
+                "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.",
+                "type": "DapDSOptionData[]"
+              },
+              {
+                "name": "renderOption",
+                "description": "Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text.",
+                "type": "DapDSOptionRenderer"
+              },
               {
                 "name": "allowManualInput",
                 "description": "Whether the combobox allows manual input, or free text.",
@@ -2491,7 +2555,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -2750,7 +2814,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -2993,7 +3057,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -3518,7 +3582,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -4049,7 +4113,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -4415,7 +4479,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -5059,7 +5123,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -5762,7 +5826,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -6480,7 +6544,7 @@
               { "name": "hasContent", "type": "boolean" },
               {
                 "name": "hasNestedItems",
-                "description": "Computed property to detect if this item contains nested navigation menu items.",
+                "description": "Computed property to detect if this item contains nested navigation menu items.\n\nBacked by state (populated in `_updateNestedItems`) rather than a live\n`querySelectorAll` so it is SSR-safe: the `@lit-labs/ssr` element shim has no\n`querySelectorAll`, and reading it from `render()` would both throw on the\nserver and structurally diverge from the client hydration render (the expand\nindicator span). Starts `false` (matching `hasContent`) so server and client\nhydration renders agree; the real value is resolved in `firstUpdated`.",
                 "type": "boolean"
               },
               {
@@ -6706,7 +6770,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -7001,7 +7065,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.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -7124,7 +7188,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -7219,7 +7283,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -7255,6 +7319,11 @@
               "description": "Whether the option list items are selectable, whether it shows the selected icon",
               "value": { "type": "string", "default": "'true'" }
             },
+            {
+              "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.",
+              "value": { "type": "DapDSOptionData[]" }
+            },
             {
               "name": "multiselectable",
               "description": "Whether multiple options can be selected; exposed as aria-multiselectable on the listbox.",
@@ -7272,8 +7341,8 @@
             },
             {
               "name": "dds-option-change",
-              "type": "{ option: DapDSOptionItem, value: string, index: number, text: string }",
-              "description": "Fired when the option list value changes."
+              "type": "{ option: DapDSOptionItem, value: string, index: number, text: string, item?: DapDSOptionData }",
+              "description": "Fired when the option list value changes. `item` is set when the options come from `items`."
             },
             {
               "name": "dds-keydown",
@@ -7318,6 +7387,16 @@
                 "description": "Whether the option list items are selectable, whether it shows the selected icon",
                 "type": "string"
               },
+              {
+                "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.",
+                "type": "DapDSOptionData[]"
+              },
+              {
+                "name": "renderOption",
+                "description": "Renders the content of each option given in `items`. Defaults to the item's `label` as text. Must not render interactive elements, and should include the label text (it is the option's accessible name).",
+                "type": "DapDSOptionRenderer"
+              },
               {
                 "name": "multiselectable",
                 "description": "Whether multiple options can be selected; exposed as aria-multiselectable on the listbox.",
@@ -7339,8 +7418,8 @@
               },
               {
                 "name": "dds-option-change",
-                "type": "{ option: DapDSOptionItem, value: string, index: number, text: string }",
-                "description": "Fired when the option list value changes."
+                "type": "{ option: DapDSOptionItem, value: string, index: number, text: string, item?: DapDSOptionData }",
+                "description": "Fired when the option list value changes. `item` is set when the options come from `items`."
               },
               {
                 "name": "dds-keydown",
@@ -7655,7 +7734,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -7844,229 +7923,111 @@
           ],
           "events": [
             {
-              "name": "dds-opened",
-              "type": "{ void }",
-              "description": "Fired when the popup is opened."
-            },
-            {
-              "name": "dds-closed",
-              "type": "{ void }",
-              "description": "Fired when the popup is closed."
-            },
-            {
-              "name": "dds-close",
-              "type": "{ void }",
-              "description": "Fired when the popup should be closed."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "The size of the popup.",
-                "type": "'xs' | 'sm' | 'lg'"
-              },
-              {
-                "name": "disabled",
-                "description": "The disabled state of the popup.",
-                "type": "boolean"
-              },
-              {
-                "name": "opened",
-                "description": "The open state of the popup.",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The placement of the popup.",
-                "type": "'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'"
-              },
-              {
-                "name": "floatingStrategy",
-                "description": "The floating strategy of the popup.",
-                "type": "'absolute' | 'fixed'"
-              },
-              {
-                "name": "offset",
-                "description": "The offset of the popup.",
-                "type": "number"
-              },
-              {
-                "name": "sync",
-                "description": "Whether the popup should sync its width with the trigger.",
-                "type": "boolean"
-              },
-              {
-                "name": "maxHeight",
-                "description": "The maximum height of the popup.",
-                "type": "number | 'auto'"
-              },
-              {
-                "name": "maxWidth",
-                "description": "The maximum width of the popup.",
-                "type": "number | 'auto'"
-              },
-              {
-                "name": "hasArrow",
-                "description": "Whether the popup has an arrow.",
-                "type": "boolean"
-              },
-              {
-                "name": "overflow",
-                "description": "Whether the popup should overflow.",
-                "type": "boolean"
-              },
-              {
-                "name": "fullWidth",
-                "description": "Whether the popup should take full width of the screen.",
-                "type": "boolean"
-              },
-              {
-                "name": "disableViewportAutoClose",
-                "description": "Keep popup open when trigger leaves viewport.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "dds-opened",
-                "type": "{ void }",
-                "description": "Fired when the popup is opened."
-              },
-              {
-                "name": "dds-closed",
-                "type": "{ void }",
-                "description": "Fired when the popup is closed."
-              },
-              {
-                "name": "dds-close",
-                "type": "{ void }",
-                "description": "Fired when the popup should be closed."
-              }
-            ]
-          }
-        },
-        {
-          "name": "dap-ds-progress",
-          "description": "Progress indicator component with linear and circular variants.\n---\n\n\n### **Slots:**\n - **label** - Custom label content for the progress indicator.\n\n### **CSS Properties:**\n - **--dds-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-progress-fill-color-neutral** - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-progress-fill-color-brand** - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-negative** - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-positive** - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-inverted** - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-progress-height-xs** - Height for extra small linear progress (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-progress-height-sm** - Height for small linear progress (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-progress-height-md** - Height for medium linear progress (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-progress-height-lg** - Height for large linear progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-height-xl** - Height for extra large linear progress (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-progress-height-xxl** - Height for extra extra large linear progress (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-progress-diameter-xs** - Diameter for extra small circular progress (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-progress-diameter-sm** - Diameter for small circular progress (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-progress-diameter-md** - Diameter for medium circular progress (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-progress-diameter-lg** - Diameter for large circular progress (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-progress-diameter-xl** - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-progress-diameter-xxl** - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-progress-stroke-width** - Stroke width for circular progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-animation-duration** - Duration of indeterminate animation (default: 1.5s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill (bar for linear, circle for circular).\n- **label** - The progress label text.\n- **percentage** - The percentage text (circular variant only).\n- **background** - The background circle (circular variant only).",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The variant of the progress indicator.",
-              "value": {
-                "type": "\"linear\" | \"circular\"",
-                "default": "'linear'"
-              }
-            },
-            {
-              "name": "color",
-              "description": "The color variant of the progress indicator.",
-              "value": {
-                "type": "\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"",
-                "default": "'brand'"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Current progress value (0-100 for percentage, or 0-max).",
-              "value": { "type": "number | undefined" }
-            },
-            {
-              "name": "max",
-              "description": "Maximum value for the progress indicator.",
-              "value": { "type": "number", "default": "100" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "Whether to show the progress as indeterminate (loading animation).",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "showPercentage",
-              "description": "Whether to show percentage text in the center (circular variant only).",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "Label text for the progress indicator.",
-              "value": { "type": "string | undefined" }
+              "name": "dds-opened",
+              "type": "{ void }",
+              "description": "Fired when the popup is opened."
             },
             {
-              "name": "aria-live",
-              "description": "The aria-live politeness level for screen readers.",
-              "value": {
-                "type": "\"polite\" | \"assertive\" | \"off\"",
-                "default": "'polite'"
-              }
-            }
-          ],
-          "slots": [
+              "name": "dds-closed",
+              "type": "{ void }",
+              "description": "Fired when the popup is closed."
+            },
             {
-              "name": "label",
-              "description": "Custom label content for the progress indicator."
+              "name": "dds-close",
+              "type": "{ void }",
+              "description": "Fired when the popup should be closed."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "variant",
-                "description": "The variant of the progress indicator.",
-                "type": "\"linear\" | \"circular\""
+                "name": "size",
+                "description": "The size of the popup.",
+                "type": "'xs' | 'sm' | 'lg'"
               },
               {
-                "name": "color",
-                "description": "The color variant of the progress indicator.",
-                "type": "\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\""
+                "name": "disabled",
+                "description": "The disabled state of the popup.",
+                "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "Current progress value (0-100 for percentage, or 0-max).",
-                "type": "number | undefined"
+                "name": "opened",
+                "description": "The open state of the popup.",
+                "type": "boolean"
               },
               {
-                "name": "max",
-                "description": "Maximum value for the progress indicator.",
+                "name": "placement",
+                "description": "The placement of the popup.",
+                "type": "'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'"
+              },
+              {
+                "name": "floatingStrategy",
+                "description": "The floating strategy of the popup.",
+                "type": "'absolute' | 'fixed'"
+              },
+              {
+                "name": "offset",
+                "description": "The offset of the popup.",
                 "type": "number"
               },
               {
-                "name": "indeterminate",
-                "description": "Whether to show the progress as indeterminate (loading animation).",
+                "name": "sync",
+                "description": "Whether the popup should sync its width with the trigger.",
                 "type": "boolean"
               },
               {
-                "name": "showPercentage",
-                "description": "Whether to show percentage text in the center (circular variant only).",
-                "type": "boolean"
+                "name": "maxHeight",
+                "description": "The maximum height of the popup.",
+                "type": "number | 'auto'"
               },
               {
-                "name": "label",
-                "description": "Label text for the progress indicator.",
-                "type": "string | undefined"
+                "name": "maxWidth",
+                "description": "The maximum width of the popup.",
+                "type": "number | 'auto'"
               },
               {
-                "name": "ariaLive",
-                "description": "The aria-live politeness level for screen readers.",
-                "type": "\"polite\" | \"assertive\" | \"off\""
+                "name": "hasArrow",
+                "description": "Whether the popup has an arrow.",
+                "type": "boolean"
               },
               {
-                "name": "size",
-                "description": "The size of the progress indicator. Default is `sm`. See SizedMixin.",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
+                "name": "overflow",
+                "description": "Whether the popup should overflow.",
+                "type": "boolean"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
-                "type": "string"
+                "name": "fullWidth",
+                "description": "Whether the popup should take full width of the screen.",
+                "type": "boolean"
+              },
+              {
+                "name": "disableViewportAutoClose",
+                "description": "Keep popup open when trigger leaves viewport.",
+                "type": "boolean"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "dds-opened",
+                "type": "{ void }",
+                "description": "Fired when the popup is opened."
+              },
+              {
+                "name": "dds-closed",
+                "type": "{ void }",
+                "description": "Fired when the popup is closed."
+              },
+              {
+                "name": "dds-close",
+                "type": "{ void }",
+                "description": "Fired when the popup should be closed."
+              }
+            ]
           }
         },
         {
           "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -8285,6 +8246,124 @@
             ]
           }
         },
+        {
+          "name": "dap-ds-progress",
+          "description": "Progress indicator component with linear and circular variants.\n---\n\n\n### **Slots:**\n - **label** - Custom label content for the progress indicator.\n\n### **CSS Properties:**\n - **--dds-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-progress-fill-color-neutral** - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-progress-fill-color-brand** - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-negative** - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-positive** - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-inverted** - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-progress-height-xs** - Height for extra small linear progress (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-progress-height-sm** - Height for small linear progress (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-progress-height-md** - Height for medium linear progress (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-progress-height-lg** - Height for large linear progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-height-xl** - Height for extra large linear progress (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-progress-height-xxl** - Height for extra extra large linear progress (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-progress-diameter-xs** - Diameter for extra small circular progress (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-progress-diameter-sm** - Diameter for small circular progress (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-progress-diameter-md** - Diameter for medium circular progress (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-progress-diameter-lg** - Diameter for large circular progress (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-progress-diameter-xl** - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-progress-diameter-xxl** - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-progress-stroke-width** - Stroke width for circular progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-animation-duration** - Duration of indeterminate animation (default: 1.5s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill (bar for linear, circle for circular).\n- **label** - The progress label text.\n- **percentage** - The percentage text (circular variant only).\n- **background** - The background circle (circular variant only).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant of the progress indicator.",
+              "value": {
+                "type": "\"linear\" | \"circular\"",
+                "default": "'linear'"
+              }
+            },
+            {
+              "name": "color",
+              "description": "The color variant of the progress indicator.",
+              "value": {
+                "type": "\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"",
+                "default": "'brand'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "Current progress value (0-100 for percentage, or 0-max).",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "max",
+              "description": "Maximum value for the progress indicator.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Whether to show the progress as indeterminate (loading animation).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "showPercentage",
+              "description": "Whether to show percentage text in the center (circular variant only).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Label text for the progress indicator.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "aria-live",
+              "description": "The aria-live politeness level for screen readers.",
+              "value": {
+                "type": "\"polite\" | \"assertive\" | \"off\"",
+                "default": "'polite'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "Custom label content for the progress indicator."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The variant of the progress indicator.",
+                "type": "\"linear\" | \"circular\""
+              },
+              {
+                "name": "color",
+                "description": "The color variant of the progress indicator.",
+                "type": "\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\""
+              },
+              {
+                "name": "value",
+                "description": "Current progress value (0-100 for percentage, or 0-max).",
+                "type": "number | undefined"
+              },
+              {
+                "name": "max",
+                "description": "Maximum value for the progress indicator.",
+                "type": "number"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Whether to show the progress as indeterminate (loading animation).",
+                "type": "boolean"
+              },
+              {
+                "name": "showPercentage",
+                "description": "Whether to show percentage text in the center (circular variant only).",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Label text for the progress indicator.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "ariaLive",
+                "description": "The aria-live politeness level for screen readers.",
+                "type": "\"polite\" | \"assertive\" | \"off\""
+              },
+              {
+                "name": "size",
+                "description": "The size of the progress indicator. Default is `sm`. See SizedMixin.",
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "dap-ds-rating",
           "description": "Rating is a component that allows users to rate a product or service.\n---\n\n\n### **Events:**\n - **dds-change** - Event fired when the rating value changes.\n\n### **Methods:**\n - **_announceRating()** - Announce the current rating to screen readers\n\n### **CSS Parts:**\n - **base** - The main rating container.\n- **star** - The star element.\n- **stars-container** - The container of the stars.\n- **icon** - The icon of the star.",
@@ -8340,7 +8419,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -8415,7 +8494,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.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -8463,7 +8542,7 @@
               { "name": "searchOnValueSet", "type": "string" },
               {
                 "name": "searchMode",
-                "description": "The search mode of the select. Default is 'none'.",
+                "description": "The search mode of the search. `none` (default) is a free-text search without a suggestion list; `autocomplete` shows suggestions filtered by their starting text as you type; `manual` shows the suggestions you supply on `dds-input` without filtering them. `typehead` is deprecated for the search: it is meant for the select, and the list does not open in this mode.",
                 "type": "'none' | 'typehead' | 'autocomplete' | 'manual'"
               },
               {
@@ -8612,7 +8691,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -8648,6 +8727,11 @@
               "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "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`).",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
             {
               "name": "loading",
               "description": "The loading state of the select.",
@@ -8675,6 +8759,11 @@
               "name": "disableViewportAutoClose",
               "description": "Whether to keep popup open when trigger leaves viewport.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": { "type": "DapDSOptionData[]" }
             }
           ],
           "slots": [
@@ -8743,6 +8832,11 @@
                 "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
                 "type": "boolean | undefined"
               },
+              {
+                "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`).",
+                "type": "boolean | undefined"
+              },
               {
                 "name": "loading",
                 "description": "The loading state of the select.",
@@ -8768,6 +8862,16 @@
                 "description": "Whether to keep popup open when trigger leaves viewport.",
                 "type": "boolean"
               },
+              {
+                "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.",
+                "type": "DapDSOptionData[]"
+              },
+              {
+                "name": "renderOption",
+                "description": "Renders the content of each option given in `items` in the dropdown list. Defaults to the item's `label`. The native and customizable modes show the label.",
+                "type": "DapDSOptionRenderer"
+              },
               { "name": "focusElement" },
               { "name": "validity", "type": "ValidityState" },
               { "name": "validationMessage", "type": "string" },
@@ -8898,7 +9002,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -9293,7 +9397,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -9397,7 +9501,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",
           "doc-url": "",
           "attributes": [
             {
@@ -9559,7 +9663,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -9625,7 +9729,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -9795,7 +9899,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -9886,7 +9990,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)_",
           "doc-url": "",
           "attributes": [
             {
@@ -10003,7 +10107,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -10052,7 +10156,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -10333,7 +10437,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -10509,7 +10613,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -10918,7 +11022,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -11088,7 +11192,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -11196,7 +11300,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -11420,7 +11524,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -11498,7 +11602,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.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -11599,7 +11703,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.",
           "doc-url": "",
           "attributes": [
             {
@@ -12747,7 +12851,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-home-6-line",
+          "name": "dap-ds-icon-calendar-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12800,7 +12904,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-calendar-line",
+          "name": "dap-ds-icon-edit-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12853,7 +12957,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-edit-line",
+          "name": "dap-ds-icon-tools-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12906,7 +13010,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-tools-line",
+          "name": "dap-ds-icon-home-6-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15344,7 +15448,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-fill",
+          "name": "dap-ds-icon-lock-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15397,7 +15501,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-line",
+          "name": "dap-ds-icon-lock-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [