npm - dap-design-system - Versions diffs - 0.61.1 → 0.61.2 - Mend

dap-design-system 0.61.1 → 0.61.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/icon-button/icon-button.component.js +32 -29
package/dist/components/icon-button/icon-button.component.js.map +1 -1
package/dist/manifest/types/vue/index.d.ts +587 -587
package/dist/manifest/vscode.html-custom-data.json +508 -508
package/dist/manifest/web-types.json +1202 -1202
package/dist/react/index.d.ts +19 -19
package/dist/react-types.ts +20 -20
package/dist/react.js +208 -208
package/package.json +1 -1

package/dist/manifest/web-types.json CHANGED Viewed

@@ -6,45 +6,6 @@
   "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.",
@@ -153,193 +114,323 @@
           }
         },
         {
-          "name": "dap-ds-avatar-group",
-          "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
+          "name": "dap-ds-avatar",
+          "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "layout",
-              "description": "Layout type for the avatar group",
-              "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
+              "name": "shape",
+              "description": "The shape of the avatar",
+              "value": {
+                "type": "'circle' | 'rounded' | 'square'",
+                "default": "'circle'"
+              }
             },
             {
-              "name": "max",
-              "description": "Maximum number of avatars to show before showing overflow",
-              "value": { "type": "number", "default": "3" }
+              "name": "variant",
+              "description": "The variant type of the avatar",
+              "value": {
+                "type": "'image' | 'initials' | 'icon'",
+                "default": "'image'"
+              }
             },
             {
-              "name": "show-total",
-              "description": "Whether to show the total count in overflow indicator",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "src",
+              "description": "The source of the avatar image",
+              "value": { "type": "string" }
             },
             {
-              "name": "interactive-overflow",
-              "description": "Interactive overflow indicator",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "alt",
+              "description": "The alt text of the avatar",
+              "value": { "type": "string" }
             },
             {
-              "name": "label",
-              "description": "Accessible label for the avatar group",
+              "name": "initials",
+              "description": "The initials to display when variant is 'initials'",
               "value": { "type": "string" }
             },
             {
-              "name": "overflow-label",
-              "description": "Accessible label for the overflow indicator",
+              "name": "label",
+              "description": "Accessible label for the avatar",
               "value": { "type": "string" }
+            },
+            {
+              "name": "loading",
+              "description": "Loading state indicator",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "interactive",
+              "description": "Whether the avatar is interactive (clickable)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "The width of the avatar. This will override the size",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "height",
+              "description": "The height of the avatar. This will override the size",
+              "value": { "type": "number" }
             }
           ],
           "slots": [
             {
-              "name": "",
-              "description": "The avatars to display in the group."
+              "name": "icon",
+              "description": "The icon to display when variant is 'icon'."
+            },
+            {
+              "name": "fallback",
+              "description": "Custom fallback content when image fails to load."
             }
           ],
           "events": [
             {
-              "name": "dds-overflow-click",
-              "description": "Fired when the overflow indicator is clicked."
+              "name": "dds-load",
+              "description": "Fired when the image loads successfully."
+            },
+            {
+              "name": "dds-error",
+              "description": "Fired when the image fails to load."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "layout",
-                "description": "Layout type for the avatar group",
-                "type": "'stack' | 'grid'"
+                "name": "shape",
+                "description": "The shape of the avatar",
+                "type": "'circle' | 'rounded' | 'square'"
               },
               {
-                "name": "max",
-                "description": "Maximum number of avatars to show before showing overflow",
-                "type": "number"
+                "name": "variant",
+                "description": "The variant type of the avatar",
+                "type": "'image' | 'initials' | 'icon'"
               },
               {
-                "name": "showTotal",
-                "description": "Whether to show the total count in overflow indicator",
-                "type": "boolean"
+                "name": "src",
+                "description": "The source of the avatar image",
+                "type": "string"
               },
               {
-                "name": "interactiveOverflow",
-                "description": "Interactive overflow indicator",
-                "type": "boolean"
+                "name": "alt",
+                "description": "The alt text of the avatar",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "Accessible label for the avatar group",
+                "name": "initials",
+                "description": "The initials to display when variant is 'initials'",
                 "type": "string"
               },
               {
-                "name": "overflowLabel",
-                "description": "Accessible label for the overflow indicator",
+                "name": "label",
+                "description": "Accessible label for the avatar",
                 "type": "string"
               },
+              {
+                "name": "loading",
+                "description": "Loading state indicator",
+                "type": "boolean"
+              },
+              {
+                "name": "interactive",
+                "description": "Whether the avatar is interactive (clickable)",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "The width of the avatar. This will override the size",
+                "type": "number"
+              },
+              {
+                "name": "height",
+                "description": "The height of the avatar. This will override the size",
+                "type": "number"
+              },
               {
                 "name": "size",
-                "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
+                "description": "The size of the avatar. Default is `md`.",
                 "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
               },
               {
                 "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
+                "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
               }
             ],
             "events": [
               {
-                "name": "dds-overflow-click",
-                "description": "Fired when the overflow indicator is clicked."
+                "name": "dds-load",
+                "description": "Fired when the image loads successfully."
+              },
+              {
+                "name": "dds-error",
+                "description": "Fired when the image fails to load."
               }
             ]
           }
         },
         {
-          "name": "dap-ds-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.",
+          "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": "variant",
-              "description": "The variant of the banner",
-              "value": {
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
-                "default": "'brand'"
-              }
-            },
-            {
-              "name": "closeable",
-              "description": "Whether the banner is closeable",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "opened",
-              "description": "State of the banner. If false banner is hidden",
+              "name": "autoClose",
+              "description": "Whether to close other accordions when one is opened.",
               "value": { "type": "string", "default": "'true'" }
             },
             {
-              "name": "closeButtonLabel",
-              "description": "The aria-label for the close button",
-              "value": { "type": "string", "default": "'close'" }
-            },
-            {
-              "name": "closeButtonTestId",
-              "description": "`data-testid` for the close button.",
-              "value": { "type": "string", "default": "'banner-close-button'" }
-            },
-            {
-              "name": "icon",
-              "description": "The icon of the banner, this is a name of a built icon icon",
-              "value": { "type": "string" }
+              "name": "variant",
+              "description": "The variant of the accordion",
+              "value": {
+                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
+                "default": "'default'"
+              }
             }
           ],
           "slots": [
-            { "name": "", "description": "The content of the banner." },
-            { "name": "actions", "description": "Actions of banner" },
-            { "name": "icon", "description": "The icon of the banner." }
-          ],
-          "events": [
-            {
-              "name": "dds-close",
-              "type": "{ void }",
-              "description": "Event fired when the banner is closed."
-            }
+            { "name": "", "description": "The content of the accordion group." }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "variant",
-                "description": "The variant of the banner",
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
-              },
-              {
-                "name": "closeable",
-                "description": "Whether the banner is closeable",
-                "type": "boolean"
-              },
-              {
-                "name": "opened",
-                "description": "State of the banner. If false banner is hidden",
-                "type": "string"
-              },
-              {
-                "name": "closeButtonLabel",
-                "description": "The aria-label for the close button",
+                "name": "autoClose",
+                "description": "Whether to close other accordions when one is opened.",
                 "type": "string"
               },
               {
-                "name": "closeButtonTestId",
-                "description": "`data-testid` for the close button.",
-                "type": "string"
-              },
+                "name": "variant",
+                "description": "The variant of the accordion",
+                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
+              }
+            ],
+            "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "layout",
+              "description": "Layout type for the avatar group",
+              "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
+            },
+            {
+              "name": "max",
+              "description": "Maximum number of avatars to show before showing overflow",
+              "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "show-total",
+              "description": "Whether to show the total count in overflow indicator",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "interactive-overflow",
+              "description": "Interactive overflow indicator",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible label for the avatar group",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "overflow-label",
+              "description": "Accessible label for the overflow indicator",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The avatars to display in the group."
+            }
+          ],
+          "events": [
+            {
+              "name": "dds-overflow-click",
+              "description": "Fired when the overflow indicator is clicked."
+            }
+          ],
+          "js": {
+            "properties": [
               {
-                "name": "icon",
-                "description": "The icon of the banner, this is a name of a built icon icon",
+                "name": "layout",
+                "description": "Layout type for the avatar group",
+                "type": "'stack' | 'grid'"
+              },
+              {
+                "name": "max",
+                "description": "Maximum number of avatars to show before showing overflow",
+                "type": "number"
+              },
+              {
+                "name": "showTotal",
+                "description": "Whether to show the total count in overflow indicator",
+                "type": "boolean"
+              },
+              {
+                "name": "interactiveOverflow",
+                "description": "Interactive overflow indicator",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible label for the avatar group",
+                "type": "string"
+              },
+              {
+                "name": "overflowLabel",
+                "description": "Accessible label for the overflow indicator",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
+                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
                 "type": "string"
               }
             ],
             "events": [
               {
-                "name": "dds-close",
-                "type": "{ void }",
-                "description": "Event fired when the banner is closed."
+                "name": "dds-overflow-click",
+                "description": "Fired when the overflow indicator is clicked."
               }
             ]
           }
