dap-design-system 0.62.1 → 0.62.2

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

@@ -2,6 +2,33 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "name": "dap-ds-accordion-group",
+      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
+      "attributes": [
+        {
+          "name": "autoClose",
+          "description": "Whether to close other accordions when one is opened.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The variant of the accordion",
+          "values": [
+            { "name": "default" },
+            { "name": "collapsed" },
+            { "name": "clean" },
+            { "name": "clean-collapsed" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/accordion-group"
+        }
+      ]
+    },
     {
       "name": "dap-ds-accordion",
       "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
@@ -160,25 +187,24 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
-        { "name": "variant", "values": [] },
         {
-          "name": "mobile",
-          "description": "Mobile version of the breadcrumb",
-          "values": []
+          "name": "variant",
+          "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
+          "values": [{ "name": "HeadingVariant" }]
         },
         {
-          "name": "aria-labelledby",
-          "description": "The aria-labelledby of the breadcrumb",
+          "name": "label",
+          "description": "The label of the heading.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/breadcrumb"
+          "url": "https://shoelace.style/components/anchor-heading"
         }
       ]
     },
@@ -231,51 +257,25 @@
       ]
     },
     {
-      "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.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
-          "values": [{ "name": "HeadingVariant" }]
-        },
-        {
-          "name": "label",
-          "description": "The label of the heading.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/anchor-heading"
-        }
-      ]
-    },
-    {
-      "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.",
+      "name": "dap-ds-breadcrumb",
+      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
       "attributes": [
+        { "name": "variant", "values": [] },
         {
-          "name": "autoClose",
-          "description": "Whether to close other accordions when one is opened.",
+          "name": "mobile",
+          "description": "Mobile version of the breadcrumb",
           "values": []
         },
         {
-          "name": "variant",
-          "description": "The variant of the accordion",
-          "values": [
-            { "name": "default" },
-            { "name": "collapsed" },
-            { "name": "clean" },
-            { "name": "clean-collapsed" }
-          ]
+          "name": "aria-labelledby",
+          "description": "The aria-labelledby of the breadcrumb",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/accordion-group"
+          "url": "https://shoelace.style/components/breadcrumb"
         }
       ]
     },
