dap-design-system 0.62.2 → 0.62.4

package/dist/manifest/web-types.json

@@ -153,160 +153,30 @@
           }
         },
         {
-          "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-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": "shape",
-              "description": "The shape of the avatar",
-              "value": {
-                "type": "'circle' | 'rounded' | 'square'",
-                "default": "'circle'"
-              }
-            },
             {
               "name": "variant",
-              "description": "The variant type of the avatar",
-              "value": {
-                "type": "'image' | 'initials' | 'icon'",
-                "default": "'image'"
-              }
-            },
-            {
-              "name": "src",
-              "description": "The source of the avatar image",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "alt",
-              "description": "The alt text of the avatar",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "initials",
-              "description": "The initials to display when variant is 'initials'",
-              "value": { "type": "string" }
+              "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
+              "value": { "type": "HeadingVariant" }
             },
             {
               "name": "label",
-              "description": "Accessible label for the avatar",
+              "description": "The label of the heading.",
               "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."
             }
           ],
+          "events": [],
           "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"
-              }
+              { "name": "variant", "type": "HeadingVariant" },
+              { "name": "label", "type": "string" },
+              { "name": "elementId" },
+              { "name": "anchorTitle" }
             ],
-            "events": [
-              {
-                "name": "dds-load",
-                "description": "Fired when the image loads successfully."
-              },
-              {
-                "name": "dds-error",
-                "description": "Fired when the image fails to load."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -408,93 +278,6 @@
             ]
           }
         },
-        {
-          "name": "dap-ds-badge",
-          "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "type",
-              "description": "The type of the badge",
-              "value": {
-                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
-                "default": "'neutral'"
-              }
-            },
-            {
-              "name": "icon",
-              "description": "The icon of the badge, this is a name of a built in icon",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "live",
-              "description": "Whether the badge represents dynamic content that should announce changes",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The content of the badge." },
-            { "name": "icon", "description": "The icon of the badge." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "type",
-                "description": "The type of the badge",
-                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
-              },
-              {
-                "name": "icon",
-                "description": "The icon of the badge, this is a name of a built in icon",
-                "type": "string | undefined"
-              },
-              {
-                "name": "live",
-                "description": "Whether the badge represents dynamic content that should announce changes",
-                "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "The size of the badge. Default is `sm`.",
-                "type": "'sm' | 'lg'"
-              },
-              {
-                "name": "sizeMap",
-                "description": "Responsive size map (e.g. \"md:lg\").",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "dap-ds-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-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.",
@@ -709,6 +492,66 @@
             "events": []
           }
         },