@@ -404,6 +495,99 @@
             "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant of the banner",
+              "value": {
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
+                "default": "'brand'"
+              }
+            },
+            {
+              "name": "closeable",
+              "description": "Whether the banner is closeable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "opened",
+              "description": "State of the banner. If false banner is hidden",
+              "value": { "type": "string", "default": "'true'" }
+            },
+            {
+              "name": "closeButtonLabel",
+              "description": "The aria-label for the close button",
+              "value": { "type": "string", "default": "'close'" }
+            },
+            {
+              "name": "closeButtonTestId",
+              "description": "`data-testid` for the close button.",
+              "value": { "type": "string", "default": "'banner-close-button'" }
+            },
+            {
+              "name": "icon",
+              "description": "The icon of the banner, this is a name of a built icon icon",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the banner." },
+            { "name": "actions", "description": "Actions of banner" },
+            { "name": "icon", "description": "The icon of the banner." }
+          ],
+          "events": [
+            {
+              "name": "dds-close",
+              "type": "{ void }",
+              "description": "Event fired when the banner is closed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The variant of the banner",
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
+              },
+              {
+                "name": "closeable",
+                "description": "Whether the banner is closeable",
+                "type": "boolean"
+              },
+              {
+                "name": "opened",
+                "description": "State of the banner. If false banner is hidden",
+                "type": "string"
+              },
+              {
+                "name": "closeButtonLabel",
+                "description": "The aria-label for the close button",
+                "type": "string"
+              },
+              {
+                "name": "closeButtonTestId",
+                "description": "`data-testid` for the close button.",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "The icon of the banner, this is a name of a built icon icon",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "dds-close",
+                "type": "{ void }",
+                "description": "Event fired when the banner is closed."
+              }
+            ]
+          }
+        },
         {
           "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.",
@@ -450,213 +634,29 @@
           }
         },
         {
-          "name": "dap-ds-avatar",
-          "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
+          "name": "dap-ds-breadcrumb-item",
+          "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "shape",
-              "description": "The shape of the avatar",
-              "value": {
-                "type": "'circle' | 'rounded' | 'square'",
-                "default": "'circle'"
-              }
+              "name": "href",
+              "description": "The URL of the breadcrumb item.",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "variant",
-              "description": "The variant type of the avatar",
-              "value": {
-                "type": "'image' | 'initials' | 'icon'",
-                "default": "'image'"
-              }
+              "name": "target",
+              "description": "The target of the breadcrumb item.",
+              "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
             },
             {
-              "name": "src",
-              "description": "The source of the avatar image",
-              "value": { "type": "string" }
+              "name": "rel",
+              "description": "The rel of the breadcrumb item link.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
             },
             {
-              "name": "alt",
-              "description": "The alt text of the avatar",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "initials",
-              "description": "The initials to display when variant is 'initials'",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "label",
-              "description": "Accessible label for the avatar",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "loading",
-              "description": "Loading state indicator",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "interactive",
-              "description": "Whether the avatar is interactive (clickable)",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "width",
-              "description": "The width of the avatar. This will override the size",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "height",
-              "description": "The height of the avatar. This will override the size",
-              "value": { "type": "number" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "The icon to display when variant is 'icon'."
-            },
-            {
-              "name": "fallback",
-              "description": "Custom fallback content when image fails to load."
-            }
-          ],
-          "events": [
-            {
-              "name": "dds-load",
-              "description": "Fired when the image loads successfully."
-            },
-            {
-              "name": "dds-error",
-              "description": "Fired when the image fails to load."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "shape",
-                "description": "The shape of the avatar",
-                "type": "'circle' | 'rounded' | 'square'"
-              },
-              {
-                "name": "variant",
-                "description": "The variant type of the avatar",
-                "type": "'image' | 'initials' | 'icon'"
-              },
-              {
-                "name": "src",
-                "description": "The source of the avatar image",
-                "type": "string"
-              },
-              {
-                "name": "alt",
-                "description": "The alt text of the avatar",
-                "type": "string"
-              },
-              {
-                "name": "initials",
-                "description": "The initials to display when variant is 'initials'",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "Accessible label for the avatar",
-                "type": "string"
-              },
-              {
-                "name": "loading",
-                "description": "Loading state indicator",
-                "type": "boolean"
-              },
-              {
-                "name": "interactive",
-                "description": "Whether the avatar is interactive (clickable)",
-                "type": "boolean"
-              },
-              {
-                "name": "width",
-                "description": "The width of the avatar. This will override the size",
-                "type": "number"
-              },
-              {
-                "name": "height",
-                "description": "The height of the avatar. This will override the size",
-                "type": "number"
-              },
-              {
-                "name": "size",
-                "description": "The size of the avatar. Default is `md`.",
-                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
-              },
-              {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "dds-load",
-                "description": "Fired when the image loads successfully."
-              },
-              {
-                "name": "dds-error",
-                "description": "Fired when the image fails to load."
-              }
-            ]
-          }
-        },
-        {
-          "name": "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-item",
-          "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "href",
-              "description": "The URL of the breadcrumb item.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "target",
-              "description": "The target of the breadcrumb item.",
-              "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
-            },
-            {
-              "name": "rel",
-              "description": "The rel of the breadcrumb item link.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
-            },
-            {
-              "name": "disabled",
-              "description": "Whether the breadcrumb item is disabled.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "disabled",
+              "description": "Whether the breadcrumb item is disabled.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "variant",
@@ -1268,651 +1268,640 @@
           }
         },
         {
-          "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.",
+          "name": "dap-ds-card-actions",
+          "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
           "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",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "border",
-              "description": "This sets up border around the checkbox, when true.",
-              "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": "type",
-              "description": "The type of the checkbox",
-              "value": {
-                "type": "'normal' | 'background'",
-                "default": "'normal'"
-              }
-            }
-          ],
-          "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."
-            }
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The content of the card actions." }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "indeterminate",
-                "description": "Whether the checkbox is indeterminate",
-                "type": "boolean"
-              },
-              {
-                "name": "preventDefault",
-                "description": "Whether the checkbox should prevent the default action",
-                "type": "boolean"
+                "name": "spacing",
+                "description": "The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.",
+                "type": "'top' | 'bottom' | 'both' | 'none'"
               },
