dap-design-system 0.61.2 → 0.61.3

package/dist/manifest/web-types.json

@@ -6,6 +6,45 @@
   "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.",
@@ -271,71 +310,65 @@
           }
         },
         {
-          "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-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": "autoClose",
-              "description": "Whether to close other accordions when one is opened.",
-              "value": { "type": "string", "default": "'true'" }
-            },
-            {
-              "name": "variant",
-              "description": "The variant of the accordion",
+              "name": "type",
+              "description": "The type of the badge",
               "value": {
-                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
-                "default": "'default'"
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
+                "default": "'neutral'"
               }
+            },
+            {
+              "name": "icon",
+              "description": "The icon of the badge, this is a name of a built in icon",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "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 accordion group." }
+            { "name": "", "description": "The content of the badge." },
+            { "name": "icon", "description": "The icon of the badge." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "autoClose",
-                "description": "Whether to close other accordions when one is opened.",
-                "type": "string"
+                "name": "type",
+                "description": "The type of the badge",
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
               },
               {
-                "name": "variant",
-                "description": "The variant of the accordion",
-                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
+                "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-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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
-              "value": { "type": "HeadingVariant" }
-            },
-            {
-              "name": "label",
-              "description": "The label of the heading.",
-              "value": { "type": "string" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "variant", "type": "HeadingVariant" },
-              { "name": "label", "type": "string" },
-              { "name": "elementId" },
-              { "name": "anchorTitle" }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
@@ -435,66 +468,6 @@
             ]
           }
         },