+        {
+          "name": "dap-ds-badge",
+          "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "The type of the badge",
+              "value": {
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
+                "default": "'neutral'"
+              }
+            },
+            {
+              "name": "icon",
+              "description": "The icon of the badge, this is a name of a built in icon",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "live",
+              "description": "Whether the badge represents dynamic content that should announce changes",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the badge." },
+            { "name": "icon", "description": "The icon of the badge." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The type of the badge",
+                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
+              },
+              {
+                "name": "icon",
+                "description": "The icon of the badge, this is a name of a built in icon",
+                "type": "string | undefined"
+              },
+              {
+                "name": "live",
+                "description": "Whether the badge represents dynamic content that should announce changes",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The size of the badge. Default is `sm`.",
+                "type": "'sm' | 'lg'"
+              },
+              {
+                "name": "sizeMap",
+                "description": "Responsive size map (e.g. \"md:lg\").",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "dap-ds-button",
           "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\nA caller focusing a button the same tick it mounts -- a \"Save\" button that appears\nonly after the form it belongs to opens, say -- would otherwise get a TypeError,\nnot a no-op. Throwing out of a focus() call breaks whatever effect made it.\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Subtle neutral button properties: _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg** - Background color of subtle neutral button (default: var(--dds-button-subtle-background-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg-hover** - Background color of subtle neutral button on hover (default: var(--dds-button-subtle-background-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-bg-active** - Background color of subtle neutral button when active (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border** - Border color of subtle neutral button (default: var(--dds-button-subtle-border-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border-hover** - Border color of subtle neutral button on hover (default: var(--dds-button-subtle-border-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-border-active** - Border color of subtle neutral button when active (default: var(--dds-button-subtle-border-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text** - Text color of subtle neutral button (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text-hover** - Text color of subtle neutral button on hover (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-neutral-color-text-active** - Text color of subtle neutral button when active (default: var(--dds-button-subtle-text-neutral-hover)) Subtle inverted button properties: _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg** - Background color of subtle inverted button (default: var(--dds-button-subtle-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg-hover** - Background color of subtle inverted button on hover (default: var(--dds-button-subtle-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-bg-active** - Background color of subtle inverted button when active (default: var(--dds-button-subtle-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border** - Border color of subtle inverted button (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border-hover** - Border color of subtle inverted button on hover (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-border-active** - Border color of subtle inverted button when active (default: var(--dds-button-subtle-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text** - Text color of subtle inverted button (default: var(--dds-button-subtle-text-inverted)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text-hover** - Text color of subtle inverted button on hover (default: var(--dds-button-subtle-text-inverted)) _(default: undefined)_\n- **--dds-button-subtle-inverted-color-text-active** - Text color of subtle inverted button when active (default: var(--dds-button-subtle-text-inverted)) Subtle menu button properties: _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg** - Background color of subtle menu button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg-hover** - Background color of subtle menu button on hover (default: var(--dds-button-subtle-background-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-bg-active** - Background color of subtle menu button when active (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border** - Border color of subtle menu button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border-hover** - Border color of subtle menu button on hover (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-border-active** - Border color of subtle menu button when active (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text** - Text color of subtle menu button (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text-hover** - Text color of subtle menu button on hover (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-color-text-active** - Text color of subtle menu button when active (default: var(--dds-button-subtle-text-neutral-hover)) _(default: undefined)_\n- **--dds-button-subtle-menu-border-radius** - Border radius of subtle menu button (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-border-radius** - Border radius of subtle menu button while the menu is open (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-border** - Border color of subtle menu button while the menu is open (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-background** - Background color of subtle menu button while the menu is open (default: var(--dds-button-subtle-background-neutral-pressed)) _(default: undefined)_\n- **--dds-button-subtle-menu-opened-color** - Text color of subtle menu button while the menu is open (default: var(--dds-button-subtle-text-neutral-hover)) Subtle menu item button properties: _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg** - Background color of subtle menu item button (default: transparent) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg-hover** - Background color of subtle menu item button on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-bg-active** - Background color of subtle menu item button when active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text** - Text color of subtle menu item button (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-hover** - Text color of subtle menu item button on hover (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-active** - Text color of subtle menu item button when active (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-color-text-disabled** - Text color of disabled subtle menu item button (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-padding** - Padding of subtle menu item button (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-border-radius** - Border radius of subtle menu item button (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-font-weight** - Font weight of subtle menu item button (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-font-size** - Font size of subtle menu item button (default: var(--dds-font-size-base)) _(default: undefined)_\n- **--dds-button-subtle-menu-item-line-height** - Line height of subtle menu item button (default: var(--dds-font-line-height-xlarge)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border** - Border color of danger subtle button (default: var(--dds-button-subtle-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border-hover** - Border color of danger subtle button on hover (default: var(--dds-button-subtle-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-border-active** - Border color of danger subtle button when active (default: var(--dds-button-subtle-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-subtle-destructive-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
@@ -888,6 +731,140 @@
             ]
           }
         },