+              { "name": "parentSized", "type": "string" },
               {
-                "name": "border",
-                "description": "This sets up border around the checkbox, when true.",
-                "type": "boolean"
+                "name": "size",
+                "description": "The size of the card actions. Default is `sm`.",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
-                "name": "readonly",
-                "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
-                "type": "boolean"
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-card-content",
+          "description": "A card content is a container for content in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card-content.\n\n### **CSS Properties:**\n - **--dds-card-content-padding** - The padding of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-margin** - The margin of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-font-size** - The font size of the card content. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-card-content-line-height** - The line height of the card content. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-card-content-spacing-lg** - The large spacing value. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-content-spacing-md** - The medium spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-sm** - The small spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-top** - The top spacing value. (default: 0) _(default: undefined)_\n- **--dds-card-content-spacing-bottom** - The bottom spacing value. (default: 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card content container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "renderAs",
+              "description": "The base rendered root tag of the card content.",
+              "value": { "type": "string", "default": "'div'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the card-content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "renderAs",
+                "description": "The base rendered root tag of the card content.",
+                "type": "string"
               },
               {
-                "name": "type",
-                "description": "The type of the checkbox",
-                "type": "'normal' | 'background'"
+                "name": "spacing",
+                "description": "The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.",
+                "type": "'top' | 'bottom' | 'both' | 'none'"
               },
-              { "name": "focusElement", "type": "HTMLInputElement" },
-              { "name": "feedbackId" },
+              { "name": "parentSized", "type": "string" },
               {
-                "name": "name",
-                "description": "The name of the checkbox.",
-                "type": "string"
+                "name": "size",
+                "description": "The size of the card subtitle. Default is `sm`.",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
-                "name": "value",
-                "description": "The value of the checkbox.",
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
-              },
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-card-image",
+          "description": "A card image is a container for images in a card.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered.\n\n### **CSS Properties:**\n - **--dds-card-image-width** - The width of the image. (default: 100%) _(default: undefined)_\n- **--dds-card-image-height** - The height of the image. (default: auto) _(default: undefined)_\n- **--dds-card-image-object-fit** - How the image fits within its container. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-position** - The background position of the image. (default: center) _(default: undefined)_\n- **--dds-card-image-background-size** - How the background image is sized. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-repeat** - How the background image repeats. (default: no-repeat) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card image container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "The source of the image.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "alt",
+              "description": "The alt text of the image.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "width",
+              "description": "The width of the image.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "height",
+              "description": "The height of the image.",
+              "value": { "type": "number" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "checked",
-                "description": "Whether the checkbox is checked.",
-                "type": "boolean"
+                "name": "src",
+                "description": "The source of the image.",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "The label of the checkbox.",
+                "name": "alt",
+                "description": "The alt text of the image.",
                 "type": "string"
               },
               {
-                "name": "hideLabel",
-                "description": "Visually hides the label while keeping it available to assistive technology. (default: false)",
-                "type": "boolean"
+                "name": "width",
+                "description": "The width of the image.",
+                "type": "number"
               },
               {
-                "name": "description",
-                "description": "The description of the checkbox.",
-                "type": "string"
-              },
+                "name": "height",
+                "description": "The height of the image.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-card-subtitle",
+          "description": "Subtitle of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the subtitle.\n\n### **CSS Properties:**\n - **--dds-card-subtitle-color** - The color of the subtitle text. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-card-subtitle-font-size** - The font size of the subtitle. (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-card-subtitle-font-weight** - The font weight of the subtitle. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-subtitle-line-height** - The line height of the subtitle. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-subtitle-padding-sm** - The padding for small size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-md** - The padding for medium size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-lg** - The padding for large size. (default: 0 var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-margin-sm** - The base margin for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-md** - The base margin for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-lg** - The base margin for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-sm** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-md** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-lg** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-sm** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-md** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-lg** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-sm** - The both (top and bottom) spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-md** - The both (top and bottom) spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-lg** - The both (top and bottom) spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The subtitle container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "renderAs",
+              "description": "The base rendered root tag of the card subtitle.",
+              "value": { "type": "string", "default": "'span'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the subtitle." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "disabled",
-                "description": "Whether the checkbox is disabled.",
-                "type": "boolean"
+                "name": "renderAs",
+                "description": "The base rendered root tag of the card subtitle.",
+                "type": "string"
               },
               {
-                "name": "required",
-                "description": "Whether the checkbox is required.",
-                "type": "boolean"
+                "name": "spacing",
+                "description": "The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`.",
+                "type": "'top' | 'bottom' | 'both' | 'none'"
               },
+              { "name": "parentSized", "type": "string" },
               {
                 "name": "size",
-                "description": "The size of the checkbox. Default is 'sm'.",
-                "type": "'xs' | 'sm' | 'lg'"
+                "description": "The size of the card subtitle. Default is `sm`.",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
                 "name": "sizeMap",
                 "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-card-title",
+          "description": "Title of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the title.\n\n### **CSS Properties:**\n - **--dds-card-title-color** - The text color of the card title. (default: var(--dds-color-text-primary)) _(default: undefined)_\n- **--dds-card-title-font-weight** - The font weight of the card title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-title-line-height** - The line height of the card title. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-title-margin-bottom** - The bottom margin of the card title. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-padding-x** - The horizontal padding for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-padding-bottom** - The bottom padding for small size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-top** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-bottom** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-x** - The horizontal padding for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-bottom** - The bottom padding for medium size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-md-spacing-top** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-spacing-bottom** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-lg-padding-x** - The horizontal padding for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-padding-bottom** - The bottom padding for large size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-top** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-bottom** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card title container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "renderAs",
+              "description": "The base rendered root tag of the card title.",
+              "value": { "type": "string", "default": "'span'" }
+            },
+            {
+              "name": "noPadding",
+              "description": "Whether the card title should have no padding.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The content of the title." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "renderAs",
+                "description": "The base rendered root tag of the card title.",
+                "type": "string"
               },
               {
-                "name": "labelPlacement",
-                "description": "The placement of the label.",
-                "type": "'left' | 'right'"
+                "name": "noPadding",
+                "description": "Whether the card title should have no padding.",
+                "type": "boolean"
               },
               {
-                "name": "descriptionPlacement",
-                "description": "The placement of the description.",
-                "type": "'top' | 'bottom'"
+                "name": "spacing",
+                "description": "The spacing of the card title. This adds a margin to the card title. Default is `top`.",
+                "type": "'top' | 'bottom' | 'both' | 'none'"
               },
+              { "name": "parentSized", "type": "string" },
               {
-                "name": "subtle",
-                "description": "The weight of the label.",
+                "name": "size",
+                "description": "The size of the card title. Default is `sm`.",
+                "type": "'sm' |'md' | 'lg'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "dap-ds-card",
+          "description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "interactive",
+              "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "renderAs",
+              "description": "The render as type of the card, only applicable when interactive.",
+              "value": { "type": "'a' | 'button'", "default": "'a'" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the card is disabled.",
+              "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": "feedback",
-                "description": "The feedback of the checkbox.",
-                "type": "string"
+                "name": "renderAs",
+                "description": "The render as type of the card, only applicable when interactive.",
+                "type": "'a' | 'button'"
               },
               {
-                "name": "feedbackType",
-                "description": "The feedback type of the checkbox.",
-                "type": "'negative' | 'positive' | 'warning'"
+                "name": "disabled",
+                "description": "Whether the card is disabled.",
+                "type": "boolean"
               },
               {
-                "name": "invalid",
-                "description": "The invalid state of the checkbox.",
+                "name": "noBorder",
+                "description": "Removes the border around the card",
                 "type": "boolean"
               },
               {
-                "name": "optional",
-                "description": "The optional state of the checkbox.",
+                "name": "noPadding",
+                "description": "Removes the padding around the card",
                 "type": "boolean"
               },
               {
-                "name": "optionalLabel",
-                "description": "The optional 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": "requiredLabel",
-                "description": "The required indicator of the checkbox. (default: '*')",
-                "type": "string"
-              }
-            ],
-            "events": [
+                "name": "target",
+                "description": "The link target of the card",
+                "type": "'_blank' | '_self' | '_parent' | '_top'"
+              },
               {
-                "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": "href",
+                "description": "The URL of the card.",
+                "type": "string"
               },
               {
-                "name": "dds-blur",
-                "type": "{ void }",
-                "description": "Emitted when the checkbox loses focus."
+                "name": "rel",
+                "description": "The rel of the card link.",
+                "type": "string"
               },
               {
-                "name": "dds-focus",
-                "type": "{ void }",
-                "description": "Emitted when the checkbox gains focus."
+                "name": "size",
+                "description": "The size of the card. Default is `sm`.",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
-                "name": "dds-input",
-                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
-                "description": "Emitted when the checkbox receives input."
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
+                "type": "string"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
-          "name": "dap-ds-chip",
-          "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
+          "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": "removeable",
-              "description": "Whether the chip is removeable",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "selectable",
-              "description": "Whether the chip is selectable",
+              "name": "indeterminate",
+              "description": "Whether the checkbox is indeterminate",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "selected",
-              "description": "Whether the chip is selected",
+              "name": "preventDefault",
+              "description": "Whether the checkbox should prevent the default action",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Whether the chip is disabled",
+              "name": "border",
+              "description": "This sets up border around the checkbox, when true.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "value",
-              "description": "The value of the chip",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "deleteAriaLabel",
-              "description": "The aria label for the delete button",
-              "value": { "type": "string | undefined" }
+              "name": "readonly",
+              "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "removeButtonTestId",
-              "description": "`data-testid` for the remove button.",
-              "value": { "type": "string", "default": "'chip-remove-button'" }
+              "name": "type",
+              "description": "The type of the checkbox",
+              "value": {
+                "type": "'normal' | 'background'",
+                "default": "'normal'"
+              }
             }
           ],
           "events": [
             {
-              "name": "dds-remove",
-              "type": "{ value: string }",
-              "description": "Fired when the chip is removed"
+              "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-select",
-              "type": "{ value?: string, selected: boolean }",
-              "description": "Fired when the chip is selected"
+              "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."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "removeable",
-                "description": "Whether the chip is removeable",
+                "name": "indeterminate",
+                "description": "Whether the checkbox is indeterminate",
                 "type": "boolean"
               },
               {
-                "name": "selectable",
-                "description": "Whether the chip is selectable",
+                "name": "preventDefault",
+                "description": "Whether the checkbox should prevent the default action",
                 "type": "boolean"
               },
               {
-                "name": "selected",
-                "description": "Whether the chip is selected",
+                "name": "border",
+                "description": "This sets up border around the checkbox, when true.",
                 "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Whether the chip is disabled",
+                "name": "readonly",
+                "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
                 "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "The value of the chip",
-                "type": "string | undefined"
+                "name": "type",
+                "description": "The type of the checkbox",
+                "type": "'normal' | 'background'"
               },
+              { "name": "focusElement", "type": "HTMLInputElement" },
+              { "name": "feedbackId" },
               {
-                "name": "deleteAriaLabel",
-                "description": "The aria label for the delete button",
-                "type": "string | undefined"
+                "name": "name",
+                "description": "The name of the checkbox.",
+                "type": "string"
               },
               {
-                "name": "removeButtonTestId",
-                "description": "`data-testid` for the remove button.",
+                "name": "value",
+                "description": "The value of the checkbox.",
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "The size of the chip. Default is `sm`.",
-                "type": "'sm' | 'lg'"
+                "name": "checked",
+                "description": "Whether the checkbox is checked.",
+                "type": "boolean"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
+                "name": "label",
+                "description": "The label of the checkbox.",
                 "type": "string"
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "dds-remove",
-                "type": "{ value: string }",
-                "description": "Fired when the chip is removed"
+                "name": "hideLabel",
+                "description": "Visually hides the label while keeping it available to assistive technology. (default: false)",
+                "type": "boolean"
               },
               {
-                "name": "dds-select",
-                "type": "{ value?: string, selected: boolean }",
-                "description": "Fired when the chip is selected"
-              }
-            ]
-          }
-        },
-        {
-          "name": "dap-ds-card-actions",
-          "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The content of the card actions." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
+                "name": "description",
+                "description": "The description of the checkbox.",
+                "type": "string"
+              },
               {
-                "name": "spacing",
-                "description": "The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.",
-                "type": "'top' | 'bottom' | 'both' | 'none'"
+                "name": "disabled",
+                "description": "Whether the checkbox is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the checkbox is required.",
+                "type": "boolean"
               },