-        {
-          "name": "dap-ds-badge",
-          "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "type",
-              "description": "The type of the badge",
-              "value": {
-                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
-                "default": "'neutral'"
-              }
-            },
-            {
-              "name": "icon",
-              "description": "The icon of the badge, this is a name of a built in icon",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "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-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.",
@@ -588,6 +561,33 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
+              "value": { "type": "HeadingVariant" }
+            },
+            {
+              "name": "label",
+              "description": "The label of the heading.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "variant", "type": "HeadingVariant" },
+              { "name": "label", "type": "string" },
+              { "name": "elementId" },
+              { "name": "anchorTitle" }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -710,51 +710,296 @@
           }
         },
         {
-          "name": "dap-ds-button",
-          "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\nA caller focusing a button the same tick it mounts -- a \"Save\" button that appears\nonly after the form it belongs to opens, say -- would otherwise get a TypeError,\nnot a no-op. Throwing out of a focus() call breaks whatever effect made it.\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "The visual style variant of the button",
-              "value": {
-                "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
-                "default": "'primary'"
-              }
+              "name": "selected",
+              "description": "Whether the calendar cell is selected.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "size",
-              "description": "The size of the button affecting padding and font size",
-              "value": {
-                "type": "'lg' | 'md' | 'sm' | 'xs'",
-                "default": "'md'"
-              }
+              "name": "disabledDay",
+              "description": "Whether the calendar cell is disabled.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "loading",
-              "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
+              "name": "today",
+              "description": "Whether the calendar cell is today.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "danger",
-              "description": "Whether the button represents a destructive action (applies danger styling)",
+              "name": "outOfRange",
+              "description": "Whether the calendar cell is out of range.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "shape",
-              "description": "The shape of the button - use 'circle' for icon-only buttons",
-              "value": { "type": "'button' | 'circle'", "default": "'button'" }
+              "name": "header",
+              "description": "Whether the calendar cell is a date header.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "htmlType",
-              "description": "The HTML type attribute for form interaction",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
+              "name": "focused",
+              "description": "Whether the calendar cell is focused.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "href",
+              "name": "rangestart",
+              "description": "Whether the calendar cell is the start of a range.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "rangeend",
+              "description": "Whether the calendar cell is the end of a range.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inrange",
+              "description": "Whether the calendar cell is in the middle of a range.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "locale",
+              "description": "The locale of the calendar cell.",
+              "value": {
+                "type": "'hu' | 'en' | 'de'",
+                "default": "dayjs.locale()"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the calendar cell." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the calendar cell.",
+                "type": "Dayjs"
+              },
+              {
+                "name": "selected",
+                "description": "Whether the calendar cell is selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabledDay",
+                "description": "Whether the calendar cell is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "today",
+                "description": "Whether the calendar cell is today.",
+                "type": "boolean"
+              },
+              {
+                "name": "outOfRange",
+                "description": "Whether the calendar cell is out of range.",
+                "type": "boolean"
+              },
+              {
+                "name": "header",
+                "description": "Whether the calendar cell is a date header.",
+                "type": "boolean"
+              },
+              {
+                "name": "focused",
+                "description": "Whether the calendar cell is focused.",
+                "type": "boolean"
+              },
+              {
+                "name": "rangestart",
+                "description": "Whether the calendar cell is the start of a range.",
+                "type": "boolean"
+              },
+              {
+                "name": "rangeend",
+                "description": "Whether the calendar cell is the end of a range.",
+                "type": "boolean"
+              },
+              {
+                "name": "inrange",
+                "description": "Whether the calendar cell is in the middle of a range.",
+                "type": "boolean"
+              },
+              {
+                "name": "locale",
+                "description": "The locale of the calendar cell.",
+                "type": "'hu' | 'en' | 'de'"
+              },
+              { "name": "label", "type": "string" },
+              { "name": "focusElement", "type": "HTMLElement" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "mode",
+              "description": "The mode of the calendar - single date or range selection.",
+              "value": { "type": "'single' | 'range'", "default": "'single'" }
+            },
+            {
+              "name": "hideAdjacentMonths",
+              "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "locale",
+              "description": "The locale of the calendar.",
+              "value": {
+                "type": "'hu' | 'en' | 'de'",
+                "default": "dayjs.locale()"
+              }
+            },
+            {
+              "name": "prevButtonTestId",
+              "description": "`data-testid` for the previous-month button.",
+              "value": { "type": "string", "default": "'calendar-prev-button'" }
+            },
+            {
+              "name": "nextButtonTestId",
+              "description": "`data-testid` for the next-month button.",
+              "value": { "type": "string", "default": "'calendar-next-button'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the calendar." }
+          ],
+          "events": [
+            {
+              "name": "dds-change",
+              "type": "{ value: Dayjs }",
+              "description": "Fired when the calendar value changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "mode",
+                "description": "The mode of the calendar - single date or range selection.",
+                "type": "'single' | 'range'"
+              },
+              {
+                "name": "hideAdjacentMonths",
+                "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The value of the calendar.",
+                "type": "Dayjs"
+              },
+              {
+                "name": "rangeStart",
+                "description": "The start date of the range selection (only used in range mode).",
+                "type": "Dayjs"
+              },
+              {
+                "name": "rangeEnd",
+                "description": "The end date of the range selection (only used in range mode).",
+                "type": "Dayjs"
+              },
+              {
+                "name": "currentDate",
+                "description": "The current visible date of the calendar. Only the month and year are considered.",
+                "type": "Dayjs"
+              },
+              {
+                "name": "minDate",
+                "description": "The minimum date of the calendar. Only the month and year are considered.",
+                "type": "Dayjs"
+              },
+              {
+                "name": "maxDate",
+                "description": "The maximum date of the calendar. Only the month and year are considered.",
+                "type": "Dayjs"
+              },
+              {
+                "name": "disabledDate",
+                "description": "The function to determine if the date is disabled.",
+                "type": "Function"
+              },
+              {
+                "name": "locale",
+                "description": "The locale of the calendar.",
+                "type": "'hu' | 'en' | 'de'"
+              },
+              {
+                "name": "prevButtonTestId",
+                "description": "`data-testid` for the previous-month button.",
+                "type": "string"
+              },
+              {
+                "name": "nextButtonTestId",
+                "description": "`data-testid` for the next-month button.",
+                "type": "string"
+              },
+              { "name": "startDate" },
+              { "name": "endDate" },
+              { "name": "shouldHideAdjacentMonths" }
+            ],
+            "events": [
+              {
+                "name": "dds-change",
+                "type": "{ value: Dayjs }",
+                "description": "Fired when the calendar value changes."
+              }
+            ]
+          }
+        },
+        {
+          "name": "dap-ds-button",
+          "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\nA caller focusing a button the same tick it mounts -- a \"Save\" button that appears\nonly after the form it belongs to opens, say -- would otherwise get a TypeError,\nnot a no-op. Throwing out of a focus() call breaks whatever effect made it.\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The visual style variant of the button",
+              "value": {
+                "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The size of the button affecting padding and font size",
+              "value": {
+                "type": "'lg' | 'md' | 'sm' | 'xs'",
+                "default": "'md'"
+              }
+            },
+            {
+              "name": "loading",
+              "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "danger",
+              "description": "Whether the button represents a destructive action (applies danger styling)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shape",
+              "description": "The shape of the button - use 'circle' for icon-only buttons",
+              "value": { "type": "'button' | 'circle'", "default": "'button'" }
+            },
+            {
+              "name": "htmlType",
+              "description": "The HTML type attribute for form interaction",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            {
+              "name": "href",
               "description": "The URL to navigate to. When present, the button renders as an anchor element",
               "value": { "type": "string | undefined" }
             },
@@ -889,246 +1134,206 @@
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "selected",
-              "description": "Whether the calendar cell is selected.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabledDay",
-              "description": "Whether the calendar cell is disabled.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "today",
-              "description": "Whether the calendar cell is today.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "outOfRange",
-              "description": "Whether the calendar cell is out of range.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "header",
-              "description": "Whether the calendar cell is a date header.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "focused",
-              "description": "Whether the calendar cell is focused.",
+              "name": "indeterminate",
+              "description": "Whether the checkbox is indeterminate",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "rangestart",
-              "description": "Whether the calendar cell is the start of a range.",
+              "name": "preventDefault",
+              "description": "Whether the checkbox should prevent the default action",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "rangeend",
-              "description": "Whether the calendar cell is the end of a range.",
+              "name": "border",
+              "description": "This sets up border around the checkbox, when true.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "inrange",
-              "description": "Whether the calendar cell is in the middle of a range.",
+              "name": "readonly",
+              "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "locale",
-              "description": "The locale of the calendar cell.",
+              "name": "type",
+              "description": "The type of the checkbox",
               "value": {
-                "type": "'hu' | 'en' | 'de'",
-                "default": "dayjs.locale()"
+                "type": "'normal' | 'background'",
+                "default": "'normal'"
               }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The content of the calendar cell." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the calendar cell.",
-                "type": "Dayjs"
-              },
-              {
-                "name": "selected",
-                "description": "Whether the calendar cell is selected.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabledDay",
-                "description": "Whether the calendar cell is disabled.",
-                "type": "boolean"
-              },
-              {
-                "name": "today",
-                "description": "Whether the calendar cell is today.",
-                "type": "boolean"
-              },
-              {
-                "name": "outOfRange",
-                "description": "Whether the calendar cell is out of range.",
-                "type": "boolean"
-              },
-              {
-                "name": "header",
-                "description": "Whether the calendar cell is a date header.",
-                "type": "boolean"
-              },
-              {
-                "name": "focused",
-                "description": "Whether the calendar cell is focused.",
-                "type": "boolean"
-              },
-              {
-                "name": "rangestart",
-                "description": "Whether the calendar cell is the start of a range.",
-                "type": "boolean"
-              },
-              {
-                "name": "rangeend",
-                "description": "Whether the calendar cell is the end of a range.",
-                "type": "boolean"
-              },
-              {
-                "name": "inrange",
-                "description": "Whether the calendar cell is in the middle of a range.",
-                "type": "boolean"
-              },
-              {
-                "name": "locale",
-                "description": "The locale of the calendar cell.",
-                "type": "'hu' | 'en' | 'de'"
-              },
-              { "name": "label", "type": "string" },
-              { "name": "focusElement", "type": "HTMLElement" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "mode",
-              "description": "The mode of the calendar - single date or range selection.",
-              "value": { "type": "'single' | 'range'", "default": "'single'" }
-            },
+          "events": [
             {
-              "name": "hideAdjacentMonths",
-              "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "dds-change",
+              "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
+              "description": "Fired when the checkbox is checked or unchecked."
             },
             {
-              "name": "locale",
-              "description": "The locale of the calendar.",
-              "value": {
-                "type": "'hu' | 'en' | 'de'",
-                "default": "dayjs.locale()"
-              }
+              "name": "dds-blur",
+              "type": "{ void }",
+              "description": "Emitted when the checkbox loses focus."
             },
             {
-              "name": "prevButtonTestId",
-              "description": "`data-testid` for the previous-month button.",
-              "value": { "type": "string", "default": "'calendar-prev-button'" }
+              "name": "dds-focus",
+              "type": "{ void }",
+              "description": "Emitted when the checkbox gains focus."
             },
             {
-              "name": "nextButtonTestId",
-              "description": "`data-testid` for the next-month button.",
-              "value": { "type": "string", "default": "'calendar-next-button'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the calendar." }
-          ],
-          "events": [
-            {
-              "name": "dds-change",
-              "type": "{ value: Dayjs }",
-              "description": "Fired when the calendar value changes."
+              "name": "dds-input",
+              "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
+              "description": "Emitted when the checkbox receives input."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "mode",
-                "description": "The mode of the calendar - single date or range selection.",
-                "type": "'single' | 'range'"
+                "name": "indeterminate",
+                "description": "Whether the checkbox is indeterminate",
+                "type": "boolean"
               },
               {
-                "name": "hideAdjacentMonths",
-                "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
+                "name": "preventDefault",
+                "description": "Whether the checkbox should prevent the default action",
+                "type": "boolean"
+              },
+              {
+                "name": "border",
+                "description": "This sets up border around the checkbox, when true.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
+                "type": "boolean"
+              },
+              {
+                "name": "type",
+                "description": "The type of the checkbox",
+                "type": "'normal' | 'background'"
+              },
+              { "name": "focusElement", "type": "HTMLInputElement" },
+              { "name": "feedbackId" },
+              {
+                "name": "name",
+                "description": "The name of the checkbox.",
+                "type": "string"
+              },
               {
                 "name": "value",
-                "description": "The value of the calendar.",
-                "type": "Dayjs"
+                "description": "The value of the checkbox.",
+                "type": "string"
               },
               {
-                "name": "rangeStart",
-                "description": "The start date of the range selection (only used in range mode).",
-                "type": "Dayjs"
+                "name": "checked",
+                "description": "Whether the checkbox is checked.",
+                "type": "boolean"
               },
               {
-                "name": "rangeEnd",
-                "description": "The end date of the range selection (only used in range mode).",
-                "type": "Dayjs"
+                "name": "label",
+                "description": "The label of the checkbox.",
+                "type": "string"
               },
               {
-                "name": "currentDate",
-                "description": "The current visible date of the calendar. Only the month and year are considered.",
-                "type": "Dayjs"
+                "name": "hideLabel",
+                "description": "Visually hides the label while keeping it available to assistive technology. (default: false)",
+                "type": "boolean"
               },
               {
-                "name": "minDate",
-                "description": "The minimum date of the calendar. Only the month and year are considered.",
-                "type": "Dayjs"
+                "name": "description",
+                "description": "The description of the checkbox.",
+                "type": "string"
               },
               {
-                "name": "maxDate",
-                "description": "The maximum date of the calendar. Only the month and year are considered.",
-                "type": "Dayjs"
+                "name": "disabled",
+                "description": "Whether the checkbox is disabled.",
+                "type": "boolean"
               },
               {
-                "name": "disabledDate",
-                "description": "The function to determine if the date is disabled.",
-                "type": "Function"
+                "name": "required",
+                "description": "Whether the checkbox is required.",
+                "type": "boolean"
               },
               {
-                "name": "locale",
-                "description": "The locale of the calendar.",
-                "type": "'hu' | 'en' | 'de'"
+                "name": "size",
+                "description": "The size of the checkbox. Default is 'sm'.",
+                "type": "'xs' | 'sm' | 'lg'"
               },
               {
-                "name": "prevButtonTestId",
-                "description": "`data-testid` for the previous-month button.",
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
               },
               {
-                "name": "nextButtonTestId",
-                "description": "`data-testid` for the next-month button.",
+                "name": "labelPlacement",
+                "description": "The placement of the label.",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "descriptionPlacement",
+                "description": "The placement of the description.",
+                "type": "'top' | 'bottom'"
+              },
+              {
+                "name": "subtle",
+                "description": "The weight of the label.",
+                "type": "boolean"
+              },
+              {
+                "name": "feedback",
+                "description": "The feedback of the checkbox.",
                 "type": "string"
               },
-              { "name": "startDate" },
-              { "name": "endDate" },
-              { "name": "shouldHideAdjacentMonths" }
+              {
+                "name": "feedbackType",
+                "description": "The feedback type of the checkbox.",
+                "type": "'negative' | 'positive' | 'warning'"
+              },
+              {
+                "name": "invalid",
+                "description": "The invalid state of the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "The optional state of the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "optionalLabel",
+                "description": "The optional label of the checkbox.",
+                "type": "string"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "The required indicator of the checkbox. (default: '*')",
+                "type": "string"
+              }
             ],
             "events": [
               {
                 "name": "dds-change",
-                "type": "{ value: Dayjs }",
-                "description": "Fired when the calendar value changes."
+                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
+                "description": "Fired when the checkbox is checked or unchecked."
+              },
+              {
+                "name": "dds-blur",
+                "type": "{ void }",
+                "description": "Emitted when the checkbox loses focus."
+              },
+              {
+                "name": "dds-focus",
+                "type": "{ void }",
+                "description": "Emitted when the checkbox gains focus."
+              },
+              {
+                "name": "dds-input",
+                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
+                "description": "Emitted when the checkbox receives input."
               }
             ]
           }
@@ -1507,305 +1712,100 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "noBorder",
-              "description": "Removes the border around the card",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "noPadding",
-              "description": "Removes the padding around the card",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "targetBlankText",
-              "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "target",
-              "description": "The link target of the card",
-              "value": {
-                "type": "'_blank' | '_self' | '_parent' | '_top'",
-                "default": "'_self'"
-              }
-            },
-            {
-              "name": "href",
-              "description": "The URL of the card.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "rel",
-              "description": "The rel of the card link.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The content of the card." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "interactive",
-                "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
-                "type": "boolean"
-              },
-              {
-                "name": "renderAs",
-                "description": "The render as type of the card, only applicable when interactive.",
-                "type": "'a' | 'button'"
-              },
-              {
-                "name": "disabled",
-                "description": "Whether the card is disabled.",
-                "type": "boolean"
-              },
-              {
-                "name": "noBorder",
-                "description": "Removes the border around the card",
-                "type": "boolean"
-              },
-              {
-                "name": "noPadding",
-                "description": "Removes the padding around the card",
-                "type": "boolean"
-              },
-              {
-                "name": "targetBlankText",
-                "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
-                "type": "string"
-              },
-              {
-                "name": "target",
-                "description": "The link target of the card",
-                "type": "'_blank' | '_self' | '_parent' | '_top'"
-              },
-              {
-                "name": "href",
-                "description": "The URL of the card.",
-                "type": "string"
-              },
-              {
-                "name": "rel",
-                "description": "The rel of the card link.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The size of the card. Default is `sm`.",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "indeterminate",
-              "description": "Whether the checkbox is indeterminate",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "preventDefault",
-              "description": "Whether the checkbox should prevent the default action",
+              "name": "noBorder",
+              "description": "Removes the border around the card",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "border",
-              "description": "This sets up border around the checkbox, when true.",
+              "name": "noPadding",
+              "description": "Removes the padding around the card",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "readonly",
-              "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "targetBlankText",
+              "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
+              "value": { "type": "string" }
             },
             {
-              "name": "type",
-              "description": "The type of the checkbox",
+              "name": "target",
+              "description": "The link target of the card",
               "value": {
-                "type": "'normal' | 'background'",
-                "default": "'normal'"
+                "type": "'_blank' | '_self' | '_parent' | '_top'",
+                "default": "'_self'"
               }
-            }
-          ],
-          "events": [
-            {
-              "name": "dds-change",
-              "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
-              "description": "Fired when the checkbox is checked or unchecked."
-            },
-            {
-              "name": "dds-blur",
-              "type": "{ void }",
-              "description": "Emitted when the checkbox loses focus."
             },
             {
-              "name": "dds-focus",
-              "type": "{ void }",
-              "description": "Emitted when the checkbox gains focus."
+              "name": "href",
+              "description": "The URL of the card.",
+              "value": { "type": "string" }
             },
             {
-              "name": "dds-input",
-              "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
-              "description": "Emitted when the checkbox receives input."
+              "name": "rel",
+              "description": "The rel of the card link.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
             }
           ],