+        {
+          "name": "dap-ds-callout",
+          "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The variant of the callout",
+              "value": {
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
+                "default": "'brand'"
+              }
+            },
+            {
+              "name": "alignment",
+              "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+              "value": {
+                "type": "'vertical' | 'horizontal'",
+                "default": "'horizontal'"
+              }
+            },
+            {
+              "name": "shade",
+              "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+              "value": {
+                "type": "'subtle' | 'base' | 'medium' | 'strong'",
+                "default": "'base'"
+              }
+            },
+            {
+              "name": "noBorder",
+              "description": "If the callout has a border",
+              "value": { "type": "string", "default": "'true'" }
+            },
+            {
+              "name": "closeable",
+              "description": "If the callout has a close button",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "title",
+              "description": "The header of the callout",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "closeButtonLabel",
+              "description": "The label of the close button",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "closeButtonTestId",
+              "description": "`data-testid` for the default close button.",
+              "value": { "type": "string", "default": "'callout-close-button'" }
+            },
+            {
+              "name": "opened",
+              "description": "If the callout is opened",
+              "value": { "type": "string", "default": "'true'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content of the callout." },
+            { "name": "title", "description": "The title of the callout." },
+            { "name": "icon", "description": "The icon of the callout." },
+            { "name": "actions", "description": "The actions of the callout." },
+            {
+              "name": "close",
+              "description": "The close button of the callout."
+            }
+          ],
+          "events": [
+            {
+              "name": "dds-close",
+              "type": "{ void }",
+              "description": "Fired when the close button is clicked."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The variant of the callout",
+                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
+              },
+              {
+                "name": "alignment",
+                "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+                "type": "'vertical' | 'horizontal'"
+              },
+              {
+                "name": "shade",
+                "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+                "type": "'subtle' | 'base' | 'medium' | 'strong'"
+              },
+              {
+                "name": "noBorder",
+                "description": "If the callout has a border",
+                "type": "string"
+              },
+              {
+                "name": "closeable",
+                "description": "If the callout has a close button",
+                "type": "boolean"
+              },
+              {
+                "name": "title",
+                "description": "The header of the callout",
+                "type": "string"
+              },
+              {
+                "name": "closeButtonLabel",
+                "description": "The label of the close button",
+                "type": "string"
+              },
+              {
+                "name": "closeButtonTestId",
+                "description": "`data-testid` for the default close button.",
+                "type": "string"
+              },
+              {
+                "name": "opened",
+                "description": "If the callout is opened",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "dds-close",
+                "type": "{ void }",
+                "description": "Fired when the close button is clicked."
+              }
+            ]
+          }
+        },
         {
           "name": "dap-ds-calendar-cell",
           "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
@@ -1134,135 +1111,158 @@
           }
         },
         {
-          "name": "dap-ds-callout",
-          "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
+          "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": "variant",
-              "description": "The variant of the callout",
-              "value": {
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
-                "default": "'brand'"
-              }
-            },
-            {
-              "name": "alignment",
-              "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+              "name": "shape",
+              "description": "The shape of the avatar",
               "value": {
-                "type": "'vertical' | 'horizontal'",
-                "default": "'horizontal'"
+                "type": "'circle' | 'rounded' | 'square'",
+                "default": "'circle'"
               }
             },
             {
-              "name": "shade",
-              "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+              "name": "variant",
+              "description": "The variant type of the avatar",
               "value": {
-                "type": "'subtle' | 'base' | 'medium' | 'strong'",
-                "default": "'base'"
+                "type": "'image' | 'initials' | 'icon'",
+                "default": "'image'"
               }
             },
             {
-              "name": "noBorder",
-              "description": "If the callout has a border",
-              "value": { "type": "string", "default": "'true'" }
+              "name": "src",
+              "description": "The source of the avatar image",
+              "value": { "type": "string" }
             },
             {
-              "name": "closeable",
-              "description": "If the callout has a close button",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "alt",
+              "description": "The alt text of the avatar",
+              "value": { "type": "string" }
             },
             {
-              "name": "title",
-              "description": "The header of the callout",
+              "name": "initials",
+              "description": "The initials to display when variant is 'initials'",
               "value": { "type": "string" }
             },
             {
-              "name": "closeButtonLabel",
-              "description": "The label of the close button",
+              "name": "label",
+              "description": "Accessible label for the avatar",
               "value": { "type": "string" }
             },
             {
-              "name": "closeButtonTestId",
-              "description": "`data-testid` for the default close button.",
-              "value": { "type": "string", "default": "'callout-close-button'" }
+              "name": "loading",
+              "description": "Loading state indicator",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "opened",
-              "description": "If the callout is opened",
-              "value": { "type": "string", "default": "'true'" }
+              "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 content of the callout." },
-            { "name": "title", "description": "The title of the callout." },
-            { "name": "icon", "description": "The icon of the callout." },
-            { "name": "actions", "description": "The actions of the callout." },
             {
-              "name": "close",
-              "description": "The close button of the callout."
+              "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-close",
-              "type": "{ void }",
-              "description": "Fired when the close button 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": "shape",
+                "description": "The shape of the avatar",
+                "type": "'circle' | 'rounded' | 'square'"
+              },
               {
                 "name": "variant",
-                "description": "The variant of the callout",
-                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
+                "description": "The variant type of the avatar",
+                "type": "'image' | 'initials' | 'icon'"
               },
               {
-                "name": "alignment",
-                "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
-                "type": "'vertical' | 'horizontal'"
+                "name": "src",
+                "description": "The source of the avatar image",
+                "type": "string"
               },
               {
-                "name": "shade",
-                "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
-                "type": "'subtle' | 'base' | 'medium' | 'strong'"
+                "name": "alt",
+                "description": "The alt text of the avatar",
+                "type": "string"
               },
               {
-                "name": "noBorder",
-                "description": "If the callout has a border",
+                "name": "initials",
+                "description": "The initials to display when variant is 'initials'",
                 "type": "string"
               },
               {
-                "name": "closeable",
-                "description": "If the callout has a close button",
+                "name": "label",
+                "description": "Accessible label for the avatar",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Loading state indicator",
                 "type": "boolean"
               },
               {
-                "name": "title",
-                "description": "The header of the callout",
-                "type": "string"
+                "name": "interactive",
+                "description": "Whether the avatar is interactive (clickable)",
+                "type": "boolean"
               },
               {
-                "name": "closeButtonLabel",
-                "description": "The label of the close button",
-                "type": "string"
+                "name": "width",
+                "description": "The width of the avatar. This will override the size",
+                "type": "number"
               },
               {
-                "name": "closeButtonTestId",
-                "description": "`data-testid` for the default close button.",
-                "type": "string"
+                "name": "height",
+                "description": "The height of the avatar. This will override the size",
+                "type": "number"
               },
               {
-                "name": "opened",
-                "description": "If the callout is opened",
+                "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-close",
-                "type": "{ void }",
-                "description": "Fired when the close button is clicked."
+                "name": "dds-load",
+                "description": "Fired when the image loads successfully."
+              },
+              {
+                "name": "dds-error",
+                "description": "Fired when the image fails to load."
               }
             ]
           }