-              { "name": "parentSized", "type": "string" },
               {
                 "name": "size",
-                "description": "The size of the card actions. Default is `sm`.",
-                "type": "'sm' | 'md' | 'lg'"
+                "description": "The size of the checkbox. Default is 'sm'.",
+                "type": "'xs' | 'sm' | 'lg'"
               },
               {
                 "name": "sizeMap",
                 "description": "Responsive size map (e.g. \"md:lg\").",
                 "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-card-content",
-          "description": "A card content is a container for content in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card-content.\n\n### **CSS Properties:**\n - **--dds-card-content-padding** - The padding of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-margin** - The margin of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-font-size** - The font size of the card content. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-card-content-line-height** - The line height of the card content. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-card-content-spacing-lg** - The large spacing value. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-content-spacing-md** - The medium spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-sm** - The small spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-top** - The top spacing value. (default: 0) _(default: undefined)_\n- **--dds-card-content-spacing-bottom** - The bottom spacing value. (default: 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card content container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "renderAs",
-              "description": "The base rendered root tag of the card content.",
-              "value": { "type": "string", "default": "'div'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the card-content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "renderAs",
-                "description": "The base rendered root tag of the card content.",
-                "type": "string"
               },
               {
-                "name": "spacing",
-                "description": "The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.",
-                "type": "'top' | 'bottom' | 'both' | 'none'"
+                "name": "labelPlacement",
+                "description": "The placement of the label.",
+                "type": "'left' | 'right'"
               },
-              { "name": "parentSized", "type": "string" },
               {
-                "name": "size",
-                "description": "The size of the card subtitle. Default is `sm`.",
-                "type": "'sm' | 'md' | 'lg'"
+                "name": "descriptionPlacement",
+                "description": "The placement of the description.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-card-image",
-          "description": "A card image is a container for images in a card.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered.\n\n### **CSS Properties:**\n - **--dds-card-image-width** - The width of the image. (default: 100%) _(default: undefined)_\n- **--dds-card-image-height** - The height of the image. (default: auto) _(default: undefined)_\n- **--dds-card-image-object-fit** - How the image fits within its container. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-position** - The background position of the image. (default: center) _(default: undefined)_\n- **--dds-card-image-background-size** - How the background image is sized. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-repeat** - How the background image repeats. (default: no-repeat) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card image container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "src",
-              "description": "The source of the image.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "alt",
-              "description": "The alt text of the image.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "width",
-              "description": "The width of the image.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "height",
-              "description": "The height of the image.",
-              "value": { "type": "number" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "src",
-                "description": "The source of the image.",
-                "type": "string"
+                "name": "subtle",
+                "description": "The weight of the label.",
+                "type": "boolean"
               },
               {
-                "name": "alt",
-                "description": "The alt text of the image.",
+                "name": "feedback",
+                "description": "The feedback of the checkbox.",
                 "type": "string"
               },
               {
-                "name": "width",
-                "description": "The width of the image.",
-                "type": "number"
+                "name": "feedbackType",
+                "description": "The feedback type of the checkbox.",
+                "type": "'negative' | 'positive' | 'warning'"
               },
               {
-                "name": "height",
-                "description": "The height of the image.",
-                "type": "number"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-card-subtitle",
-          "description": "Subtitle of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the subtitle.\n\n### **CSS Properties:**\n - **--dds-card-subtitle-color** - The color of the subtitle text. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-card-subtitle-font-size** - The font size of the subtitle. (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-card-subtitle-font-weight** - The font weight of the subtitle. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-subtitle-line-height** - The line height of the subtitle. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-subtitle-padding-sm** - The padding for small size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-md** - The padding for medium size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-lg** - The padding for large size. (default: 0 var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-margin-sm** - The base margin for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-md** - The base margin for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-lg** - The base margin for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-sm** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-md** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-lg** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-sm** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-md** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-lg** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-sm** - The both (top and bottom) spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-md** - The both (top and bottom) spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-lg** - The both (top and bottom) spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The subtitle container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "renderAs",
-              "description": "The base rendered root tag of the card subtitle.",
-              "value": { "type": "string", "default": "'span'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the subtitle." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "renderAs",
-                "description": "The base rendered root tag of the card subtitle.",
-                "type": "string"
+                "name": "invalid",
+                "description": "The invalid state of the checkbox.",
+                "type": "boolean"
               },
               {
-                "name": "spacing",
-                "description": "The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`.",
-                "type": "'top' | 'bottom' | 'both' | 'none'"
+                "name": "optional",
+                "description": "The optional state of the checkbox.",
+                "type": "boolean"
               },
-              { "name": "parentSized", "type": "string" },
               {
-                "name": "size",
-                "description": "The size of the card subtitle. Default is `sm`.",
-                "type": "'sm' | 'md' | 'lg'"
+                "name": "optionalLabel",
+                "description": "The optional label of the checkbox.",
+                "type": "string"
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
+                "name": "requiredLabel",
+                "description": "The required indicator of the checkbox. (default: '*')",
                 "type": "string"
               }
             ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-card-title",
-          "description": "Title of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the title.\n\n### **CSS Properties:**\n - **--dds-card-title-color** - The text color of the card title. (default: var(--dds-color-text-primary)) _(default: undefined)_\n- **--dds-card-title-font-weight** - The font weight of the card title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-title-line-height** - The line height of the card title. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-title-margin-bottom** - The bottom margin of the card title. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-padding-x** - The horizontal padding for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-padding-bottom** - The bottom padding for small size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-top** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-bottom** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-x** - The horizontal padding for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-bottom** - The bottom padding for medium size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-md-spacing-top** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-spacing-bottom** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-lg-padding-x** - The horizontal padding for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-padding-bottom** - The bottom padding for large size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-top** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-bottom** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card title container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "renderAs",
-              "description": "The base rendered root tag of the card title.",
-              "value": { "type": "string", "default": "'span'" }
-            },
-            {
-              "name": "noPadding",
-              "description": "Whether the card title should have no padding.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The content of the title." }],
-          "events": [],
-          "js": {
-            "properties": [
+            "events": [
               {
-                "name": "renderAs",
-                "description": "The base rendered root tag of the card title.",
-                "type": "string"
+                "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": "noPadding",
-                "description": "Whether the card title should have no padding.",
-                "type": "boolean"
+                "name": "dds-blur",
+                "type": "{ void }",
+                "description": "Emitted when the checkbox loses focus."
               },
               {
-                "name": "spacing",
-                "description": "The spacing of the card title. This adds a margin to the card title. Default is `top`.",
-                "type": "'top' | 'bottom' | 'both' | 'none'"
+                "name": "dds-focus",
+                "type": "{ void }",
+                "description": "Emitted when the checkbox gains focus."
               },
-              { "name": "parentSized", "type": "string" },
               {
-                "name": "size",
-                "description": "The size of the card title. Default is `sm`.",
-                "type": "'sm' |'md' | 'lg'"
+                "name": "dds-input",
+                "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
+                "description": "Emitted when the checkbox receives input."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
-          "name": "dap-ds-card",
-          "description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
+          "name": "dap-ds-chip",
+          "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
           "doc-url": "",
           "attributes": [
             {
-              "name": "interactive",
-              "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
+              "name": "removeable",
+              "description": "Whether the chip is removeable",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "renderAs",
-              "description": "The render as type of the card, only applicable when interactive.",
-              "value": { "type": "'a' | 'button'", "default": "'a'" }
-            },
-            {
-              "name": "disabled",
-              "description": "Whether the card is disabled.",
+              "name": "selectable",
+              "description": "Whether the chip is selectable",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "noBorder",
-              "description": "Removes the border around the card",
+              "name": "selected",
+              "description": "Whether the chip is selected",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "noPadding",
-              "description": "Removes the padding around the card",
+              "name": "disabled",
+              "description": "Whether the chip is disabled",
               "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": "value",
+              "description": "The value of the chip",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "target",
-              "description": "The link target of the card",
-              "value": {
-                "type": "'_blank' | '_self' | '_parent' | '_top'",
-                "default": "'_self'"
-              }
+              "name": "deleteAriaLabel",
+              "description": "The aria label for the delete button",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "href",
-              "description": "The URL of the card.",
-              "value": { "type": "string" }
+              "name": "removeButtonTestId",
+              "description": "`data-testid` for the remove button.",
+              "value": { "type": "string", "default": "'chip-remove-button'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "dds-remove",
+              "type": "{ value: string }",
+              "description": "Fired when the chip is removed"
             },
             {
-              "name": "rel",
-              "description": "The rel of the card link.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
+              "name": "dds-select",
+              "type": "{ value?: string, selected: boolean }",
+              "description": "Fired when the chip is selected"
             }
           ],
-          "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.",
+                "name": "removeable",
+                "description": "Whether the chip is removeable",
                 "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.",
+                "name": "selectable",
+                "description": "Whether the chip is selectable",
                 "type": "boolean"
               },
               {
-                "name": "noBorder",
-                "description": "Removes the border around the card",
+                "name": "selected",
+                "description": "Whether the chip is selected",
                 "type": "boolean"
               },
               {
-                "name": "noPadding",
-                "description": "Removes the padding around the card",
+                "name": "disabled",
+                "description": "Whether the chip is disabled",
                 "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": "value",
+                "description": "The value of the chip",
+                "type": "string | undefined"
               },
               {
-                "name": "href",
-                "description": "The URL of the card.",
-                "type": "string"
+                "name": "deleteAriaLabel",
+                "description": "The aria label for the delete button",
+                "type": "string | undefined"
               },
               {
-                "name": "rel",
-                "description": "The rel of the card link.",
+                "name": "removeButtonTestId",
+                "description": "`data-testid` for the remove button.",
                 "type": "string"
               },
               {
                 "name": "size",
-                "description": "The size of the card. Default is `sm`.",
-                "type": "'sm' | 'md' | 'lg'"
+                "description": "The size of the chip. Default is `sm`.",
+                "type": "'sm' | 'lg'"
               },
               {
                 "name": "sizeMap",
@@ -1920,7 +1909,18 @@
                 "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "dds-remove",
+                "type": "{ value: string }",
+                "description": "Fired when the chip is removed"
+              },
+              {
+                "name": "dds-select",
+                "type": "{ value?: string, selected: boolean }",
+                "description": "Fired when the chip is selected"
+              }
+            ]
           }
         },
         {
@@ -5261,105 +5261,38 @@
               },
               {
                 "name": "zoomSrc",
-                "description": "URL of a higher quality image to display when zoomed. Falls back to the slotted image src.",
-                "type": "string"
-              },
-              {
-                "name": "hideButtons",
-                "description": "Hides the expand and unzoom buttons. Default is false.",
-                "type": "boolean"
-              },
-              { "name": "zoomButtonVariant", "type": "ButtonVariant" },
-              {
-                "name": "expandButtonTestId",
-                "description": "`data-testid` for the expand/zoom button.",
-                "type": "string"
-              },
-              {
-                "name": "unzoomButtonTestId",
-                "description": "`data-testid` for the unzoom/close button.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "dds-zoom",
-                "type": "CustomEvent",
-                "description": "Fires when the image is about to zoom. Cancelable via event.preventDefault()."
-              },
-              {
-                "name": "dds-unzoom",
-                "type": "CustomEvent",
-                "description": "Fires after the image has unzoomed."
-              }
-            ]
-          }
-        },
-        {
-          "name": "dap-ds-label",
-          "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "label",
-                "description": "The label text",
-                "type": "string"
-              },
-              {
-                "name": "description",
-                "description": "The description of the label",
-                "type": "string"
-              },
-              {
-                "name": "tooltip",
-                "description": "The tooltip text",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The size of the input. Default is `sm`.",
-                "type": "'xs' | 'sm' | 'lg'"
-              },
-              {
-                "name": "tooltipPlacement",
-                "description": "The tooltip placement of the label.",
-                "type": "'top' | 'right' | 'bottom' | 'left'"
+                "description": "URL of a higher quality image to display when zoomed. Falls back to the slotted image src.",
+                "type": "string"
               },
               {
-                "name": "optional",
-                "description": "If the label is optional. Default value is `false`.",
+                "name": "hideButtons",
+                "description": "Hides the expand and unzoom buttons. Default is false.",
                 "type": "boolean"
               },