@@ -1991,17 +1991,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-input",
-      "description": "An input is a field used to collect user input.\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 - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\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 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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/input"
-        }
-      ]
-    },
     {
       "name": "dap-ds-image-zoom",
       "description": "An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n---\n\n\n### **Events:**\n - **dds-zoom** - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n- **dds-unzoom** - Fires after the image has unzoomed.\n\n### **Methods:**\n - **zoom(): _void_** - Programmatically zoom the image.\n- **unzoom(): _void_** - Programmatically unzoom the image.\n\n### **Slots:**\n - _default_ - The image or content element to zoom. Should contain an <img> element.\n\n### **CSS Properties:**\n - **--dds-image-zoom-overlay-bg** - Overlay background color (default: rgba(0, 0, 0, 0.8)). _(default: undefined)_\n- **--dds-image-zoom-transition-speed** - Animation duration (default: 300ms). _(default: undefined)_\n- **--dds-image-zoom-transition-timing** - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)). _(default: undefined)_\n\n### **CSS Parts:**\n - **trigger** - The zoom trigger wrapper element.\n- **dialog** - The zoom dialog element.\n- **overlay** - The backdrop overlay element.\n- **zoomed-image** - The zoomed image element.\n- **unzoom-button** - The button to close the zoomed view.\n- **expand-button** - The button to expand the image.\n- **expand-button-base** - The base of the expand button.\n- **expand-button-content** - The content of the expand button.\n- **unzoom-button-base** - The base of the unzoom button.\n- **unzoom-button-content** - The content of the unzoom button.\n- **expand-button-icon** - The icon of the expand button.\n- **unzoom-button-icon** - The icon of the unzoom button.",
@@ -2073,6 +2062,17 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-input",
+      "description": "An input is a field used to collect user input.\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 - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\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 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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/input"
+        }
+      ]
+    },
     {
       "name": "dap-ds-label",
       "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
@@ -2153,17 +2153,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-modal",
-      "description": "A modal is a container for modal content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the modal opens.\n- **dds-opened** - Fires after the modal opens.\n- **dds-before-close** - Fires before the modal closes.\n- **dds-closed** - Fires after the modal closed.\n- **dds-close** - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-ok** - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-cancel** - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the modal.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\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-200)). _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main modal container.\n- **panel** - The panel of the modal.\n- **header** - The header of the modal.\n- **header-container** - The container of the header.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\n- **content** - The body of the modal.\n- **closebutton** - The close button of the modal.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/modal"
-        }
-      ]
-    },
     {
       "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.",
@@ -2270,6 +2259,17 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-modal",
+      "description": "A modal is a container for modal content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the modal opens.\n- **dds-opened** - Fires after the modal opens.\n- **dds-before-close** - Fires before the modal closes.\n- **dds-closed** - Fires after the modal closed.\n- **dds-close** - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-ok** - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-cancel** - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the modal.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\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-200)). _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main modal container.\n- **panel** - The panel of the modal.\n- **header** - The header of the modal.\n- **header-container** - The container of the header.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\n- **content** - The body of the modal.\n- **closebutton** - The close button of the modal.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/modal"
+        }
+      ]
+    },
     {
       "name": "dap-ds-navigation-menu-item",
       "description": "A navigation menu item that can contain either a simple link or dropdown content.\nSupports nested items with cascading flyout behavior. Part of the navigation menu system.\nThis is for NAVIGATION (website menus), not application menus.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n- **dds-navigation-dropdown-open** - Fired when a navigation dropdown is opened.\n\n### **Methods:**\n - **activateTrigger()** - Activate the trigger the way a mouse click would. Custom element triggers\n-- including the default `dap-ds-button` -- keep the real interactive\nelement inside their shadow root, so clicking the host alone does nothing.\n- **updatePosition()** - Update popup position using Floating UI.\n- **setRovingTabIndex(active: _boolean_)** - Sets this item as the active (or inactive) roving tabindex target.\nOnly the active item's trigger is in the sequential tab order (tabindex=\"0\").\nAll others are removed (tabindex=\"-1\") so Tab exits the whole nav in one step.\n- **focusFirstDropdownChild()** - Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **focusLastDropdownChild()** - Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **_handleTriggerSlotChangeCallback()** - Update trigger element attributes and properties.\n\n### **Slots:**\n - **trigger** - The trigger element (link, button, etc.) for this navigation item.\n- **title** - The title of the navigation item.\n- **indicator** - The expand indicator icon (defaults to arrow icon based on orientation and level).\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the popup so it is always accessible to programmatic clicks.\n- _default_ - The dropdown content (can contain nested dap-ds-navigation-menu-item elements).\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-spacing** - The padding/spacing of the navigation menu item content. (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-width** - The border width of the navigation menu item content. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-color** - The border color of the navigation menu item content. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-radius** - The border radius of the navigation menu item content. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-background** - The background color of the navigation menu item content. (default: var(--dds-background-neutral-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-shadow** - The box shadow of the navigation menu item content. (default: var(--dds-shadow-base)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part of the navigation item.\n- **trigger** - The trigger element part.\n- **trigger-base** - The base part of the trigger button (from dap-ds-button).\n- **trigger-content** - The content part of the trigger button (from dap-ds-button).\n- **trigger-high-contrast** - The high contrast part of the trigger button (from dap-ds-button).\n- **trigger-stack-base** - The base part of the trigger stack (from dap-ds-stack).\n- **title** - The title slot wrapper.\n- **indicator** - The expand indicator container.\n- **indicator-icon** - The expand indicator icon part.\n- **indicator-icon-base** - The base part of the indicator icon (from dap-ds-icon).\n- **indicator-icon-icon** - The icon part of the indicator icon (from dap-ds-icon).\n- **popup** - The dropdown popup container.\n- **content** - The dropdown content wrapper (default slot).\n- **arrow** - The dropdown arrow part.",
@@ -3680,7 +3680,11 @@
       "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)_",
       "attributes": [
-        { "name": "role", "values": [] },
+        {
+          "name": "role",
+          "description": "The html role of the table. A static data table is a `table`; `grid` is\nonly right for an interactive widget with keyboard-navigable cells.",
+          "values": []
+        },
         {
           "name": "mobile",
           "description": "If the table has mobile design",
@@ -4032,28 +4036,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "placement",
-          "description": "The placement of the tray.",
-          "values": [
-            { "name": "left" },
-            { "name": "right" },
-            { "name": "top" },
-            { "name": "bottom" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/tray"
-        }
-      ]
-    },
     {
       "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.",
@@ -4111,6 +4093,28 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "placement",
+          "description": "The placement of the tray.",
+          "values": [
+            { "name": "left" },
+            { "name": "right" },
+            { "name": "top" },
+            { "name": "bottom" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/tray"
+        }
+      ]
+    },
     {
       "name": "dap-ds-typography",
       "description": "Typography is used to display text in different styles.\n---\n\n\n### **Slots:**\n - **default** - The content of the typography.\n\n### **CSS Properties:**\n - **--dds-text-color** - The color of the typography. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-text-color-inverted** - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-heading-color** - The color of the heading typography. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-text-heading-color-inverted** - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-description-color** - The color of the subtle typography. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-text-description-color-inverted** - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-font-family** - The font family of the typography. (default: var(--font-family)) _(default: undefined)_\n- **--dds-text-font-weight-medium** - The font weight of the medium typography. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-text-font-weight-bold** - The font weight of the bold typography. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-text-font-size-h1** - The font size of the h1 typography. (default: var(--dds-font-7xl)) _(default: undefined)_\n- **--dds-text-font-size-h2** - The font size of the h2 typography. (default: var(--dds-font-4xl)) _(default: undefined)_\n- **--dds-text-font-size-h3** - The font size of the h3 typography. (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-text-font-size-h4** - The font size of the h4 typography. (default: var(--dds-font-xl)) _(default: undefined)_\n- **--dds-text-font-size-h5** - The font size of the h5 typography. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-text-font-size-h6** - The font size of the h6 typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-body** - The font size of the body typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-caption** - The font size of the caption typography. (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-text-font-size-description** - The font size of the description typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-description-lg** - The font size of the description lg typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-description-sm** - The font size of the description sm typography. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-text-font-size-lg** - The font size of the lg typography. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-text-font-size-md** - The font size of the md typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-sm** - The font size of the sm typography. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-text-font-size-xs** - The font size of the xs typography. (default: var(--dds-font-xs)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main typography container.",
@@ -4168,17 +4172,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/input-group"
-        }
-      ]
-    },
     {
       "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.",
@@ -4206,6 +4199,17 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/input-group"
+        }
+      ]
+    },
     {
       "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.",
@@ -4394,7 +4398,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-line",
+      "name": "dap-ds-icon-arrow-left-s-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4421,12 +4425,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-line"
+          "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-s-fill",
+      "name": "dap-ds-icon-arrow-left-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4453,12 +4457,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
+          "url": "https://shoelace.style/components/icon-arrow-left-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-up-line",
+      "name": "dap-ds-icon-arrow-left-s-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4485,12 +4489,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-up-line"
+          "url": "https://shoelace.style/components/icon-arrow-left-s-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-s-line",
+      "name": "dap-ds-icon-arrow-left-up-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4517,7 +4521,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-s-line"
+          "url": "https://shoelace.style/components/icon-arrow-left-up-line"
         }
       ]
     },