@@ -7254,6 +7254,11 @@
               "name": "selectable",
               "description": "Whether the option list items are selectable, whether it shows the selected icon",
               "value": { "type": "string", "default": "'true'" }
+            },
+            {
+              "name": "multiselectable",
+              "description": "Whether multiple options can be selected; exposed as aria-multiselectable on the listbox.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -7313,6 +7318,11 @@
                 "description": "Whether the option list items are selectable, whether it shows the selected icon",
                 "type": "string"
               },
+              {
+                "name": "multiselectable",
+                "description": "Whether multiple options can be selected; exposed as aria-multiselectable on the listbox.",
+                "type": "boolean"
+              },
               { "name": "queryTimeout", "type": "number | undefined" },
               { "name": "queryString", "type": "string" },
               { "name": "firstLoad", "type": "boolean" },
@@ -9920,8 +9930,13 @@
             },
             {
               "name": "role",
-              "description": "The html role of the header cell",
+              "description": "The html role of the header cell. Derived from `scope` unless set explicitly.",
               "value": { "type": "string", "default": "'columnheader'" }
+            },
+            {
+              "name": "scope",
+              "description": "Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside).",
+              "value": { "type": "'col' | 'row'", "default": "'col'" }
             }
           ],
           "slots": [{ "name": "", "description": "The default slot." }],
@@ -9935,8 +9950,13 @@
               },
               {
                 "name": "role",
-                "description": "The html role of the header cell",
+                "description": "The html role of the header cell. Derived from `scope` unless set explicitly.",
                 "type": "string"
+              },
+              {
+                "name": "scope",
+                "description": "Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside).",
+                "type": "'col' | 'row'"
               }
             ],
             "events": []
@@ -9988,7 +10008,7 @@
           "attributes": [
             {
               "name": "role",
-              "description": "The html role of the table. A static data table is a `table`; `grid` is\nonly right for an interactive widget with keyboard-navigable cells.",
+              "description": "The html role of the table. Defaults to `table`; use `grid` only for an interactive table.",
               "value": { "type": "string", "default": "'table'" }
             },
             {
@@ -10013,7 +10033,7 @@
             "properties": [
               {
                 "name": "role",
-                "description": "The html role of the table. A static data table is a `table`; `grid` is\nonly right for an interactive widget with keyboard-navigable cells.",
+                "description": "The html role of the table. Defaults to `table`; use `grid` only for an interactive table.",
                 "type": "string"
               },
               {
@@ -11985,7 +12005,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": [
@@ -12038,7 +12058,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-arrow-left-line",
+          "name": "dap-ds-icon-arrow-left-s-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13628,7 +13648,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-add-line",
+          "name": "dap-ds-icon-account-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13681,7 +13701,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-fill",
+          "name": "dap-ds-icon-account-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13734,7 +13754,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-alert-line",
+          "name": "dap-ds-icon-user-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13787,7 +13807,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line",
+          "name": "dap-ds-icon-user-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13840,7 +13860,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-check-line2",
+          "name": "dap-ds-icon-add-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13893,7 +13913,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill",
+          "name": "dap-ds-icon-alert-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13946,7 +13966,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
+          "name": "dap-ds-icon-alert-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -13999,7 +14019,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-blank-circle-line",
+          "name": "dap-ds-icon-check-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14052,7 +14072,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-fill",
+          "name": "dap-ds-icon-check-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14105,7 +14125,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-checkbox-circle-line",
+          "name": "dap-ds-icon-checkbox-blank-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14158,7 +14178,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-fill",
+          "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14211,7 +14231,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-circle-line",
+          "name": "dap-ds-icon-checkbox-blank-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14264,7 +14284,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-fill",
+          "name": "dap-ds-icon-checkbox-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14317,7 +14337,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-close-line",
+          "name": "dap-ds-icon-checkbox-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14370,7 +14390,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-fill",
+          "name": "dap-ds-icon-close-circle-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14423,7 +14443,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-delete-bin-line",
+          "name": "dap-ds-icon-close-circle-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14476,7 +14496,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-download-line",
+          "name": "dap-ds-icon-close-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14529,7 +14549,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-fill",
+          "name": "dap-ds-icon-close-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14582,7 +14602,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-error-warning-line",
+          "name": "dap-ds-icon-delete-bin-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14635,7 +14655,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-external-link-line",
+          "name": "dap-ds-icon-delete-bin-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14688,7 +14708,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-line",
+          "name": "dap-ds-icon-download-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14741,7 +14761,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-eye-off-line",
+          "name": "dap-ds-icon-error-warning-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14794,7 +14814,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-forbid-fill",
+          "name": "dap-ds-icon-error-warning-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14847,7 +14867,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-2-fill",
+          "name": "dap-ds-icon-external-link-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14900,7 +14920,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-fill",
+          "name": "dap-ds-icon-eye-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -14953,7 +14973,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-information-line",
+          "name": "dap-ds-icon-eye-off-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15006,7 +15026,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lightbulb-fill",
+          "name": "dap-ds-icon-forbid-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15059,7 +15079,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-loading-spinner",
+          "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": [
@@ -15112,7 +15132,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-fill",
+          "name": "dap-ds-icon-information-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15165,7 +15185,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-lock-line",
+          "name": "dap-ds-icon-information-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15218,7 +15238,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line",
+          "name": "dap-ds-icon-lightbulb-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15271,7 +15291,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-menu-line-s",
+          "name": "dap-ds-icon-loading-spinner",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15324,7 +15344,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-2-line",
+          "name": "dap-ds-icon-lock-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15377,7 +15397,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-more-line",
+          "name": "dap-ds-icon-lock-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15430,7 +15450,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-search-line",
+          "name": "dap-ds-icon-menu-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15483,7 +15503,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-share-line",
+          "name": "dap-ds-icon-menu-line-s",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15536,7 +15556,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-fill",
+          "name": "dap-ds-icon-more-2-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15589,7 +15609,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-shield-check-line",
+          "name": "dap-ds-icon-more-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15642,7 +15662,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-star-fill",
+          "name": "dap-ds-icon-search-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15695,7 +15715,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-line",
+          "name": "dap-ds-icon-share-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15748,7 +15768,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-subtract-line2",
+          "name": "dap-ds-icon-shield-check-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15801,7 +15821,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-fill",
+          "name": "dap-ds-icon-shield-check-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15854,7 +15874,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-time-line",
+          "name": "dap-ds-icon-star-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15907,7 +15927,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-fill",
+          "name": "dap-ds-icon-subtract-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -15960,7 +15980,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-2-line",
+          "name": "dap-ds-icon-subtract-line2",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16013,7 +16033,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-upload-line",
+          "name": "dap-ds-icon-time-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16066,7 +16086,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-in-line",
+          "name": "dap-ds-icon-time-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16119,7 +16139,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-zoom-out-line",
+          "name": "dap-ds-icon-upload-2-fill",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16172,7 +16192,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-fill",
+          "name": "dap-ds-icon-upload-2-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16225,7 +16245,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-account-circle-line",
+          "name": "dap-ds-icon-upload-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16278,7 +16298,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-fill",
+          "name": "dap-ds-icon-zoom-in-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [
@@ -16331,7 +16351,7 @@
           }
         },
         {
-          "name": "dap-ds-icon-user-line",
+          "name": "dap-ds-icon-zoom-out-line",
           "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
           "doc-url": "",
           "attributes": [