+              { "name": "zoomButtonVariant", "type": "ButtonVariant" },
               {
-                "name": "optionalLabel",
-                "description": "Label of optional text",
+                "name": "expandButtonTestId",
+                "description": "`data-testid` for the expand/zoom button.",
                 "type": "string"
               },
               {
-                "name": "requiredLabel",
-                "description": "Indicator of required text (default: '*')",
+                "name": "unzoomButtonTestId",
+                "description": "`data-testid` for the unzoom/close button.",
                 "type": "string"
-              },
-              {
-                "name": "subtle",
-                "description": "Text weight of label. If true the label is subtle. Default value is `false`.",
-                "type": "boolean"
-              },
+              }
+            ],
+            "events": [
               {
-                "name": "disabled",
-                "description": "The disabled state of the label. Default is `false`.",
-                "type": "boolean"
+                "name": "dds-zoom",
+                "type": "CustomEvent",
+                "description": "Fires when the image is about to zoom. Cancelable via event.preventDefault()."
               },
               {
-                "name": "required",
-                "description": "The required state of the label. Default is `false`.",
-                "type": "boolean"
+                "name": "dds-unzoom",
+                "type": "CustomEvent",
+                "description": "Fires after the image has unzoomed."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
@@ -5597,6 +5530,73 @@
             ]
           }
         },
+        {
+          "name": "dap-ds-label",
+          "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The label text",
+                "type": "string"
+              },
+              {
+                "name": "description",
+                "description": "The description of the label",
+                "type": "string"
+              },
+              {
+                "name": "tooltip",
+                "description": "The tooltip text",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The size of the input. Default is `sm`.",
+                "type": "'xs' | 'sm' | 'lg'"
+              },
+              {
+                "name": "tooltipPlacement",
+                "description": "The tooltip placement of the label.",
+                "type": "'top' | 'right' | 'bottom' | 'left'"
+              },
+              {
+                "name": "optional",
+                "description": "If the label is optional. Default value is `false`.",
+                "type": "boolean"
+              },
+              {
+                "name": "optionalLabel",
+                "description": "Label of optional text",
+                "type": "string"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "Indicator of required text (default: '*')",
+                "type": "string"
+              },
+              {
+                "name": "subtle",
+                "description": "Text weight of label. If true the label is subtle. Default value is `false`.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "The disabled state of the label. Default is `false`.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "The required state of the label. Default is `false`.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -10138,219 +10138,101 @@
               {
                 "name": "feedbackType",
                 "description": "The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.",
-                "type": "'negative' | 'positive' | 'warning'"
-              },
-              {
-                "name": "optional",
-                "description": "The optional state of the textarea.",
-                "type": "boolean"
-              },
-              {
-                "name": "optionalLabel",
-                "description": "The optional label of the textarea.",
-                "type": "string"
-              },
-              {
-                "name": "requiredLabel",
-                "description": "The required indicator of the textarea. (default: '*')",
-                "type": "string"
-              },
-              {
-                "name": "subtle",
-                "description": "The weight of the label. Default is `false`",
-                "type": "boolean"
-              },
-              {
-                "name": "autofocus",
-                "description": "The autofocus state of the textarea.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "dds-count-change",
-                "type": "{ value: number }",
-                "description": "Fires when the count of the textarea changes."
-              },
-              {
-                "name": "dds-change",
-                "type": "{ value: string }",
-                "description": "Fired when the textarea value changes."
-              },
-              {
-                "name": "dds-input",
-                "type": "{ value: string }",
-                "description": "Fired when the textarea value changes."
-              },
-              {
-                "name": "dds-keydown",
-                "type": "{ value: string, originalEvent: Event }",
-                "description": "Fired when a key is pressed down."
-              },
-              {
-                "name": "dds-blur",
-                "type": "{ void }",
-                "description": "Fired when the textarea loses focus."
-              },
-              {
-                "name": "dds-focus",
-                "type": "{ void }",
-                "description": "Emitted when the textarea gains focus."
-              },
-              {
-                "name": "dds-select",
-                "type": "{ value: string }",
-                "description": "Emitted when select text in textarea."
-              }
-            ]
-          }
-        },
-        {
-          "name": "dap-ds-timeline-item",
-          "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the item content."
-            }
-          ],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "name": "dap-ds-timeline",
-          "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the timeline items."
-            }
-          ],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "name": "dap-ds-toc",
-          "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "root",
-              "description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "rootMargin",
-              "description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
-              "value": { "type": "string", "default": "'0px 0px -80% 0px'" }
-            },
-            {
-              "name": "lastAnchorRootMargin",
-              "description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
-              "value": { "type": "string", "default": "'0px 0px -50% 0px'" }
-            },
-            {
-              "name": "threshold",
-              "description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
-              "value": { "type": "number[]", "default": "[0.1]" }
-            },
-            {
-              "name": "minHeadingLevel",
-              "description": "The minimum heading level to include in the TOC. The default value is `2`.",
-              "value": { "type": "number", "default": "2" }
-            },
-            {
-              "name": "maxHeadingLevel",
-              "description": "The maximum heading level to include in the TOC. The default value is `3`.",
-              "value": { "type": "number", "default": "3" }
-            },
-            {
-              "name": "noIndent",
-              "description": "Whether to indent the TOC items.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "header",
-              "description": "The header of the TOC.",
-              "value": { "type": "string" }
-            }
-          ],
-          "events": [
-            {
-              "name": "dds-anchor-change",
-              "type": "{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }",
-              "description": "Event that is triggered when the anchor changes."
-            }
-          ],
-          "js": {
-            "properties": [
+                "type": "'negative' | 'positive' | 'warning'"
+              },
               {
-                "name": "root",
-                "description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
-                "type": "string"
+                "name": "optional",
+                "description": "The optional state of the textarea.",
+                "type": "boolean"
               },
               {
-                "name": "rootMargin",
-                "description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
+                "name": "optionalLabel",
+                "description": "The optional label of the textarea.",
                 "type": "string"
               },
               {
-                "name": "lastAnchorRootMargin",
-                "description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
+                "name": "requiredLabel",
+                "description": "The required indicator of the textarea. (default: '*')",
                 "type": "string"
               },
               {
-                "name": "threshold",
-                "description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
-                "type": "number[]"
+                "name": "subtle",
+                "description": "The weight of the label. Default is `false`",
+                "type": "boolean"
               },
               {
-                "name": "minHeadingLevel",
-                "description": "The minimum heading level to include in the TOC. The default value is `2`.",
-                "type": "number"
+                "name": "autofocus",
+                "description": "The autofocus state of the textarea.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "dds-count-change",
+                "type": "{ value: number }",
+                "description": "Fires when the count of the textarea changes."
               },
               {
-                "name": "maxHeadingLevel",
-                "description": "The maximum heading level to include in the TOC. The default value is `3`.",
-                "type": "number"
+                "name": "dds-change",
+                "type": "{ value: string }",
+                "description": "Fired when the textarea value changes."
               },
               {
-                "name": "noIndent",
-                "description": "Whether to indent the TOC items.",
-                "type": "boolean"
+                "name": "dds-input",
+                "type": "{ value: string }",
+                "description": "Fired when the textarea value changes."
               },
               {
-                "name": "header",
-                "description": "The header of the TOC.",
-                "type": "string"
+                "name": "dds-keydown",
+                "type": "{ value: string, originalEvent: Event }",
+                "description": "Fired when a key is pressed down."
               },
-              { "name": "activeAnchor" },
-              { "name": "anchors" },
-              { "name": "items" },
               {
-                "name": "size",
-                "description": "The size of the TOC. Default is `lg.",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "name": "dds-blur",
+                "type": "{ void }",
+                "description": "Fired when the textarea loses focus."
               },
               {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": [
+                "name": "dds-focus",
+                "type": "{ void }",
+                "description": "Emitted when the textarea gains focus."
+              },
               {
-                "name": "dds-anchor-change",
-                "type": "{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }",
-                "description": "Event that is triggered when the anchor changes."
+                "name": "dds-select",
+                "type": "{ value: string }",
+                "description": "Emitted when select text in textarea."
               }
             ]
           }
         },
+        {
+          "name": "dap-ds-timeline-item",
+          "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the item content."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "name": "dap-ds-timeline",
+          "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the timeline items."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "dap-ds-time-grid",
           "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
@@ -10847,91 +10729,209 @@
                 "type": "boolean"
               },
               {
-                "name": "autofocus",
-                "description": "The autofocus state of the timepicker.",
-                "type": "boolean"
+                "name": "autofocus",
+                "description": "The autofocus state of the timepicker.",
+                "type": "boolean"
+              },
+              {
+                "name": "tooltip",
+                "description": "The tooltip of the timepicker.",
+                "type": "string"
+              },
+              {
+                "name": "tooltipPlacement",
+                "description": "The tooltip placement of the timepicker.",
+                "type": "'top' | 'right' | 'bottom' | 'left'"
+              },
+              {
+                "name": "feedback",
+                "description": "The feedback of the timepicker.",
+                "type": "string"
+              },
+              {
+                "name": "feedbackType",
+                "description": "The feedback type of the timepicker.",
+                "type": "'negative' | 'positive' | 'warning'"
+              },
+              {
+                "name": "optional",
+                "description": "The optional state of the timepicker.",
+                "type": "boolean"
+              },
+              {
+                "name": "optionalLabel",
+                "description": "The optional label of the timepicker.",
+                "type": "string"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "The required indicator of the timepicker. (default: '*')",
+                "type": "string"
+              },
+              {
+                "name": "subtle",
+                "description": "The weight of the label. Default is `false`",
+                "type": "boolean"
+              },
+              {
+                "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-toc",
+          "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "root",
+              "description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "rootMargin",
+              "description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
+              "value": { "type": "string", "default": "'0px 0px -80% 0px'" }
+            },
+            {
+              "name": "lastAnchorRootMargin",
+              "description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
+              "value": { "type": "string", "default": "'0px 0px -50% 0px'" }
+            },
+            {
+              "name": "threshold",
+              "description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
+              "value": { "type": "number[]", "default": "[0.1]" }
+            },
+            {
+              "name": "minHeadingLevel",
+              "description": "The minimum heading level to include in the TOC. The default value is `2`.",
+              "value": { "type": "number", "default": "2" }
+            },
+            {
+              "name": "maxHeadingLevel",
+              "description": "The maximum heading level to include in the TOC. The default value is `3`.",
+              "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "noIndent",
+              "description": "Whether to indent the TOC items.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "header",
+              "description": "The header of the TOC.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [
+            {
+              "name": "dds-anchor-change",
+              "type": "{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }",
+              "description": "Event that is triggered when the anchor changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "root",
+                "description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
+                "type": "string"
+              },
+              {
+                "name": "rootMargin",
+                "description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
+                "type": "string"
               },
               {
-                "name": "tooltip",
-                "description": "The tooltip of the timepicker.",
+                "name": "lastAnchorRootMargin",
+                "description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
                 "type": "string"
               },
               {
-                "name": "tooltipPlacement",
-                "description": "The tooltip placement of the timepicker.",
-                "type": "'top' | 'right' | 'bottom' | 'left'"
+                "name": "threshold",
+                "description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
+                "type": "number[]"
               },
               {
-                "name": "feedback",
-                "description": "The feedback of the timepicker.",
-                "type": "string"
+                "name": "minHeadingLevel",
+                "description": "The minimum heading level to include in the TOC. The default value is `2`.",
+                "type": "number"
               },
               {
-                "name": "feedbackType",
-                "description": "The feedback type of the timepicker.",
-                "type": "'negative' | 'positive' | 'warning'"
+                "name": "maxHeadingLevel",
+                "description": "The maximum heading level to include in the TOC. The default value is `3`.",
+                "type": "number"
               },
               {
-                "name": "optional",
-                "description": "The optional state of the timepicker.",
+                "name": "noIndent",
+                "description": "Whether to indent the TOC items.",
                 "type": "boolean"
               },
               {
-                "name": "optionalLabel",
-                "description": "The optional label of the timepicker.",
-                "type": "string"
-              },
-              {
-                "name": "requiredLabel",
-                "description": "The required indicator of the timepicker. (default: '*')",
+                "name": "header",
+                "description": "The header of the TOC.",
                 "type": "string"
               },
+              { "name": "activeAnchor" },
+              { "name": "anchors" },
+              { "name": "items" },
               {
-                "name": "subtle",
-                "description": "The weight of the label. Default is `false`",
-                "type": "boolean"
+                "name": "size",
+                "description": "The size of the TOC. Default is `lg.",
+                "type": "'xs' | 'sm' | 'md' | 'lg'"
               },
               {
-                "name": "autocomplete",
-                "description": "The autocomplete of the timepicker.",
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
                 "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": "dds-anchor-change",
+                "type": "{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }",
+                "description": "Event that is triggered when the anchor changes."
               }
             ]
           }
@@ -11642,7 +11642,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-line",
+          "name": "dap-ds-icon-home-6-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11695,7 +11695,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-s-fill",
+          "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": [
@@ -11748,7 +11748,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-down-s-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": [
@@ -11801,7 +11801,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-down-line",
+          "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": [
@@ -11854,7 +11854,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-l-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": [
@@ -11907,7 +11907,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-line",
+          "name": "dap-ds-icon-arrow-left-l-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -11960,7 +11960,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-s-fill",
+          "name": "dap-ds-icon-arrow-left-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12013,7 +12013,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-s-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": [
@@ -12066,7 +12066,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-up-line",
+          "name": "dap-ds-icon-arrow-left-s-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12119,7 +12119,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-down-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": [
@@ -12172,7 +12172,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-l-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": [
@@ -12225,7 +12225,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-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": [
@@ -12278,7 +12278,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-s-fill",
+          "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": [
@@ -12331,7 +12331,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-right-up-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": [
@@ -12437,7 +12437,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-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": [
@@ -12490,7 +12490,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-s-fill",
+          "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": [
@@ -12543,7 +12543,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-up-s-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": [
@@ -12596,7 +12596,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-expand-up-down-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": [
@@ -12649,7 +12649,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-calendar-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": [
@@ -12702,7 +12702,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-home-6-line",
+          "name": "dap-ds-icon-calendar-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12914,7 +12914,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-separator",
+          "name": "dap-ds-icon-clipboard-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -12967,7 +12967,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-clipboard-line",
+          "name": "dap-ds-icon-file-copy-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13020,7 +13020,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-file-copy-line",
+          "name": "dap-ds-icon-file-image-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13073,7 +13073,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-file-image-line",
+          "name": "dap-ds-icon-file-music-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13126,7 +13126,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-file-music-line",
+          "name": "dap-ds-icon-file-text-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13179,7 +13179,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-file-text-line",
+          "name": "dap-ds-icon-file-video-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13232,7 +13232,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-file-video-line",
+          "name": "dap-ds-icon-folder-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13285,7 +13285,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-folder-line",
+          "name": "dap-ds-icon-folder-open-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13338,7 +13338,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-folder-open-line",
+          "name": "dap-ds-icon-separator",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13444,7 +13444,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-cookie-line",
+          "name": "dap-ds-icon-heart-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13497,7 +13497,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-heart-line",
+          "name": "dap-ds-icon-cookie-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13550,7 +13550,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-fill",
+          "name": "dap-ds-icon-add-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13603,7 +13603,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-line",
+          "name": "dap-ds-icon-alert-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13656,7 +13656,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-fill",
+          "name": "dap-ds-icon-alert-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13709,7 +13709,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-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": [
@@ -13762,7 +13762,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-add-line",
+          "name": "dap-ds-icon-check-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13815,7 +13815,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-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": [
@@ -13868,7 +13868,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-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": [
@@ -13921,7 +13921,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line2",
+          "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": [
@@ -13974,7 +13974,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line",
+          "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": [
@@ -14027,7 +14027,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill",
+          "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": [
@@ -14080,7 +14080,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
+          "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": [
@@ -14133,7 +14133,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-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": [
@@ -14186,7 +14186,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-fill",
+          "name": "dap-ds-icon-close-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14239,7 +14239,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-line",
+          "name": "dap-ds-icon-close-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14292,7 +14292,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-fill",
+          "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": [
@@ -14345,7 +14345,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-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": [
@@ -14398,7 +14398,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-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": [
@@ -14451,7 +14451,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-fill",
+          "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": [
@@ -14504,7 +14504,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-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": [
@@ -14557,7 +14557,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-line",
+          "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": [
@@ -14610,7 +14610,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-download-line",
+          "name": "dap-ds-icon-eye-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14663,7 +14663,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-fill",
+          "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": [
@@ -14716,7 +14716,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-line",
+          "name": "dap-ds-icon-forbid-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14769,7 +14769,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-external-link-line",
+          "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": [
@@ -14822,7 +14822,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-line",
+          "name": "dap-ds-icon-information-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14875,7 +14875,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-off-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": [
@@ -14928,7 +14928,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-forbid-fill",
+          "name": "dap-ds-icon-lightbulb-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14981,7 +14981,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-2-fill",
+          "name": "dap-ds-icon-loading-spinner",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15034,7 +15034,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-fill",
+          "name": "dap-ds-icon-lock-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15087,7 +15087,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-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": [
@@ -15140,7 +15140,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lightbulb-fill",
+          "name": "dap-ds-icon-menu-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15193,7 +15193,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-loading-spinner",
+          "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": [
@@ -15246,7 +15246,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-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": [
@@ -15299,7 +15299,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-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": [
@@ -15352,7 +15352,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line",
+          "name": "dap-ds-icon-search-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15405,7 +15405,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line-s",
+          "name": "dap-ds-icon-share-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15458,7 +15458,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-2-line",
+          "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": [
@@ -15511,7 +15511,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-line",
+          "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": [
@@ -15564,7 +15564,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-search-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": [
@@ -15617,7 +15617,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-share-line",
+          "name": "dap-ds-icon-subtract-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15670,7 +15670,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-fill",
+          "name": "dap-ds-icon-subtract-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15723,7 +15723,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-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": [
@@ -15776,7 +15776,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-star-fill",
+          "name": "dap-ds-icon-time-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15829,7 +15829,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-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": [
@@ -15882,7 +15882,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-line2",
+          "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": [
@@ -15935,7 +15935,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-fill",
+          "name": "dap-ds-icon-upload-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15988,7 +15988,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-line",
+          "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": [
@@ -16041,7 +16041,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-fill",
+          "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": [
@@ -16094,7 +16094,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-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": [
@@ -16147,7 +16147,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-line",
+          "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": [
@@ -16200,7 +16200,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-in-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": [
@@ -16253,7 +16253,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-out-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": [