@@ -4970,7 +4974,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-clipboard-line",
+      "name": "dap-ds-icon-computer-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4997,12 +5001,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-clipboard-line"
+          "url": "https://shoelace.style/components/icon-computer-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-file-image-line",
+      "name": "dap-ds-icon-clipboard-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5029,7 +5033,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-file-image-line"
+          "url": "https://shoelace.style/components/icon-clipboard-line"
         }
       ]
     },
@@ -5066,7 +5070,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-file-music-line",
+      "name": "dap-ds-icon-file-image-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5093,12 +5097,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-file-music-line"
+          "url": "https://shoelace.style/components/icon-file-image-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-file-text-line",
+      "name": "dap-ds-icon-file-music-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5125,12 +5129,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-file-text-line"
+          "url": "https://shoelace.style/components/icon-file-music-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-file-video-line",
+      "name": "dap-ds-icon-file-text-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5157,12 +5161,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-file-video-line"
+          "url": "https://shoelace.style/components/icon-file-text-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-folder-line",
+      "name": "dap-ds-icon-file-video-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5189,12 +5193,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-folder-line"
+          "url": "https://shoelace.style/components/icon-file-video-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-folder-open-line",
+      "name": "dap-ds-icon-folder-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5221,12 +5225,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-folder-open-line"
+          "url": "https://shoelace.style/components/icon-folder-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-computer-line",
+      "name": "dap-ds-icon-folder-open-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5253,7 +5257,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-computer-line"
+          "url": "https://shoelace.style/components/icon-folder-open-line"
         }
       ]
     },
@@ -5866,7 +5870,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-download-line",
+      "name": "dap-ds-icon-delete-bin-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5893,12 +5897,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-download-line"
+          "url": "https://shoelace.style/components/icon-delete-bin-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-delete-bin-line",
+      "name": "dap-ds-icon-download-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5925,7 +5929,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-delete-bin-line"
+          "url": "https://shoelace.style/components/icon-download-line"
         }
       ]
     },
@@ -6186,7 +6190,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-lightbulb-fill",
+      "name": "dap-ds-icon-information-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6213,12 +6217,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-lightbulb-fill"
+          "url": "https://shoelace.style/components/icon-information-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-lock-fill",
+      "name": "dap-ds-icon-lightbulb-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6245,12 +6249,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-lock-fill"
+          "url": "https://shoelace.style/components/icon-lightbulb-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-information-line",
+      "name": "dap-ds-icon-loading-spinner",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6277,12 +6281,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-information-line"
+          "url": "https://shoelace.style/components/icon-loading-spinner"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-loading-spinner",
+      "name": "dap-ds-icon-lock-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6309,7 +6313,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-loading-spinner"
+          "url": "https://shoelace.style/components/icon-lock-fill"
         }
       ]
     },
@@ -6410,7 +6414,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-search-line",
+      "name": "dap-ds-icon-more-2-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6437,7 +6441,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-search-line"
+          "url": "https://shoelace.style/components/icon-more-2-line"
         }
       ]
     },
@@ -6474,7 +6478,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-more-2-line",
+      "name": "dap-ds-icon-search-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6501,7 +6505,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-more-2-line"
+          "url": "https://shoelace.style/components/icon-search-line"
         }
       ]
     },
@@ -6602,7 +6606,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-subtract-line2",
+      "name": "dap-ds-icon-star-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6629,12 +6633,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-subtract-line2"
+          "url": "https://shoelace.style/components/icon-star-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-time-fill",
+      "name": "dap-ds-icon-subtract-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6661,12 +6665,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-time-fill"
+          "url": "https://shoelace.style/components/icon-subtract-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-subtract-line",
+      "name": "dap-ds-icon-subtract-line2",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6693,12 +6697,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-subtract-line"
+          "url": "https://shoelace.style/components/icon-subtract-line2"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-star-fill",
+      "name": "dap-ds-icon-time-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6725,7 +6729,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-star-fill"
+          "url": "https://shoelace.style/components/icon-time-fill"
         }
       ]
     },