+          "slots": [{ "name": "", "description": "The content of the card." }],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "indeterminate",
-                "description": "Whether the checkbox is indeterminate",
+                "name": "interactive",
+                "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
                 "type": "boolean"
               },
               {
-                "name": "preventDefault",
-                "description": "Whether the checkbox should prevent the default action",
-                "type": "boolean"
+                "name": "renderAs",
+                "description": "The render as type of the card, only applicable when interactive.",
+                "type": "'a' | 'button'"
               },
               {
-                "name": "border",
-                "description": "This sets up border around the checkbox, when true.",
+                "name": "disabled",
+                "description": "Whether the card is disabled.",
                 "type": "boolean"
               },
               {
-                "name": "readonly",
-                "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
+                "name": "noBorder",
+                "description": "Removes the border around the card",
                 "type": "boolean"
               },
               {
-                "name": "type",
-                "description": "The type of the checkbox",
-                "type": "'normal' | 'background'"
-              },
-              { "name": "focusElement", "type": "HTMLInputElement" },
-              { "name": "feedbackId" },
-              {
-                "name": "name",
-                "description": "The name of the checkbox.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The value of the checkbox.",
-                "type": "string"
-              },
-              {
-                "name": "checked",
-                "description": "Whether the checkbox is checked.",
+                "name": "noPadding",
+                "description": "Removes the padding around the card",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The label of the checkbox.",
+                "name": "targetBlankText",
+                "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
                 "type": "string"
               },
               {
-                "name": "hideLabel",
-                "description": "Visually hides the label while keeping it available to assistive technology. (default: false)",
-                "type": "boolean"
+                "name": "target",
+                "description": "The link target of the card",
+                "type": "'_blank' | '_self' | '_parent' | '_top'"
               },
               {
-                "name": "description",
-                "description": "The description of the checkbox.",
+                "name": "href",
+                "description": "The URL of the card.",
                 "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "Whether the checkbox is disabled.",
-                "type": "boolean"
-              },
-              {
-                "name": "required",
-                "description": "Whether the checkbox is required.",
-                "type": "boolean"
+                "name": "rel",
+                "description": "The rel of the card link.",
+                "type": "string"
               },
               {
                 "name": "size",
-                "description": "The size of the checkbox. Default is 'sm'.",
-                "type": "'xs' | 'sm' | 'lg'"
+                "description": "The size of the card. Default is `sm`.",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
                 "name": "sizeMap",
                 "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
-              },
-              {
-                "name": "labelPlacement",
-                "description": "The placement of the label.",
-                "type": "'left' | 'right'"
-              },
-              {
-                "name": "descriptionPlacement",
-                "description": "The placement of the description.",
-                "type": "'top' | 'bottom'"
-              },
-              {
-                "name": "subtle",
-                "description": "The weight of the label.",
-                "type": "boolean"
-              },
-              {
-                "name": "feedback",
-                "description": "The feedback of the checkbox.",
-                "type": "string"
-              },
-              {
-                "name": "feedbackType",
-                "description": "The feedback type of the checkbox.",
-                "type": "'negative' | 'positive' | 'warning'"
-              },
-              {
-                "name": "invalid",
-                "description": "The invalid state of the checkbox.",
-                "type": "boolean"
-              },
-              {
-                "name": "optional",
-                "description": "The optional state of the checkbox.",
-                "type": "boolean"
-              },
-              {
-                "name": "optionalLabel",
-                "description": "The optional label of the checkbox.",
-                "type": "string"
-              },
-              {
-                "name": "requiredLabel",
-                "description": "The required indicator of the checkbox. (default: '*')",
-                "type": "string"
               }
             ],
-            "events": [
-              {
-                "name": "dds-change",
-                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
-                "description": "Fired when the checkbox is checked or unchecked."
-              },
-              {
-                "name": "dds-blur",
-                "type": "{ void }",
-                "description": "Emitted when the checkbox loses focus."
-              },
-              {
-                "name": "dds-focus",
-                "type": "{ void }",
-                "description": "Emitted when the checkbox gains focus."
-              },
-              {
-                "name": "dds-input",
-                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
-                "description": "Emitted when the checkbox receives input."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -2954,43 +2954,6 @@
             ]
           }
         },
-        {
-          "name": "dap-ds-dap-badge",
-          "description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The variant of the DÁP badge",
-              "value": {
-                "type": "'normal' | 'inverted'",
-                "default": "'normal'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "Description of badge *" }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The variant of the DÁP badge",
-                "type": "'normal' | 'inverted'"
-              },
-              {
-                "name": "size",
-                "description": "The size of the DÁP badge. Default is `sm`.",
-                "type": "'sm' | 'lg'"
-              },
-              {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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\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\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- **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.",
@@ -3496,6 +3459,43 @@
             ]
           }
         },
+        {
+          "name": "dap-ds-dap-badge",
+          "description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant of the DÁP badge",
+              "value": {
+                "type": "'normal' | 'inverted'",
+                "default": "'normal'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Description of badge *" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The variant of the DÁP badge",
+                "type": "'normal' | 'inverted'"
+              },
+              {
+                "name": "size",
+                "description": "The size of the DÁP badge. Default is `sm`.",
+                "type": "'sm' | 'lg'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.\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.",
@@ -5599,7 +5599,7 @@
         },
         {
           "name": "dap-ds-link",
-          "description": "A link is a reference to a web resource.\n---\n\n\n### **Events:**\n - **dds-click** - Emitted when the link is clicked.\n\n### **Slots:**\n - _default_ - The text of the link.\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the visible link so it is always accessible to programmatic clicks.\n\n### **CSS Properties:**\n - **--dds-link-color** - The color of the link text (default: var(--dds-link-enabled)). _(default: undefined)_\n- **--dds-link-hover-color** - The color of the link text on hover (default: var(--dds-link-hover)). _(default: undefined)_\n- **--dds-link-active-color** - The color of the link text when active (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-visited-color** - The color of the visited link text (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-font-size** - The font size of the link text (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-link-line-height** - The line height of the link text (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-font-weight** - The font weight of the link text (default: var(--dds-font-weight-medium)). _(default: undefined)_\n- **--dds-link-text-decoration** - The text decoration of the link (default: underline). _(default: undefined)_\n- **--dds-link-neutral-color** - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)). _(default: undefined)_\n- **--dds-link-neutral-hover-color** - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)). _(default: undefined)_\n- **--dds-link-neutral-active-color** - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-neutral-visited-color** - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-brand-color** - The color of the brand variant link (default: var(--dds-link-enabled)). _(default: undefined)_\n- **--dds-link-brand-hover-color** - The hover color of the brand variant link (default: var(--dds-link-hover)). _(default: undefined)_\n- **--dds-link-brand-active-color** - The active color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-brand-visited-color** - The visited color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-inverted-color** - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)). _(default: undefined)_\n- **--dds-link-inverted-hover-color** - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)). _(default: undefined)_\n- **--dds-link-inverted-active-color** - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)). _(default: undefined)_\n- **--dds-link-inverted-visited-color** - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)). _(default: undefined)_\n- **--dds-link-warning-color** - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). _(default: undefined)_\n- **--dds-link-warning-hover-color** - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)). _(default: undefined)_\n- **--dds-link-warning-active-color** - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)). _(default: undefined)_\n- **--dds-link-warning-visited-color** - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). _(default: undefined)_\n- **--dds-link-disabled-color** - The color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-hover-color** - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-active-color** - The active color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-visited-color** - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-lg-font-size** - The font size of the large link (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-link-lg-line-height** - The line height of the large link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-md-font-size** - The font size of the medium link (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-link-md-line-height** - The line height of the medium link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-sm-font-size** - The font size of the small link (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-link-sm-line-height** - The line height of the small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-xs-font-size** - The font size of the extra small link (default: var(--dds-font-xs)). _(default: undefined)_\n- **--dds-link-xs-line-height** - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-normal-font-weight** - The font weight of the normal link (default: var(--dds-font-weight-medium)). _(default: undefined)_\n- **--dds-link-bold-font-weight** - The font weight of the bold link (default: var(--dds-font-weight-bold)). _(default: undefined)_\n- **--dds-link-no-underline-text-decoration** - The text decoration when underline is removed (default: none). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main link container.\n- **text** - The text of the link.",
+          "description": "A link is a reference to a web resource.\n---\n\n\n### **Events:**\n - **dds-click** - Emitted when the link is clicked.\n\n### **Slots:**\n - _default_ - The text of the link.\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the visible link so it is always accessible to programmatic clicks.\n\n### **CSS Properties:**\n - **--dds-link-neutral-color** - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)). _(default: undefined)_\n- **--dds-link-neutral-hover-color** - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)). _(default: undefined)_\n- **--dds-link-neutral-active-color** - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-neutral-visited-color** - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-brand-color** - The color of the brand variant link (default: var(--dds-link-enabled)). _(default: undefined)_\n- **--dds-link-brand-hover-color** - The hover color of the brand variant link (default: var(--dds-link-hover)). _(default: undefined)_\n- **--dds-link-brand-active-color** - The active color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-brand-visited-color** - The visited color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-inverted-color** - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)). _(default: undefined)_\n- **--dds-link-inverted-hover-color** - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)). _(default: undefined)_\n- **--dds-link-inverted-active-color** - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)). _(default: undefined)_\n- **--dds-link-inverted-visited-color** - The visited color of the inverted variant link (default: var(--dds-link-inverted-pressed)). _(default: undefined)_\n- **--dds-link-warning-color** - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). _(default: undefined)_\n- **--dds-link-warning-hover-color** - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)). _(default: undefined)_\n- **--dds-link-warning-active-color** - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)). _(default: undefined)_\n- **--dds-link-warning-visited-color** - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)). _(default: undefined)_\n- **--dds-link-disabled-color** - The color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-hover-color** - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-active-color** - The active color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-visited-color** - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-lg-font-size** - The font size of the large link (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-link-lg-line-height** - The line height of the large link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-md-font-size** - The font size of the medium link (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-link-md-line-height** - The line height of the medium link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-sm-font-size** - The font size of the small link (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-link-sm-line-height** - The line height of the small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-xs-font-size** - The font size of the extra small link (default: var(--dds-font-xs)). _(default: undefined)_\n- **--dds-link-xs-line-height** - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-normal-font-weight** - The font weight of the normal link (default: var(--dds-font-weight-medium)). _(default: undefined)_\n- **--dds-link-bold-font-weight** - The font weight of the bold link (default: var(--dds-font-weight-bold)). _(default: undefined)_\n- **--dds-link-no-underline-text-decoration** - The text decoration when underline is removed (default: none). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main link container.\n- **text** - The text of the link.",
           "doc-url": "",
           "attributes": [
             {
@@ -6162,7 +6162,7 @@
         },
         {
           "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 - **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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -6458,6 +6458,11 @@
                 "description": "Computed property to detect if this item contains nested navigation menu items.",
                 "type": "boolean"
               },
+              {
+                "name": "activationTrigger",
+                "description": "The element keyboard activation should act on: the element slotted into\n`trigger` when one is provided, otherwise the default trigger button\nrendered in the shadow root.",
+                "type": "HTMLElement | null"
+              },
               {
                 "name": "size",
                 "description": "The size of the popup. Default is 'sm'.",
@@ -9801,157 +9806,6 @@
             "events": []
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "last",
-              "description": "If the cell is the last one.",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "role",
-              "description": "The html role of the cell",
-              "value": { "type": "string", "default": "'cell'" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "last",
-                "description": "If the cell is the last one.",
-                "type": "boolean"
-              },
-              {
-                "name": "role",
-                "description": "The html role of the cell",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-table-header",
-          "description": "Table header cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-header-padding-block** - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-padding-inline-start** - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-header-padding-inline-end** - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-border-width** - Width of the header cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-header-border-color** - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-header-text-color** - Text color of the header cell. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-table-header-font-weight** - Font weight of the header cell text. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-table-header-line-height** - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main header cell container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "last",
-              "description": "If the header cell is the last one.",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "role",
-              "description": "The html role of the header cell",
-              "value": { "type": "string", "default": "'columnheader'" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "last",
-                "description": "If the header cell is the last one.",
-                "type": "boolean"
-              },
-              {
-                "name": "role",
-                "description": "The html role of the header cell",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-table-row",
-          "description": "Table row component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n\n### **CSS Properties:**\n - **--dds-table-row-padding-right** - Padding right for the last table header, (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-row-padding-top** - Padding top for table headers in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-padding-bottom** - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-border-color** - Border color for table cells and headers, (default: transparent) _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "role",
-              "description": "The html role of the row",
-              "value": { "type": "string", "default": "'row'" }
-            },
-            {
-              "name": "mobile",
-              "description": "If the row is mobile design",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "role",
-                "description": "The html role of the row",
-                "type": "string"
-              },
-              {
-                "name": "mobile",
-                "description": "If the row is mobile design",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "role",
-              "value": { "type": "string", "default": "'grid'" }
-            },
-            {
-              "name": "mobile",
-              "description": "If the table has mobile design",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "caption",
-              "description": "The caption of the table",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot. Accepts `dap-ds-table-row` elements."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "role", "type": "string" },
-              {
-                "name": "mobile",
-                "description": "If the table has mobile design",
-                "type": "boolean"
-              },
-              {
-                "name": "caption",
-                "description": "The caption of the table",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
@@ -10774,48 +10628,199 @@
                 "type": "boolean"
               },
               {
-                "name": "autocomplete",
-                "description": "The autocomplete of the timepicker.",
+                "name": "autocomplete",
+                "description": "The autocomplete of the timepicker.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "dds-change",
+                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
+                "description": "Fired when the timepicker value changes."
+              },
+              {
+                "name": "dds-input",
+                "type": "{ value: string }",
+                "description": "Fired when the timepicker input value changes."
+              },
+              {
+                "name": "dds-valid-time",
+                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
+                "description": "Fired when the timepicker input value is valid. Happens on manual input typing."
+              },
+              {
+                "name": "dds-invalid-time",
+                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }",
+                "description": "Fired when the timepicker input value is invalid. Happens on manual input typing."
+              },
+              {
+                "name": "dds-clear",
+                "type": "{ void }",
+                "description": "Fired when the timepicker is cleared."
+              },
+              {
+                "name": "dds-focus",
+                "type": "{ void }",
+                "description": "Emitted when the timepicker gains focus."
+              },
+              {
+                "name": "dds-blur",
+                "type": "{ void }",
+                "description": "Emitted when the timepicker loses focus."
+              }
+            ]
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "last",
+              "description": "If the cell is the last one.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "role",
+              "description": "The html role of the cell",
+              "value": { "type": "string", "default": "'cell'" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "last",
+                "description": "If the cell is the last one.",
+                "type": "boolean"
+              },
+              {
+                "name": "role",
+                "description": "The html role of the cell",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-table-header",
+          "description": "Table header cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-header-padding-block** - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-padding-inline-start** - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-header-padding-inline-end** - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-border-width** - Width of the header cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-header-border-color** - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-header-text-color** - Text color of the header cell. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-table-header-font-weight** - Font weight of the header cell text. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-table-header-line-height** - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main header cell container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "last",
+              "description": "If the header cell is the last one.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "role",
+              "description": "The html role of the header cell",
+              "value": { "type": "string", "default": "'columnheader'" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "last",
+                "description": "If the header cell is the last one.",
+                "type": "boolean"
+              },
+              {
+                "name": "role",
+                "description": "The html role of the header cell",
                 "type": "string"
               }
             ],
-            "events": [
-              {
-                "name": "dds-change",
-                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
-                "description": "Fired when the timepicker value changes."
-              },
-              {
-                "name": "dds-input",
-                "type": "{ value: string }",
-                "description": "Fired when the timepicker input value changes."
-              },
-              {
-                "name": "dds-valid-time",
-                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
-                "description": "Fired when the timepicker input value is valid. Happens on manual input typing."
-              },
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-table-row",
+          "description": "Table row component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n\n### **CSS Properties:**\n - **--dds-table-row-padding-right** - Padding right for the last table header, (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-row-padding-top** - Padding top for table headers in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-padding-bottom** - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-border-color** - Border color for table cells and headers, (default: transparent) _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "role",
+              "description": "The html role of the row",
+              "value": { "type": "string", "default": "'row'" }
+            },
+            {
+              "name": "mobile",
+              "description": "If the row is mobile design",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "dds-invalid-time",
-                "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }",
-                "description": "Fired when the timepicker input value is invalid. Happens on manual input typing."
+                "name": "role",
+                "description": "The html role of the row",
+                "type": "string"
               },
               {
-                "name": "dds-clear",
-                "type": "{ void }",
-                "description": "Fired when the timepicker is cleared."
-              },
+                "name": "mobile",
+                "description": "If the row is mobile design",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "role",
+              "value": { "type": "string", "default": "'grid'" }
+            },
+            {
+              "name": "mobile",
+              "description": "If the table has mobile design",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "caption",
+              "description": "The caption of the table",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot. Accepts `dap-ds-table-row` elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "role", "type": "string" },
               {
-                "name": "dds-focus",
-                "type": "{ void }",
-                "description": "Emitted when the timepicker gains focus."
+                "name": "mobile",
+                "description": "If the table has mobile design",
+                "type": "boolean"
               },
               {
-                "name": "dds-blur",
-                "type": "{ void }",
-                "description": "Emitted when the timepicker loses focus."
+                "name": "caption",
+                "description": "The caption of the table",
+                "type": "string"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -11642,7 +11647,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-home-6-line",
+          "name": "dap-ds-icon-arrow-down-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11695,7 +11700,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-line",
+          "name": "dap-ds-icon-arrow-down-s-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11748,7 +11753,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-s-fill",
+          "name": "dap-ds-icon-arrow-down-s-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11801,7 +11806,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-s-line",
+          "name": "dap-ds-icon-arrow-left-down-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11854,7 +11859,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-down-line",
+          "name": "dap-ds-icon-arrow-left-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11960,7 +11965,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.",
           "doc-url": "",
           "attributes": [
@@ -12013,7 +12018,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-s-fill",
+          "name": "dap-ds-icon-arrow-left-s-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12066,7 +12071,7 @@
           }
         },
         {
-          "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.",
           "doc-url": "",
           "attributes": [
@@ -12119,7 +12124,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-up-line",
+          "name": "dap-ds-icon-arrow-right-down-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12172,7 +12177,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-down-line",
+          "name": "dap-ds-icon-arrow-right-l-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12225,7 +12230,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-l-line",
+          "name": "dap-ds-icon-arrow-right-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12278,7 +12283,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-line",
+          "name": "dap-ds-icon-arrow-right-s-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12331,7 +12336,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-s-fill",
+          "name": "dap-ds-icon-arrow-right-s-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12384,7 +12389,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-s-line",
+          "name": "dap-ds-icon-arrow-right-up-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12437,7 +12442,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-up-line",
+          "name": "dap-ds-icon-arrow-up-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12490,7 +12495,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-line",
+          "name": "dap-ds-icon-arrow-up-s-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12543,7 +12548,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-s-fill",
+          "name": "dap-ds-icon-arrow-up-s-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12596,7 +12601,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-s-line",
+          "name": "dap-ds-icon-expand-up-down-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12649,7 +12654,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-expand-up-down-fill",
+          "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": [
@@ -13550,7 +13555,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-add-line",
+          "name": "dap-ds-icon-account-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13603,7 +13608,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-fill",
+          "name": "dap-ds-icon-account-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13656,7 +13661,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-line",
+          "name": "dap-ds-icon-user-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13709,7 +13714,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line",
+          "name": "dap-ds-icon-user-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13762,7 +13767,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line2",
+          "name": "dap-ds-icon-add-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13815,7 +13820,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill",
+          "name": "dap-ds-icon-alert-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13868,7 +13873,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
+          "name": "dap-ds-icon-alert-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13921,7 +13926,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-line",
+          "name": "dap-ds-icon-check-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13974,7 +13979,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-fill",
+          "name": "dap-ds-icon-check-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14027,7 +14032,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-line",
+          "name": "dap-ds-icon-checkbox-blank-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14080,7 +14085,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-fill",
+          "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14133,7 +14138,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-line",
+          "name": "dap-ds-icon-checkbox-blank-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14186,7 +14191,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-fill",
+          "name": "dap-ds-icon-checkbox-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14239,7 +14244,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-line",
+          "name": "dap-ds-icon-checkbox-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14292,7 +14297,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-fill",
+          "name": "dap-ds-icon-close-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14345,7 +14350,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-line",
+          "name": "dap-ds-icon-close-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14398,7 +14403,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-download-line",
+          "name": "dap-ds-icon-close-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14451,7 +14456,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-fill",
+          "name": "dap-ds-icon-close-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14504,7 +14509,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-line",
+          "name": "dap-ds-icon-delete-bin-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14557,7 +14562,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-external-link-line",
+          "name": "dap-ds-icon-delete-bin-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14610,7 +14615,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-line",
+          "name": "dap-ds-icon-download-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14663,7 +14668,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-off-line",
+          "name": "dap-ds-icon-error-warning-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14716,7 +14721,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-forbid-fill",
+          "name": "dap-ds-icon-error-warning-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14769,7 +14774,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-2-fill",
+          "name": "dap-ds-icon-external-link-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14822,7 +14827,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-fill",
+          "name": "dap-ds-icon-eye-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14875,7 +14880,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-line",
+          "name": "dap-ds-icon-eye-off-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14928,7 +14933,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lightbulb-fill",
+          "name": "dap-ds-icon-information-2-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14981,7 +14986,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-loading-spinner",
+          "name": "dap-ds-icon-information-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15034,7 +15039,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-fill",
+          "name": "dap-ds-icon-forbid-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15087,7 +15092,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-line",
+          "name": "dap-ds-icon-information-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15140,7 +15145,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line",
+          "name": "dap-ds-icon-lightbulb-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15193,7 +15198,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line-s",
+          "name": "dap-ds-icon-loading-spinner",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15246,7 +15251,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-2-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": [
@@ -15299,7 +15304,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-line",
+          "name": "dap-ds-icon-lock-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15352,7 +15357,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-search-line",
+          "name": "dap-ds-icon-menu-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15405,7 +15410,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-share-line",
+          "name": "dap-ds-icon-menu-line-s",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15458,7 +15463,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-fill",
+          "name": "dap-ds-icon-more-2-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15511,7 +15516,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-line",
+          "name": "dap-ds-icon-more-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15564,7 +15569,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-star-fill",
+          "name": "dap-ds-icon-search-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15617,7 +15622,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-line",
+          "name": "dap-ds-icon-share-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15670,7 +15675,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-line2",
+          "name": "dap-ds-icon-shield-check-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15723,7 +15728,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-fill",
+          "name": "dap-ds-icon-shield-check-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15776,7 +15781,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-line",
+          "name": "dap-ds-icon-star-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15829,7 +15834,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-fill",
+          "name": "dap-ds-icon-subtract-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15882,7 +15887,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-line",
+          "name": "dap-ds-icon-subtract-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15935,7 +15940,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-line",
+          "name": "dap-ds-icon-time-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15988,7 +15993,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-in-line",
+          "name": "dap-ds-icon-time-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16041,7 +16046,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-out-line",
+          "name": "dap-ds-icon-upload-2-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16094,7 +16099,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-fill",
+          "name": "dap-ds-icon-upload-2-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16147,7 +16152,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-line",
+          "name": "dap-ds-icon-upload-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16200,7 +16205,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-fill",
+          "name": "dap-ds-icon-zoom-in-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16253,7 +16258,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-line",
+          "name": "dap-ds-icon-zoom-out-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [