{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "dap-ds-accordion",
      "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/accordion"
        }
      ]
    },
    {
      "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.",
      "attributes": [
        {
          "name": "shape",
          "description": "The shape of the avatar",
          "values": [
            { "name": "circle" },
            { "name": "rounded" },
            { "name": "square" }
          ]
        },
        {
          "name": "variant",
          "description": "The variant type of the avatar",
          "values": [
            { "name": "image" },
            { "name": "initials" },
            { "name": "icon" }
          ]
        },
        {
          "name": "src",
          "description": "The source of the avatar image",
          "values": []
        },
        {
          "name": "alt",
          "description": "The alt text of the avatar",
          "values": []
        },
        {
          "name": "initials",
          "description": "The initials to display when variant is 'initials'",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible label for the avatar",
          "values": []
        },
        {
          "name": "loading",
          "description": "Loading state indicator",
          "values": []
        },
        {
          "name": "interactive",
          "description": "Whether the avatar is interactive (clickable)",
          "values": []
        },
        {
          "name": "width",
          "description": "The width of the avatar. This will override the size",
          "values": []
        },
        {
          "name": "height",
          "description": "The height of the avatar. This will override the size",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/avatar"
        }
      ]
    },
    {
      "name": "dap-ds-avatar-group",
      "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
      "attributes": [
        {
          "name": "layout",
          "description": "Layout type for the avatar group",
          "values": [{ "name": "stack" }, { "name": "grid" }]
        },
        {
          "name": "max",
          "description": "Maximum number of avatars to show before showing overflow",
          "values": []
        },
        {
          "name": "show-total",
          "description": "Whether to show the total count in overflow indicator",
          "values": []
        },
        {
          "name": "interactive-overflow",
          "description": "Interactive overflow indicator",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible label for the avatar group",
          "values": []
        },
        {
          "name": "overflow-label",
          "description": "Accessible label for the overflow indicator",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/avatar-group"
        }
      ]
    },
    {
      "name": "dap-ds-anchor-heading",
      "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
          "values": [{ "name": "HeadingVariant" }]
        },
        {
          "name": "label",
          "description": "The label of the heading.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/anchor-heading"
        }
      ]
    },
    {
      "name": "dap-ds-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.",
      "attributes": [
        {
          "name": "type",
          "description": "The type of the badge",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "info" },
            { "name": "positive" },
            { "name": "warning" },
            { "name": "negative" }
          ]
        },
        {
          "name": "icon",
          "description": "The icon of the badge, this is a name of a built in icon",
          "values": []
        },
        {
          "name": "live",
          "description": "Whether the badge represents dynamic content that should announce changes",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/badge"
        }
      ]
    },
    {
      "name": "dap-ds-accordion-group",
      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
      "attributes": [
        {
          "name": "autoClose",
          "description": "Whether to close other accordions when one is opened.",
          "values": []
        },
        {
          "name": "variant",
          "description": "The variant of the accordion",
          "values": [
            { "name": "default" },
            { "name": "collapsed" },
            { "name": "clean" },
            { "name": "clean-collapsed" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/accordion-group"
        }
      ]
    },
    {
      "name": "dap-ds-breadcrumb",
      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
      "attributes": [
        { "name": "variant", "values": [] },
        {
          "name": "mobile",
          "description": "Mobile version of the breadcrumb",
          "values": []
        },
        {
          "name": "aria-labelledby",
          "description": "The aria-labelledby of the breadcrumb",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/breadcrumb"
        }
      ]
    },
    {
      "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.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the banner",
          "values": [
            { "name": "brand" },
            { "name": "positive" },
            { "name": "info" },
            { "name": "warning" },
            { "name": "negative" }
          ]
        },
        {
          "name": "closeable",
          "description": "Whether the banner is closeable",
          "values": []
        },
        {
          "name": "opened",
          "description": "State of the banner. If false banner is hidden",
          "values": []
        },
        {
          "name": "closeButtonLabel",
          "description": "The aria-label for the close button",
          "values": []
        },
        {
          "name": "icon",
          "description": "The icon of the banner, this is a name of a built icon icon",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/banner"
        }
      ]
    },
    {
      "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### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
      "attributes": [
        {
          "name": "variant",
          "description": "The visual style variant of the button",
          "values": [
            { "name": "primary" },
            { "name": "outline" },
            { "name": "subtle" },
            { "name": "subtle-neutral" },
            { "name": "subtle-quiet" },
            { "name": "subtle-quiet-inverted" },
            { "name": "clean" },
            { "name": "primary-inverted" },
            { "name": "outline-inverted" },
            { "name": "subtle-inverted" },
            { "name": "clean-inverted" },
            { "name": "subtle-menu" },
            { "name": "subtle-menu-item" }
          ]
        },
        {
          "name": "size",
          "description": "The size of the button affecting padding and font size",
          "values": [
            { "name": "lg" },
            { "name": "md" },
            { "name": "sm" },
            { "name": "xs" }
          ]
        },
        {
          "name": "loading",
          "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
          "values": []
        },
        {
          "name": "danger",
          "description": "Whether the button represents a destructive action (applies danger styling)",
          "values": []
        },
        {
          "name": "shape",
          "description": "The shape of the button - use 'circle' for icon-only buttons",
          "values": [{ "name": "button" }, { "name": "circle" }]
        },
        {
          "name": "htmlType",
          "description": "The HTML type attribute for form interaction",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "href",
          "description": "The URL to navigate to. When present, the button renders as an anchor element",
          "values": []
        },
        {
          "name": "target",
          "description": "The target attribute for link navigation",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "The rel attribute for link security and behavior",
          "values": []
        },
        {
          "name": "loadingTimeout",
          "description": "Controls loading timeout in milliseconds",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether the button is active",
          "values": []
        },
        {
          "name": "targetBlankText",
          "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
          "values": []
        },
        {
          "name": "forceRole",
          "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/button"
        }
      ]
    },
    {
      "name": "dap-ds-breadcrumb-item",
      "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
      "attributes": [
        {
          "name": "href",
          "description": "The URL of the breadcrumb item.",
          "values": []
        },
        {
          "name": "target",
          "description": "The target of the breadcrumb item.",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "The rel of the breadcrumb item link.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the breadcrumb item is disabled.",
          "values": []
        },
        {
          "name": "variant",
          "description": "The variant of the breadcrumb item.",
          "values": [{ "name": "normal" }, { "name": "inverted" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/breadcrumb-item"
        }
      ]
    },
    {
      "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.",
      "attributes": [
        {
          "name": "selected",
          "description": "Whether the calendar cell is selected.",
          "values": []
        },
        {
          "name": "disabledDay",
          "description": "Whether the calendar cell is disabled.",
          "values": []
        },
        {
          "name": "today",
          "description": "Whether the calendar cell is today.",
          "values": []
        },
        {
          "name": "outOfRange",
          "description": "Whether the calendar cell is out of range.",
          "values": []
        },
        {
          "name": "header",
          "description": "Whether the calendar cell is a date header.",
          "values": []
        },
        {
          "name": "focused",
          "description": "Whether the calendar cell is focused.",
          "values": []
        },
        {
          "name": "rangestart",
          "description": "Whether the calendar cell is the start of a range.",
          "values": []
        },
        {
          "name": "rangeend",
          "description": "Whether the calendar cell is the end of a range.",
          "values": []
        },
        {
          "name": "inrange",
          "description": "Whether the calendar cell is in the middle of a range.",
          "values": []
        },
        {
          "name": "locale",
          "description": "The locale of the calendar cell.",
          "values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/calendar-cell"
        }
      ]
    },
    {
      "name": "dap-ds-calendar",
      "description": "A calendar is a visual representation of dates. It allows users to select a date.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the calendar value changes.\n\n### **Slots:**\n - _default_ - The content of the calendar.\n\n### **CSS Properties:**\n - **--dds-calendar-display** - The display property of the calendar container (default: flex) _(default: undefined)_\n- **--dds-calendar-isolation** - The isolation property of the calendar (default: isolate) _(default: undefined)_\n- **--dds-calendar-block-display** - The display property of the calendar block (default: block) _(default: undefined)_\n- **--dds-calendar-transition** - The transition property for the calendar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-calendar-header-display** - The display property of the calendar header (default: grid) _(default: undefined)_\n- **--dds-calendar-header-grid-flow** - The grid-auto-flow property of the calendar header (default: column) _(default: undefined)_\n- **--dds-calendar-header-width** - The width of the calendar header (default: 100%) _(default: undefined)_\n- **--dds-calendar-header-gap** - The gap between header items (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-select-min-height** - The minimum height of the select trigger (default: auto) _(default: undefined)_\n- **--dds-calendar-select-max-height** - The maximum height of the select trigger (default: 32px) _(default: undefined)_\n- **--dds-calendar-select-padding** - The padding of the select trigger (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-select-border-radius** - The border radius of the select trigger (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-select-border-color** - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n- **--dds-calendar-select-background** - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-calendar-select-color** - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-calendar-select-font-size** - The font size of the select trigger (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-select-font-style** - The font style of the select trigger (default: normal) _(default: undefined)_\n- **--dds-calendar-select-font-weight** - The font weight of the select trigger (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-nav-button-margin** - The margin of the navigation buttons (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-nav-button-color** - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar container.\n- **calendar-header** - The header of the calendar.\n- **body** - The body of the calendar.\n- **calendar-grid-header** - The header of the calendar grid.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.",
      "attributes": [
        {
          "name": "mode",
          "description": "The mode of the calendar - single date or range selection.",
          "values": [{ "name": "single" }, { "name": "range" }]
        },
        {
          "name": "hideAdjacentMonths",
          "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
          "values": []
        },
        {
          "name": "locale",
          "description": "The locale of the calendar.",
          "values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/calendar"
        }
      ]
    },
    {
      "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.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the callout",
          "values": [
            { "name": "brand" },
            { "name": "positive" },
            { "name": "info" },
            { "name": "warning" },
            { "name": "negative" }
          ]
        },
        {
          "name": "alignment",
          "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "shade",
          "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
          "values": [
            { "name": "subtle" },
            { "name": "base" },
            { "name": "medium" },
            { "name": "strong" }
          ]
        },
        {
          "name": "noBorder",
          "description": "If the callout has a border",
          "values": []
        },
        {
          "name": "closeable",
          "description": "If the callout has a close button",
          "values": []
        },
        {
          "name": "title",
          "description": "The header of the callout",
          "values": []
        },
        {
          "name": "closeButtonLabel",
          "description": "The label of the close button",
          "values": []
        },
        {
          "name": "opened",
          "description": "If the callout is opened",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/callout"
        }
      ]
    },
    {
      "name": "dap-ds-checkbox",
      "description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
      "attributes": [
        {
          "name": "indeterminate",
          "description": "Whether the checkbox is indeterminate",
          "values": []
        },
        {
          "name": "preventDefault",
          "description": "Whether the checkbox should prevent the default action",
          "values": []
        },
        {
          "name": "border",
          "description": "This sets up border around the checkbox, when true.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
          "values": []
        },
        {
          "name": "type",
          "description": "The type of the checkbox",
          "values": [{ "name": "normal" }, { "name": "background" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/checkbox"
        }
      ]
    },
    {
      "name": "dap-ds-card-actions",
      "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card-actions"
        }
      ]
    },
    {
      "name": "dap-ds-card-content",
      "description": "A card content is a container for content in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card-content.\n\n### **CSS Properties:**\n - **--dds-card-content-padding** - The padding of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-margin** - The margin of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-font-size** - The font size of the card content. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-card-content-line-height** - The line height of the card content. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-card-content-spacing-lg** - The large spacing value. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-content-spacing-md** - The medium spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-sm** - The small spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-top** - The top spacing value. (default: 0) _(default: undefined)_\n- **--dds-card-content-spacing-bottom** - The bottom spacing value. (default: 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card content container.",
      "attributes": [
        {
          "name": "renderAs",
          "description": "The base rendered root tag of the card content.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card-content"
        }
      ]
    },
    {
      "name": "dap-ds-card-image",
      "description": "A card image is a container for images in a card.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered.\n\n### **CSS Properties:**\n - **--dds-card-image-width** - The width of the image. (default: 100%) _(default: undefined)_\n- **--dds-card-image-height** - The height of the image. (default: auto) _(default: undefined)_\n- **--dds-card-image-object-fit** - How the image fits within its container. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-position** - The background position of the image. (default: center) _(default: undefined)_\n- **--dds-card-image-background-size** - How the background image is sized. (default: cover) _(default: undefined)_\n- **--dds-card-image-background-repeat** - How the background image repeats. (default: no-repeat) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card image container.",
      "attributes": [
        {
          "name": "src",
          "description": "The source of the image.",
          "values": []
        },
        {
          "name": "alt",
          "description": "The alt text of the image.",
          "values": []
        },
        {
          "name": "width",
          "description": "The width of the image.",
          "values": []
        },
        {
          "name": "height",
          "description": "The height of the image.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card-image"
        }
      ]
    },
    {
      "name": "dap-ds-card-subtitle",
      "description": "Subtitle of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the subtitle.\n\n### **CSS Properties:**\n - **--dds-card-subtitle-color** - The color of the subtitle text. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-card-subtitle-font-size** - The font size of the subtitle. (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-card-subtitle-font-weight** - The font weight of the subtitle. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-subtitle-line-height** - The line height of the subtitle. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-subtitle-padding-sm** - The padding for small size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-md** - The padding for medium size. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-padding-lg** - The padding for large size. (default: 0 var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-margin-sm** - The base margin for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-md** - The base margin for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-margin-lg** - The base margin for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-sm** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-md** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-top-lg** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-sm** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-md** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-bottom-lg** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-sm** - The both (top and bottom) spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-md** - The both (top and bottom) spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-subtitle-spacing-both-lg** - The both (top and bottom) spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The subtitle container.",
      "attributes": [
        {
          "name": "renderAs",
          "description": "The base rendered root tag of the card subtitle.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card-subtitle"
        }
      ]
    },
    {
      "name": "dap-ds-card-title",
      "description": "Title of the card\n---\n\n\n### **Slots:**\n - _default_ - The content of the title.\n\n### **CSS Properties:**\n - **--dds-card-title-color** - The text color of the card title. (default: var(--dds-color-text-primary)) _(default: undefined)_\n- **--dds-card-title-font-weight** - The font weight of the card title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-card-title-line-height** - The line height of the card title. (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-card-title-margin-bottom** - The bottom margin of the card title. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-padding-x** - The horizontal padding for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-padding-bottom** - The bottom padding for small size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-top** - The top spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-sm-spacing-bottom** - The bottom spacing for small size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-x** - The horizontal padding for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-padding-bottom** - The bottom padding for medium size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-md-spacing-top** - The top spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-md-spacing-bottom** - The bottom spacing for medium size. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-title-lg-padding-x** - The horizontal padding for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-padding-bottom** - The bottom padding for large size. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-top** - The top spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-title-lg-spacing-bottom** - The bottom spacing for large size. (default: var(--dds-spacing-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card title container.",
      "attributes": [
        {
          "name": "renderAs",
          "description": "The base rendered root tag of the card title.",
          "values": []
        },
        {
          "name": "noPadding",
          "description": "Whether the card title should have no padding.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card-title"
        }
      ]
    },
    {
      "name": "dap-ds-card",
      "description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
      "attributes": [
        {
          "name": "interactive",
          "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
          "values": []
        },
        {
          "name": "renderAs",
          "description": "The render as type of the card, only applicable when interactive.",
          "values": [{ "name": "a" }, { "name": "button" }]
        },
        {
          "name": "disabled",
          "description": "Whether the card is disabled.",
          "values": []
        },
        {
          "name": "noBorder",
          "description": "Removes the border around the card",
          "values": []
        },
        {
          "name": "noPadding",
          "description": "Removes the padding around the card",
          "values": []
        },
        {
          "name": "targetBlankText",
          "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
          "values": []
        },
        {
          "name": "target",
          "description": "The link target of the card",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        { "name": "href", "description": "The URL of the card.", "values": [] },
        {
          "name": "rel",
          "description": "The rel of the card link.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/card"
        }
      ]
    },
    {
      "name": "dap-ds-chip",
      "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
      "attributes": [
        {
          "name": "removeable",
          "description": "Whether the chip is removeable",
          "values": []
        },
        {
          "name": "selectable",
          "description": "Whether the chip is selectable",
          "values": []
        },
        {
          "name": "selected",
          "description": "Whether the chip is selected",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the chip is disabled",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the chip",
          "values": []
        },
        {
          "name": "deleteAriaLabel",
          "description": "The aria label for the delete button",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/chip"
        }
      ]
    },
    {
      "name": "dap-ds-code-puncher-slot",
      "description": "Individual digit input slot for code puncher.\n---\n\n\n### **CSS Parts:**\n - **base** - The slot container.\n- **input** - The input element.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/code-puncher-slot"
        }
      ]
    },
    {
      "name": "dap-ds-code-puncher",
      "description": "A composable PIN/OTP input component for entering verification codes.\n---\n\n\n### **Events:**\n - **dds-input** - Fires on each digit input.\n- **dds-change** - Fires when value changes.\n- **dds-complete** - Fires when all slots are filled.\n- **dds-focus** - Fires when component gains focus.\n- **dds-blur** - Fires when component loses focus.\n\n### **Slots:**\n - **default** - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n\n### **CSS Parts:**\n - **base** - The main container.\n- **slots** - The slots container.\n- **label** - The label element.\n- **description** - The description element.\n- **feedback** - The feedback element.",
      "attributes": [
        {
          "name": "mask",
          "description": "Mask input like password. Default is false.",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Regex pattern for allowed characters. Default is '[0-9]'.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Placeholder character for empty slots.",
          "values": []
        },
        {
          "name": "autocomplete",
          "description": "Autocomplete hint. Default is 'one-time-code'.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/code-puncher"
        }
      ]
    },
    {
      "name": "dap-ds-combobox",
      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-clear** - Emitted when the select is cleared.\n- **dds-search** - Emitted when the manual input value changes.\n- **dds-input** - Emitted when typing happens in the input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **option-list** - The option list of the select.\n- **input** - The input of the select.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/combobox"
        }
      ]
    },
    {
      "name": "dap-ds-command-group",
      "description": "A command group is a group of command items.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the command group.\n\n### **CSS Properties:**\n - **--dds-command-group-gap** - The gap between command group elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-command-group-margin-bottom** - The bottom margin of the command group. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-command-group-border-radius** - The border radius of the command group. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-command-group-label-font-weight** - The font weight of the command group label. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-command-group-items-gap** - The gap between command items. (default: var(--dds-spacing-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part of the command group.\n- **label** - The label part of the command group.\n- **items** - The items part of the command group.",
      "attributes": [
        {
          "name": "label",
          "description": "The label of the command group.",
          "values": []
        },
        {
          "name": "exclusive",
          "description": "Whether the command group is exclusive, only one item can be selected at a time.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/command-group"
        }
      ]
    },
    {
      "name": "dap-ds-command-item",
      "description": "A command item is a command item that can be selected.\n---\n\n\n### **Events:**\n - **dds-command-item-click** - Fired when the command item is clicked.\n\n### **Slots:**\n - _default_ - The label of the command item.\n- **check** - The check of the command item.\n\n### **CSS Properties:**\n - **--dds-command-item-padding** - The padding of the command item (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-command-item-background** - The background color of the command item (default: none) _(default: undefined)_\n- **--dds-command-item-color** - The text color of the command item (default: var(--dds-text-primary-base)) _(default: undefined)_\n- **--dds-command-item-hover-background** - The background color of the command item on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-command-item-selected-background** - The background color of the selected command item (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part of the command item.\n- **content** - The content part of the command item.\n- **label** - The label part of the command item.",
      "attributes": [
        {
          "name": "value",
          "description": "The value of the command item.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether the command item is disabled.",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the button",
          "values": []
        },
        {
          "name": "href",
          "description": "The Href of the button. If this present the button will be rendered as an anchor `<a></a>` element.",
          "values": []
        },
        {
          "name": "target",
          "description": "The target of the button",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "The rel of the button link. Default is `noreferrer noopener`.",
          "values": []
        },
        {
          "name": "selectable",
          "description": "Whether the command item is selectable.",
          "values": []
        },
        {
          "name": "selected",
          "description": "Whether the command item is selected.",
          "values": []
        },
        {
          "name": "closeOnSelect",
          "description": "Whether the command item should close the command when selected.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/command-item"
        }
      ]
    },
    {
      "name": "dap-ds-command",
      "description": "A command is a component that displays a list of commands.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the command value changes.\n- **dds-opened** - Fired when the popup is opened.\n- **dds-closed** - Fired when the popup is closed.\n- **dds-close** - Fired when the popup should be closed.\n\n### **Slots:**\n - **trigger** - The trigger element for the command dropdown.\n- _default_ - The command items.\n\n### **CSS Properties:**\n - **--dds-popup-z-index** - Z-index of the popup (default: var(--dds-z-index-20)) _(default: undefined)_\n- **--dds-popup-padding** - Default padding of the popup (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-popup-padding-xs** - Padding of the popup when size is xs (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-popup-padding-lg** - Padding of the popup when size is lg (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-popup-border-width** - Border width of the popup (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-popup-border-radius** - Border radius of the popup (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-popup-border-color** - Border color of the popup (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-popup-background** - Background color of the popup (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-popup-color** - Text color of the popup (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-popup-arrow-size** - Size of the popup arrow (default: var(--dds-tooltip-arrow-size)) _(default: undefined)_\n\n### **CSS Parts:**\n - **popup** - The main popup container.\n- **arrow** - The arrow of the popup.",
      "attributes": [
        {
          "name": "value",
          "description": "The value of the command.",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the command popup should take full width of the screen.",
          "values": []
        },
        {
          "name": "aria-labelledby",
          "description": "ID of element that labels the command dropdown.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/command"
        }
      ]
    },
    {
      "name": "dap-ds-content-switcher-item",
      "description": "Segmented control item component for the segmented control.\n---\n\n\n### **Slots:**\n - **iconcontent** - The icon content of the segmented control item.\n\n### **CSS Properties:**\n - **--dds-content-switcher-item-height** - The height of the content switcher item (default: var(--dds-spacing-800, 32px)) _(default: undefined)_\n- **--dds-content-switcher-item-padding** - The padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px)) _(default: undefined)_\n- **--dds-content-switcher-item-font-size** - The font size of the content switcher item (default: var(--dds-size-sm, 14px)) _(default: undefined)_\n- **--dds-content-switcher-item-font-weight** - The font weight of the content switcher item (default: var(--dds-weight-bold, 700)) _(default: undefined)_\n- **--dds-content-switcher-item-border-radius** - The border radius of the content switcher item (default: var(--dds-radius-large, 16px)) _(default: undefined)_\n- **--dds-content-switcher-item-background** - The background color of the content switcher item (default: transparent) _(default: undefined)_\n- **--dds-content-switcher-item-color** - The text color of the content switcher item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-content-switcher-item-border-color** - The border color of the content switcher item (default: transparent) _(default: undefined)_\n- **--dds-content-switcher-item-checked-background** - The background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-content-switcher-item-checked-color** - The text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-content-switcher-item-checked-border-color** - The border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n\n### **CSS Parts:**\n - **input** - The input of the segmented control item.",
      "attributes": [
        {
          "name": "value",
          "description": "The value of the segmented control item.",
          "values": []
        },
        {
          "name": "checked",
          "description": "The checked state of the segmented control item.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "The disabled state of the segmented control item.",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the segmented control item.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/content-switcher-item"
        }
      ]
    },
    {
      "name": "dap-ds-content-switcher",
      "description": "A content switcher is a set of two or more segments, each of which functions as a mutually exclusive button.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the content switcher is changed.\n\n### **Slots:**\n - _default_ - The content switcher items.\n\n### **CSS Properties:**\n - **--dds-content-switcher-min-width** - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px)) _(default: undefined)_\n- **--dds-content-switcher-padding** - The padding of the content switcher (default: var(--dds-spacing-100, 4px)) _(default: undefined)_\n- **--dds-content-switcher-border-width** - The border width of the content switcher (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-content-switcher-border-color** - The border color of the content switcher (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-content-switcher-border-radius** - The border radius of the content switcher (default: var(--dds-radius-rounded, 1000px)) _(default: undefined)_\n- **--dds-content-switcher-background** - The background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%))) _(default: undefined)_\n- **--dds-content-switcher-gap** - The gap between content switcher items (default: var(--dds-spacing-100, 4px)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main content switcher container.",
      "attributes": [
        {
          "name": "multiSelect",
          "description": "Whether the content switcher allows multiple selections.",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the content switcher. A comma-separated list if `multiSelect` is `true`.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/content-switcher"
        }
      ]
    },
    {
      "name": "dap-ds-copybox-input",
      "description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.",
      "attributes": [
        {
          "name": "copyButtonAriaLabel",
          "description": "The aria label of the copy button.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/copybox-input"
        }
      ]
    },
    {
      "name": "dap-ds-dap-badge",
      "description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the DÁP badge",
          "values": [{ "name": "normal" }, { "name": "inverted" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/dap-badge"
        }
      ]
    },
    {
      "name": "dap-ds-datatable",
      "description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.",
      "attributes": [
        {
          "name": "rowKey",
          "description": "Row key to use for row selection, this should be a unique key for each row",
          "values": []
        },
        {
          "name": "enableRowSelection",
          "description": "Enable row selection on the table, can be a boolean or a function that returns a boolean",
          "values": [{ "name": "((row: Row<T>) => boolean)" }]
        },
        {
          "name": "enableSorting",
          "description": "Enable sorting on the table",
          "values": []
        },
        {
          "name": "manualSorting",
          "description": "Enable manual sorting on the table",
          "values": []
        },
        {
          "name": "manualPagination",
          "description": "Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.",
          "values": []
        },
        {
          "name": "autoResetPageIndex",
          "description": "If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option.",
          "values": []
        },
        {
          "name": "enableRowClick",
          "description": "Enable row click on the table",
          "values": []
        },
        {
          "name": "loading",
          "description": "Loading state of the table",
          "values": []
        },
        {
          "name": "enableStripedRows",
          "description": "Whether to enable striped rows",
          "values": []
        },
        {
          "name": "rowCount",
          "description": "Number of rows in the table",
          "values": []
        },
        {
          "name": "caption",
          "description": "Caption text for the table",
          "values": []
        },
        {
          "name": "loadingType",
          "description": "The type of loading to use",
          "values": [{ "name": "spinner" }, { "name": "skeleton" }]
        },
        {
          "name": "loadingVariant",
          "description": "The variant of the spinner. Only used if loadingType is 'spinner'.",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "negative" },
            { "name": "positive" },
            { "name": "inverted" }
          ]
        },
        {
          "name": "loadingSize",
          "description": "The size of the spinner. Only used if loadingType is 'spinner'.",
          "values": [
            { "name": "xxl" },
            { "name": "xl" },
            { "name": "lg" },
            { "name": "md" },
            { "name": "sm" },
            { "name": "xs" }
          ]
        },
        {
          "name": "loadingStaticSize",
          "description": "The size of the spinner in pixels. This overrides the size attribute. Only used if loadingType is 'spinner'.",
          "values": []
        },
        {
          "name": "loadingText",
          "description": "The loading text. Only used if loadingType is 'spinner'.",
          "values": []
        },
        {
          "name": "emptyText",
          "description": "The text to display when the table is empty.",
          "values": []
        },
        {
          "name": "disableHeaderOnEmpty",
          "description": "Whether to disable the header when the table is empty.",
          "values": [{ "name": "true" }, { "name": "false" }]
        },
        {
          "name": "showPagerOnEmpty",
          "description": "Whether to show the pager component when the table is empty.",
          "values": []
        },
        {
          "name": "pager",
          "description": "Whether to show the pager component",
          "values": []
        },
        {
          "name": "showPageSizeOptions",
          "description": "Show the page size options.",
          "values": []
        },
        {
          "name": "showPageIndex",
          "description": "Show the page index.",
          "values": []
        },
        {
          "name": "showPageCount",
          "description": "Show the page count.",
          "values": []
        },
        {
          "name": "showFirstButton",
          "description": "Show the first button.",
          "values": []
        },
        {
          "name": "showPreviousButton",
          "description": "Show the previous button.",
          "values": []
        },
        {
          "name": "showNextButton",
          "description": "Show the next button.",
          "values": []
        },
        {
          "name": "showLastButton",
          "description": "Show the last button.",
          "values": []
        },
        {
          "name": "firstButtonLabel",
          "description": "The label of the first button",
          "values": []
        },
        {
          "name": "previousButtonLabel",
          "description": "The label of the previous button",
          "values": []
        },
        {
          "name": "nextButtonLabel",
          "description": "The label of the next button",
          "values": []
        },
        {
          "name": "lastButtonLabel",
          "description": "The label of the last button",
          "values": []
        },
        {
          "name": "pageSizeOptions",
          "description": "Available page size options for the pager",
          "values": [{ "name": "number[]" }]
        },
        {
          "name": "sorting",
          "description": "Sorting state of the table",
          "values": [{ "name": "SortingState" }]
        },
        {
          "name": "rowSelection",
          "description": "Selection state of the table",
          "values": [{ "name": "RowSelectionState" }]
        },
        {
          "name": "pagination",
          "description": "Pagination state of the table",
          "values": [{ "name": "PaginationState" }]
        },
        {
          "name": "columnSizing",
          "description": "Column sizing state of the table",
          "values": [{ "name": "Record<string, number>" }]
        },
        {
          "name": "ariaLabel",
          "description": "ID of element labeling the table",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/datatable"
        }
      ]
    },
    {
      "name": "dap-ds-datepicker",
      "description": "A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the datepicker value changes.\n- **dds-input** - Fired when the datepicker input value changes.\n- **dds-valid-date** - Fired when the datepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-date** - Fired when the datepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the datepicker is cleared.\n- **dds-focus** - Emitted when the datepicker gains focus.\n- **dds-blur** - Emitted when the datepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main datepicker container.\n- **calendar** - The calendar of the datepicker.\n- **trigger** - The trigger button of the datepicker.\n- **label** - The label of the datepicker.\n- **description** - The description of the datepicker.\n- **feedback** - The feedback of the datepicker.\n- **tooltip** - The tooltip of the datepicker.\n- **input** - The input of the datepicker.\n- **clear-button** - The clear button of the datepicker.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.",
      "attributes": [
        {
          "name": "value",
          "description": "The value of the datepicker.",
          "values": [{ "name": "Dayjs" }]
        },
        {
          "name": "mode",
          "description": "The mode of the datepicker - single date or range selection.",
          "values": [{ "name": "single" }, { "name": "range" }]
        },
        {
          "name": "currentDate",
          "description": "The current visible date (month and year) of the calendar. Only the month and year are considered.",
          "values": [{ "name": "Dayjs" }, { "name": "Date" }]
        },
        {
          "name": "minDate",
          "description": "The minimum date (month and year) of the datepicker. Only the month and year are considered.",
          "values": [{ "name": "Dayjs" }, { "name": "Date" }]
        },
        {
          "name": "maxDate",
          "description": "The maximum date (month and year) of the datepicker. Only the month and year are considered.",
          "values": [{ "name": "Dayjs" }, { "name": "Date" }]
        },
        {
          "name": "rangeStart",
          "description": "The start date of the range selection (only used in range mode).",
          "values": [{ "name": "Dayjs" }, { "name": "Date" }]
        },
        {
          "name": "rangeEnd",
          "description": "The end date of the range selection (only used in range mode).",
          "values": [{ "name": "Dayjs" }, { "name": "Date" }]
        },
        {
          "name": "placement",
          "description": "The placement of the dropdown of the datepicker.",
          "values": [
            { "name": "top-start" },
            { "name": "top" },
            { "name": "top-end" },
            { "name": "right-start" },
            { "name": "right" },
            { "name": "right-end" },
            { "name": "bottom-start" },
            { "name": "bottom" },
            { "name": "bottom-end" },
            { "name": "left-start" },
            { "name": "left" },
            { "name": "left-end" }
          ]
        },
        {
          "name": "opened",
          "description": "The open state of the datepicker.",
          "values": []
        },
        {
          "name": "openCalendarOnInput",
          "description": "Wheter the calendar should open on typing.",
          "values": []
        },
        {
          "name": "sendEmptyEventOnInput",
          "description": "Wheter the calendar should send an empty event on typing.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "The placeholder of the datepicker.",
          "values": []
        },
        {
          "name": "loading",
          "description": "The loading state of the datepicker.",
          "values": []
        },
        {
          "name": "mask",
          "description": "Whether to enable input masking. When active, only digit characters are accepted and format separators are auto-inserted after each complete digit group. Only works in single mode with a single configured format.",
          "values": []
        },
        {
          "name": "format",
          "description": "The format of the datepicker. This is a comma separated list of [formats](https://day.js.org/docs/en/display/format).",
          "values": []
        },
        {
          "name": "formatSeparator",
          "description": "The format separator character in the format attribute.",
          "values": []
        },
        {
          "name": "clearButton",
          "description": "Whether the clear button should be shown.",
          "values": []
        },
        {
          "name": "clearButtonAriaLabel",
          "description": "The aria label of the clear button.",
          "values": []
        },
        {
          "name": "floatingStrategy",
          "description": "The floating strategy of the datepicker.",
          "values": [{ "name": "FloatingStrategy" }]
        },
        {
          "name": "disableViewportAutoClose",
          "description": "Whether to keep popup open when trigger leaves viewport.",
          "values": []
        },
        {
          "name": "locale",
          "description": "The locale of the datepicker. By default it uses the global locale from dayjs. It is determined from the browser language.",
          "values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
        },
        {
          "name": "hideAdjacentMonths",
          "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to `false` for single mode and `true` for range mode.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/datepicker"
        }
      ]
    },
    {
      "name": "dap-ds-divider",
      "description": "A divider is a visual separator between elements.\n---\n\n\n### **CSS Properties:**\n - **--dds-divider-border-width** - The width of the divider border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-divider-border-style** - The style of the divider border. (default: solid) _(default: undefined)_\n- **--dds-divider-border-color** - The color of the divider border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-divider-border-color-inverted** - The color of the divider border when inverted. (default: var(--dds-border-neutral-divider-inverted)) _(default: undefined)_",
      "attributes": [
        {
          "name": "vertical",
          "description": "Whether the divider is vertical",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The spacing of the divider",
          "values": [
            { "name": "0" },
            { "name": "100" },
            { "name": "200" },
            { "name": "300" },
            { "name": "400" },
            { "name": "500" },
            { "name": "600" },
            { "name": "700" },
            { "name": "800" },
            { "name": "1000" },
            { "name": "1200" },
            { "name": "1400" },
            { "name": "1600" },
            { "name": "1800" },
            { "name": "2000" },
            { "name": "2400" },
            { "name": "3000" },
            { "name": "4000" },
            { "name": "5000" },
            { "name": "6000" }
          ]
        },
        {
          "name": "variant",
          "description": "The variant of the divider",
          "values": [{ "name": "normal" }, { "name": "inverted" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/divider"
        }
      ]
    },
    {
      "name": "dap-ds-feedback",
      "description": "A feedback is a container for feedback messages.\n---\n\n\n### **Slots:**\n - **icon** - The custom icon of the feedback.\n- _default_ - The text of the feedback.\n\n### **CSS Properties:**\n - **--dds-feedback-spacing** - The spacing around the feedback component. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-feedback-color** - The text color of the feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-font-size** - The font size of the feedback. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-feedback-font-weight** - The font weight of the feedback. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-feedback-icon-fill** - The fill color of the feedback icon. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-spacing** - The spacing between the icon and text. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-feedback-color-warning** - The text color for warning feedback. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-feedback-color-positive** - The text color for positive feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-color-negative** - The text color for negative feedback. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-warning** - The icon fill color for warning feedback. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-positive** - The icon fill color for positive feedback. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-negative** - The icon fill color for negative feedback. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main feedback container.\n- **icon** - The icon of the feedback.\n- **text** - The text of the feedback.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/feedback"
        }
      ]
    },
    {
      "name": "dap-ds-file-input-list-item",
      "description": "A file input list item is a container for file input list items.\n---\n\n\n### **Events:**\n - **dds-file-remove** - Dispatched when a file is removed from the list.\n- **dds-file-click** - Dispatched when a file is clicked.\n\n### **Slots:**\n - **delete-button** - The delete button.\n\n### **CSS Properties:**\n - **--dds-file-list-item-padding** - The padding of the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-border-width** - The border width of the file list item (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-file-list-item-border-color** - The border color of the file list item (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-file-list-item-border-radius** - The border radius of the file list item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-list-item-bg-color** - The background color of the file list item (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-file-list-item-font-weight** - The font weight of the file list item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-file-list-item-disabled-bg-color** - The background color of the disabled file list item (default: var(--dds-cold-grey-400)) _(default: undefined)_\n- **--dds-file-list-item-disabled-color** - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-file-list-item-content-margin** - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-content-gap** - The gap between content elements in the file list item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-filename-color** - The color of the filename text (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-file-list-item-filesize-color** - The color of the filesize text (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-x** - The padding of the feedback section (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-file-list-item-feedback-padding-y** - The padding of the feedback section (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-file-list-item-feedback-border-color** - The border color of the feedback section (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-file-list-item-feedback-font-size** - The font size of the feedback text (default: var(--dds-font-sm)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input list item container.\n- **feedback** - The feedback container.\n- **link** - The link text of the item component.\n- **filename** - The filename text of the item component.\n- **filesize** - The filesize text of the item component.\n- **spinner** - The spinner of the item component.\n- **remove-button** - The remove button of the item component.\n- **thumbnail** - The thumbnail of the item component.",
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables the file input list item.",
          "values": []
        },
        {
          "name": "inputName",
          "description": "The name of the file input.",
          "values": []
        },
        {
          "name": "feedback",
          "description": "The feedback message.",
          "values": []
        },
        {
          "name": "feedbackType",
          "description": "Feedback type.",
          "values": [
            { "name": "negative" },
            { "name": "positive" },
            { "name": "warning" },
            { "name": "info" }
          ]
        },
        {
          "name": "loading",
          "description": "Loading state of the file input list item.",
          "values": []
        },
        {
          "name": "showDeleteButton",
          "description": "Show delete button.",
          "values": []
        },
        {
          "name": "showFileSize",
          "description": "Show file size.",
          "values": []
        },
        {
          "name": "showFileLink",
          "description": "Show file link.",
          "values": []
        },
        {
          "name": "emitLinkEvent",
          "description": "Whether to emit a custom event with the file data when the file is clicked.",
          "values": []
        },
        {
          "name": "fileLinkLabel",
          "description": "The label of the file link.",
          "values": []
        },
        {
          "name": "fileData",
          "description": "The file data.",
          "values": [{ "name": "FileListElement" }, { "name": "File" }]
        },
        { "name": "subtle", "description": "Subtle style.", "values": [] },
        {
          "name": "progress",
          "description": "The progress of the file upload.",
          "values": []
        },
        {
          "name": "href",
          "description": "The url of the item link. If present, the item title will rendered as a link.",
          "values": []
        },
        {
          "name": "rel",
          "description": "The rel of the item link. Only used if href is present.",
          "values": []
        },
        {
          "name": "target",
          "description": "The target of the item link. Only used if href is present.",
          "values": [{ "name": "LinkTarget" }]
        },
        {
          "name": "download",
          "description": "Whether the file should be downloaded when clicked.",
          "values": []
        },
        {
          "name": "showThumbnail",
          "description": "Whether to show thumbnail preview for supported file types.",
          "values": []
        },
        {
          "name": "thumbnailSize",
          "description": "Size of the thumbnail preview.",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/file-input-list-item"
        }
      ]
    },
    {
      "name": "dap-ds-file-input-list",
      "description": "A file input list is a container for file input items.\n---\n\n\n### **Events:**\n - **dds-file-click** - Dispatched when a file is clicked.\n\n### **Slots:**\n - **delete-button** - The delete button.\n\n### **CSS Properties:**\n - **--dds-file-list-display** - Controls the display property (default: flex) _(default: undefined)_\n- **--dds-file-list-flex-direction** - Controls the flex-direction property (default: column) _(default: undefined)_\n- **--dds-file-list-padding** - Controls the padding property (default: 0) _(default: undefined)_\n- **--dds-file-list-list-style** - Controls the list-style-type property (default: none) _(default: undefined)_\n- **--dds-file-list-gap** - Controls the row-gap property (default: var(--dds-spacing-200)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input list container.",
      "attributes": [
        {
          "name": "for",
          "description": "The id of the file input element to bind to.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Disables the file input list.",
          "values": []
        },
        {
          "name": "label",
          "description": "The label for the file input list.",
          "values": []
        },
        {
          "name": "showDeleteButton",
          "description": "Whether to show the delete button in the file input list item.",
          "values": []
        },
        {
          "name": "showFileLink",
          "description": "Whether to show the file link in the file input list item.",
          "values": []
        },
        {
          "name": "fileLinkLabel",
          "description": "The label of the file link.",
          "values": []
        },
        {
          "name": "emitLinkEvent",
          "description": "Whether to emit a custom event with the file data when the file is clicked.",
          "values": []
        },
        {
          "name": "showFileSize",
          "description": "Whether to show the file size in the file input list item",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/file-input-list"
        }
      ]
    },
    {
      "name": "dap-ds-file-input",
      "description": "A file input is a control that allows users to select files to upload.\n---\n\n\n### **Events:**\n - **dds-upload-start** - Fired when a file upload starts.\n- **dds-upload-progress** - Fired during file upload progress.\n- **dds-upload-complete** - Fired when a file upload completes successfully.\n- **dds-upload-error** - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.\n- **dds-all-uploads-complete** - Fired when all file uploads are complete.\n- **dds-file-removed** - Fired when a file is removed from the file input.\n- **dds-file-delete-error** - Fired when a file deletion from server encounters an error.\n- **dds-file-change** - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.\n- **dds-files-accepted** - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).\n\n### **Methods:**\n - **abortUpload(fileName: _string_)** - Aborts upload for a specific file\n- **abortAllUploads()** - Aborts all active uploads\n- **startUpload()** - Manually start upload of all selected files\n\n### **Slots:**\n - **dropzone-content** - The content to display in the dropzone.\n\n### **CSS Properties:**\n - **--dds-file-input-holder-margin** - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0) _(default: undefined)_\n- **--dds-file-input-dropzone-padding** - The padding of the dropzone (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-file-input-dropzone-border** - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-radius** - The border radius of the dropzone (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-file-input-dropzone-background** - The background of the dropzone (default: var(--dds-color-background-primary)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-hover** - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-hover** - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-dragover** - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent)) _(default: undefined)_\n- **--dds-file-input-dropzone-background-dragover** - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light)) _(default: undefined)_\n- **--dds-file-input-dropzone-border-disabled** - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-file-input-dropzone-gap** - The gap between elements in the dropzone content (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-file-input-dropzone-accept-color** - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main file input container.\n- **input** - The file input control.\n- **label** - The file input label.\n- **description** - The file input description.\n- **feedback** - The file input feedback.\n- **tooltip** - The file input tooltip.\n- **upload-progress** - The upload progress container.\n- **browse-button** - The browse button.\n- **upload-button** - The upload button.\n- **dropzone** - The dropzone area.",
      "attributes": [
        {
          "name": "uploadButtonLabel",
          "description": "The label for the upload button.",
          "values": []
        },
        {
          "name": "browseButtonLabel",
          "description": "The label for the browse button.",
          "values": []
        },
        {
          "name": "showDropzone",
          "description": "Whether to show a separate dropzone area.",
          "values": []
        },
        {
          "name": "dropzoneText",
          "description": "Text to display in the dropzone.",
          "values": []
        },
        {
          "name": "showFileList",
          "description": "Whether to show the built-in file list.",
          "values": []
        },
        {
          "name": "confirmRemove",
          "description": "Whether to show confirmation dialog before removing files.",
          "values": []
        },
        {
          "name": "showUploadButton",
          "description": "Whether to show the upload button. Default is `true`.",
          "values": []
        },
        {
          "name": "showBrowseButton",
          "description": "Whether to show the browse button",
          "values": []
        },
        {
          "name": "accept",
          "description": "The file types that the file input accepts.",
          "values": []
        },
        {
          "name": "multiple",
          "description": "Whether the file input accepts multiple files.",
          "values": []
        },
        {
          "name": "keepValue",
          "description": "Whether to keep the value when new files are selected.",
          "values": []
        },
        {
          "name": "uploadUrl",
          "description": "A remote URL to upload files to.",
          "values": []
        },
        {
          "name": "autoupload",
          "description": "Whether to automatically upload files after selection.",
          "values": []
        },
        {
          "name": "uploadProperty",
          "description": "The property to use when uploading files",
          "values": []
        },
        {
          "name": "uploadMethod",
          "description": "The HTTP method to use when uploading files",
          "values": []
        },
        {
          "name": "deleteUrl",
          "description": "A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`.",
          "values": []
        },
        {
          "name": "deleteMethod",
          "description": "The HTTP method to use when deleting files",
          "values": []
        },
        {
          "name": "withCredentials",
          "description": "Whether to send credentials with the file upload request",
          "values": []
        },
        {
          "name": "uploadHeaders",
          "description": "Custom headers for upload requests (JSON string).",
          "values": []
        },
        {
          "name": "deleteHeaders",
          "description": "Custom headers for delete requests (JSON string).",
          "values": []
        },
        {
          "name": "maxFiles",
          "description": "The maximum number of files that can be uploaded.",
          "values": []
        },
        {
          "name": "maxFileSize",
          "description": "The maximum size of files that can be uploaded (in bytes).",
          "values": []
        },
        {
          "name": "maxSizePerFile",
          "description": "The maximum size a single file can have (in bytes).",
          "values": []
        },
        {
          "name": "maxFileSizeErrorText",
          "description": "Text for the max file size error.",
          "values": []
        },
        {
          "name": "maxSizePerFileErrorText",
          "description": "Text for the max size per file error.",
          "values": []
        },
        {
          "name": "maxFileAmountErrorText",
          "description": "Text for the max file amount error.",
          "values": []
        },
        {
          "name": "fileTypeErrorText",
          "description": "Text for the file type error.",
          "values": []
        },
        {
          "name": "removeButtonLabel",
          "description": "The label for the remove button.",
          "values": []
        },
        {
          "name": "cancelButtonLabel",
          "description": "The label for the cancel button.",
          "values": []
        },
        {
          "name": "removeButtonDanger",
          "description": "Whether the remove button is dangerous",
          "values": []
        },
        {
          "name": "showThumbnail",
          "description": "Whether to show thumbnail preview for supported file types in the built-in file list",
          "values": []
        },
        {
          "name": "dropzoneAriaLabel",
          "description": "Aria label for the dropzone.",
          "values": []
        },
        {
          "name": "dropzoneFocusable",
          "description": "Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true).",
          "values": []
        },
        {
          "name": "thumbnailSize",
          "description": "Size of the thumbnail preview in the built-in file list",
          "values": [
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/file-input"
        }
      ]
    },
    {
      "name": "dap-ds-icon",
      "description": "An icon is a graphical symbol that represents an object or action.\n---\n\n\n### **Slots:**\n - _default_ - The content of the icon for custom svg icons.\n\n### **CSS Properties:**\n - **--dds-icon-size-xs** - The size of extra small icons (default: 12px) _(default: undefined)_\n- **--dds-icon-size-sm** - The size of small icons (default: 16px) _(default: undefined)_\n- **--dds-icon-size-md** - The size of medium icons (default: 20px) _(default: undefined)_\n- **--dds-icon-size-lg** - The size of large icons (default: 24px) _(default: undefined)_\n- **--dds-icon-size-xl** - The size of extra large icons (default: 32px) _(default: undefined)_\n- **--dds-icon-size-xxl** - The size of extra extra large icons (default: 40px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main icon container.\n- **icon** - The icon of the icon.",
      "attributes": [
        { "name": "name", "description": "The name of the icon", "values": [] },
        {
          "name": "size",
          "description": "The size of the icon",
          "values": [
            { "name": "xxl" },
            { "name": "xl" },
            { "name": "lg" },
            { "name": "md" },
            { "name": "sm" },
            { "name": "xs" }
          ]
        },
        {
          "name": "staticSize",
          "description": "The size of the icon in pixels. This overrides the size attribute.",
          "values": []
        },
        {
          "name": "focusable",
          "description": "Whether the icon is focusable. Default is false.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon"
        }
      ]
    },
    {
      "name": "dap-ds-icon-button",
      "description": "An icon button is a button with an icon.\n---\n\n\n### **Slots:**\n - _default_ - The icon of the button.\n\n### **CSS Properties:**\n - **--dds-icon-button-border-width** - Border width of the icon button (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-icon-button-border-color** - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-icon-button-border-radius** - Border radius of the icon button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-icon-button-hover-border-width** - Border width on hover (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-icon-button-active-border-width** - Border width when active (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-icon-button-transition** - Transition property for the icon button (default: var(--dds-transition-all)) _(default: undefined)_\n- **--dds-icon-button-cursor** - Cursor style for the button (default: pointer) _(default: undefined)_\n- **--dds-icon-button-disabled-cursor** - Cursor style for the disabled button (default: not-allowed) _(default: undefined)_\n- **--dds-icon-button-column-gap** - Column gap between elements (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-lg** - Padding for large size (default: var(--dds-spacing-0)) _(default: undefined)_\n- **--dds-icon-button-padding-md** - Padding for medium size (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-sm** - Padding for small size (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-icon-button-padding-xs** - Padding for extra small size (default: var(--dds-spacing-25)) _(default: undefined)_\n- **--dds-icon-button-size-lg** - Size for large icon button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-icon-button-size-md** - Size for medium icon button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-icon-button-size-sm** - Size for small icon button (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-icon-button-size-xs** - Size for extra small icon button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-icon-button-neutral-bg** - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-icon-button-neutral-color** - Text color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-hover-bg** - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-active-bg** - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-icon-button-brand-bg** - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-color** - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-hover-bg** - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-icon-button-brand-active-bg** - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-icon-button-inverted-bg** - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) _(default: undefined)_\n- **--dds-icon-button-inverted-color** - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-hover-bg** - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) _(default: undefined)_\n- **--dds-icon-button-inverted-active-bg** - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-bg** - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-color** - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-hover-bg** - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-active-bg** - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-color** - Color for disabled state (default: var(--dds-icon-neutral-disabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **content** - The icon of the button.\n- **icon** - The icon of the icon.\n- **icon-base** - The base of the icon.",
      "attributes": [
        {
          "name": "variant",
          "description": "The type of the button.",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "inverted" },
            { "name": "inverted-brand" }
          ]
        },
        {
          "name": "clean",
          "description": "Adds a transparent background to the button",
          "values": []
        },
        {
          "name": "iconSize",
          "description": "The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "The disabled state of the button.",
          "values": []
        },
        {
          "name": "htmlType",
          "description": "The type of the button.",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "icon",
          "description": "The icon of the button. You can use the icon names from the icon component",
          "values": []
        },
        {
          "name": "name",
          "description": "The name of the button",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-button"
        }
      ]
    },
    {
      "name": "dap-ds-image-zoom",
      "description": "An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n---\n\n\n### **Events:**\n - **dds-zoom** - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n- **dds-unzoom** - Fires after the image has unzoomed.\n\n### **Methods:**\n - **zoom(): _void_** - Programmatically zoom the image.\n- **unzoom(): _void_** - Programmatically unzoom the image.\n\n### **Slots:**\n - _default_ - The image or content element to zoom. Should contain an <img> element.\n\n### **CSS Properties:**\n - **--dds-image-zoom-overlay-bg** - Overlay background color (default: rgba(0, 0, 0, 0.8)). _(default: undefined)_\n- **--dds-image-zoom-transition-speed** - Animation duration (default: 300ms). _(default: undefined)_\n- **--dds-image-zoom-transition-timing** - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)). _(default: undefined)_\n\n### **CSS Parts:**\n - **trigger** - The zoom trigger wrapper element.\n- **dialog** - The zoom dialog element.\n- **overlay** - The backdrop overlay element.\n- **zoomed-image** - The zoomed image element.\n- **unzoom-button** - The button to close the zoomed view.\n- **expand-button** - The button to expand the image.\n- **expand-button-base** - The base of the expand button.\n- **expand-button-content** - The content of the expand button.\n- **unzoom-button-base** - The base of the unzoom button.\n- **unzoom-button-content** - The content of the unzoom button.\n- **expand-button-icon** - The icon of the expand button.\n- **unzoom-button-icon** - The icon of the unzoom button.",
      "attributes": [
        {
          "name": "open",
          "description": "The open/zoomed state. Can be used for controlled mode.",
          "values": []
        },
        {
          "name": "isDisabled",
          "description": "Disables zoom functionality.",
          "values": []
        },
        {
          "name": "zoomMargin",
          "description": "Margin in pixels from viewport edges when zoomed. Default is 0.",
          "values": []
        },
        {
          "name": "expandButtonAriaLabel",
          "description": "Accessible label for the zoom trigger. Default is 'Expand image'.",
          "values": []
        },
        {
          "name": "unzoomButtonAriaLabel",
          "description": "Accessible label for the unzoom button. Default is 'Minimize image'.",
          "values": []
        },
        {
          "name": "canSwipeToUnzoom",
          "description": "Enables swipe gesture to close when zoomed. Default is true.",
          "values": []
        },
        {
          "name": "swipeToUnzoomThreshold",
          "description": "Swipe distance in pixels required to trigger unzoom. Default is 10.",
          "values": []
        },
        {
          "name": "zoomSrc",
          "description": "URL of a higher quality image to display when zoomed. Falls back to the slotted image src.",
          "values": []
        },
        {
          "name": "hideButtons",
          "description": "Hides the expand and unzoom buttons. Default is false.",
          "values": []
        },
        { "name": "zoomButtonVariant", "values": [{ "name": "ButtonVariant" }] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/image-zoom"
        }
      ]
    },
    {
      "name": "dap-ds-input",
      "description": "An input is a field used to collect user input.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/input"
        }
      ]
    },
    {
      "name": "dap-ds-label",
      "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/label"
        }
      ]
    },
    {
      "name": "dap-ds-list-item",
      "description": "A list\n---\n\n\n### **Slots:**\n - _default_ - The content of the list item.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **actions** - The actions of the list item.\n\n### **CSS Properties:**\n - **--dds-list-item-gap** - Gap between list item elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-content-gap** - Gap between content elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-horizontal-gap** - Gap for horizontal alignment (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-list-item-vertical-gap** - Gap for vertical alignment (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-list-item-icon-size** - Size of the icon (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-list-item-number-size** - Size of the number icon (default: 20px) _(default: undefined)_\n- **--dds-list-item-actions-gap** - Gap between action elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-list-item-actions-padding** - Padding for the actions container (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-list-item-background-base** - Background color for base shade (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-list-item-background-subtle** - Background color for subtle shade (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-list-item-background-medium** - Background color for medium shade (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-list-item-background-strong** - Background color for strong shade (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-icon-brand** - Color for brand icon (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-neutral** - Color for neutral icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-list-item-icon-positive** - Color for positive icon (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-list-item-icon-negative** - Color for negative icon (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-list-item-title-color** - Title text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-list-item-description-color** - Description text color (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-list-item-number-text-color** - Number text color (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main list item container.\n- **icon** - The icon of the list item.\n- **title** - The title of the list item.\n- **description** - The description of the list item.\n- **container** - The container of the list item.\n- **list-item-base** - The base list item container.\n- **icon-container** - The container of the icon.\n- **title-container** - The container of the title.\n- **description-container** - The container of the description.\n- **actions-container** - The container of the actions.\n- **iteractive-indicator-container** - The container of the interactive indicator.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the list item.",
          "values": [
            { "name": "info" },
            { "name": "pass" },
            { "name": "fail" },
            { "name": "notapplicable" },
            { "name": "empty" },
            { "name": "number" }
          ]
        },
        {
          "name": "shade",
          "description": "The background strongness of the list item.",
          "values": [
            { "name": "none" },
            { "name": "subtle" },
            { "name": "base" },
            { "name": "medium" },
            { "name": "strong" }
          ]
        },
        {
          "name": "status",
          "description": "The status of the list item.",
          "values": [
            { "name": "transparent" },
            { "name": "brand" },
            { "name": "neutral" },
            { "name": "positive" },
            { "name": "negative" }
          ]
        },
        {
          "name": "alignment",
          "description": "The alignment of the list item.",
          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
        },
        {
          "name": "title",
          "description": "The title of the list item.",
          "values": []
        },
        {
          "name": "icon",
          "description": "The icon of the list item. This is an icon name from the built in icons.",
          "values": []
        },
        {
          "name": "number",
          "description": "The number of the list item. Only used when variant is 'number'.",
          "values": []
        },
        {
          "name": "interactive",
          "description": "Whether the list item is interactive. Generates an anchor tag.",
          "values": []
        },
        {
          "name": "target",
          "description": "The link target of the list item when interactive.",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "href",
          "description": "The href of the list item when interactive",
          "values": []
        },
        {
          "name": "rel",
          "description": "The rel of the list item when interactive",
          "values": []
        },
        {
          "name": "noIcon",
          "description": "Whether the list item has an icon.",
          "values": []
        },
        {
          "name": "noPadding",
          "description": "Whether the list item has no padding.",
          "values": []
        },
        {
          "name": "renderAs",
          "description": "The render as type of the list item, only applicable when interactive.",
          "values": [{ "name": "a" }, { "name": "button" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/list-item"
        }
      ]
    },
    {
      "name": "dap-ds-link",
      "description": "A link is a reference to a web resource.\n---\n\n\n### **Events:**\n - **dds-click** - Emitted when the link is clicked.\n\n### **Slots:**\n - _default_ - The text of the link.\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the visible link so it is always accessible to programmatic clicks.\n\n### **CSS Properties:**\n - **--dds-link-color** - The color of the link text (default: var(--dds-link-enabled)). _(default: undefined)_\n- **--dds-link-hover-color** - The color of the link text on hover (default: var(--dds-link-hover)). _(default: undefined)_\n- **--dds-link-active-color** - The color of the link text when active (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-visited-color** - The color of the visited link text (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-font-size** - The font size of the link text (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-link-line-height** - The line height of the link text (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-font-weight** - The font weight of the link text (default: var(--dds-font-weight-medium)). _(default: undefined)_\n- **--dds-link-text-decoration** - The text decoration of the link (default: underline). _(default: undefined)_\n- **--dds-link-neutral-color** - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)). _(default: undefined)_\n- **--dds-link-neutral-hover-color** - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)). _(default: undefined)_\n- **--dds-link-neutral-active-color** - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-neutral-visited-color** - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)). _(default: undefined)_\n- **--dds-link-brand-color** - The color of the brand variant link (default: var(--dds-link-enabled)). _(default: undefined)_\n- **--dds-link-brand-hover-color** - The hover color of the brand variant link (default: var(--dds-link-hover)). _(default: undefined)_\n- **--dds-link-brand-active-color** - The active color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-brand-visited-color** - The visited color of the brand variant link (default: var(--dds-link-pressed)). _(default: undefined)_\n- **--dds-link-inverted-color** - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)). _(default: undefined)_\n- **--dds-link-inverted-hover-color** - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)). _(default: undefined)_\n- **--dds-link-inverted-active-color** - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)). _(default: undefined)_\n- **--dds-link-inverted-visited-color** - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)). _(default: undefined)_\n- **--dds-link-warning-color** - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). _(default: undefined)_\n- **--dds-link-warning-hover-color** - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)). _(default: undefined)_\n- **--dds-link-warning-active-color** - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)). _(default: undefined)_\n- **--dds-link-warning-visited-color** - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). _(default: undefined)_\n- **--dds-link-disabled-color** - The color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-hover-color** - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-active-color** - The active color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-disabled-visited-color** - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-link-lg-font-size** - The font size of the large link (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-link-lg-line-height** - The line height of the large link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-md-font-size** - The font size of the medium link (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-link-md-line-height** - The line height of the medium link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-sm-font-size** - The font size of the small link (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-link-sm-line-height** - The line height of the small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-xs-font-size** - The font size of the extra small link (default: var(--dds-font-xs)). _(default: undefined)_\n- **--dds-link-xs-line-height** - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)). _(default: undefined)_\n- **--dds-link-normal-font-weight** - The font weight of the normal link (default: var(--dds-font-weight-medium)). _(default: undefined)_\n- **--dds-link-bold-font-weight** - The font weight of the bold link (default: var(--dds-font-weight-bold)). _(default: undefined)_\n- **--dds-link-no-underline-text-decoration** - The text decoration when underline is removed (default: none). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main link container.\n- **text** - The text of the link.",
      "attributes": [
        {
          "name": "size",
          "description": "The size of the link",
          "values": [
            { "name": "lg" },
            { "name": "md" },
            { "name": "sm" },
            { "name": "xs" }
          ]
        },
        {
          "name": "variant",
          "description": "The theme of the link",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "inverted" },
            { "name": "warning" }
          ]
        },
        {
          "name": "target",
          "description": "The target of the link.",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        { "name": "bold", "description": "Bold link style", "values": [] },
        {
          "name": "noUnderline",
          "description": "Removes underline style",
          "values": []
        },
        {
          "name": "href",
          "description": "The href / URL of the link",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Disabled state of the link",
          "values": []
        },
        { "name": "rel", "description": "The rel of the link", "values": [] },
        {
          "name": "download",
          "description": "The download attribute of the link",
          "values": []
        },
        {
          "name": "targetBlankText",
          "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/link"
        }
      ]
    },
    {
      "name": "dap-ds-modal",
      "description": "A modal is a container for modal content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the modal opens.\n- **dds-opened** - Fires after the modal opens.\n- **dds-before-close** - Fires before the modal closes.\n- **dds-closed** - Fires after the modal closed.\n- **dds-close** - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-ok** - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n- **dds-cancel** - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the modal.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\n\n### **CSS Properties:**\n - **--dds-modal-max-block-size** - Maximum height of the modal. (default: 80vh). _(default: undefined)_\n- **--dds-modal-max-inline-size** - Maximum width of the modal. (default: 600px). _(default: undefined)_\n- **--dds-modal-padding-sm** - Padding inside the modal. (default: var(--dds-spacing-600)). _(default: undefined)_\n- **--dds-modal-padding-lg** - Padding inside the modal. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-modal-transform-amount** - Amount to transform for entrance animation. (default: 2rem). _(default: undefined)_\n- **--dds-modal-transition-speed** - Speed of transition animations. (default: var(--dds-transition-fast)). _(default: undefined)_\n- **--dds-modal-transition-timing** - Timing function for transitions. (default: var(--dds-easing-ease-in-out)). _(default: undefined)_\n- **--dds-modal-border-width** - Border width of the modal. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-modal-border-color** - Border color of the modal. (default: var(--dds-border-neutral-divider)). _(default: undefined)_\n- **--dds-modal-border-radius** - Border radius of the modal. (default: var(--dds-radius-large, 16px)). _(default: undefined)_\n- **--dds-modal-background** - Background color of the modal. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-modal-header-margin-sm** - Margin below the header. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-modal-header-margin-lg** - Margin below the header. (default: var(--dds-spacing-600)). _(default: undefined)_\n- **--dds-modal-footer-margin-sm** - Margin above the footer. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-modal-footer-margin-lg** - Margin above the footer. (default: var(--dds-spacing-600)). _(default: undefined)_\n- **--dds-modal-footer-gap** - Gap between footer elements. (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main modal container.\n- **panel** - The panel of the modal.\n- **header** - The header of the modal.\n- **header-container** - The container of the header.\n- **title** - The title of the modal.\n- **description** - The description of the modal.\n- **footer** - The footer of the modal.\n- **content** - The body of the modal.\n- **closebutton** - The close button of the modal.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/modal"
        }
      ]
    },
    {
      "name": "dap-ds-navigation-menu-item",
      "description": "A navigation menu item that can contain either a simple link or dropdown content.\nSupports nested items with cascading flyout behavior. Part of the navigation menu system.\nThis is for NAVIGATION (website menus), not application menus.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n- **dds-navigation-dropdown-open** - Fired when a navigation dropdown is opened.\n\n### **Methods:**\n - **updatePosition()** - Update popup position using Floating UI.\n- **setRovingTabIndex(active: _boolean_)** - Sets this item as the active (or inactive) roving tabindex target.\nOnly the active item's trigger is in the sequential tab order (tabindex=\"0\").\nAll others are removed (tabindex=\"-1\") so Tab exits the whole nav in one step.\n- **focusFirstDropdownChild()** - Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **focusLastDropdownChild()** - Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **_handleTriggerSlotChangeCallback()** - Update trigger element attributes and properties.\n\n### **Slots:**\n - **trigger** - The trigger element (link, button, etc.) for this navigation item.\n- **title** - The title of the navigation item.\n- **indicator** - The expand indicator icon (defaults to arrow icon based on orientation and level).\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the popup so it is always accessible to programmatic clicks.\n- _default_ - The dropdown content (can contain nested dap-ds-navigation-menu-item elements).\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-spacing** - The padding/spacing of the navigation menu item content. (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-width** - The border width of the navigation menu item content. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-color** - The border color of the navigation menu item content. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-radius** - The border radius of the navigation menu item content. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-background** - The background color of the navigation menu item content. (default: var(--dds-background-neutral-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-shadow** - The box shadow of the navigation menu item content. (default: var(--dds-shadow-base)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part of the navigation item.\n- **trigger** - The trigger element part.\n- **trigger-base** - The base part of the trigger button (from dap-ds-button).\n- **trigger-content** - The content part of the trigger button (from dap-ds-button).\n- **trigger-high-contrast** - The high contrast part of the trigger button (from dap-ds-button).\n- **trigger-stack-base** - The base part of the trigger stack (from dap-ds-stack).\n- **title** - The title slot wrapper.\n- **indicator** - The expand indicator container.\n- **indicator-icon** - The expand indicator icon part.\n- **indicator-icon-base** - The base part of the indicator icon (from dap-ds-icon).\n- **indicator-icon-icon** - The icon part of the indicator icon (from dap-ds-icon).\n- **popup** - The dropdown popup container.\n- **content** - The dropdown content wrapper (default slot).\n- **arrow** - The dropdown arrow part.",
      "attributes": [
        {
          "name": "disabled",
          "description": "The disabled state of the popup. Default is false.",
          "values": []
        },
        {
          "name": "opened",
          "description": "The open state of the popup. Default is false.",
          "values": []
        },
        {
          "name": "placement",
          "description": "The placement of the popup (automatically adjusted based on nesting level). Default is 'bottom-start'.",
          "values": [
            { "name": "top" },
            { "name": "right" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" },
            { "name": "left-start" },
            { "name": "left-end" },
            { "name": "right-start" },
            { "name": "right-end" }
          ]
        },
        {
          "name": "floatingStrategy",
          "description": "The floating strategy of the popup. Default is 'fixed'.",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "offset",
          "description": "The offset of the popup. Default is 0.",
          "values": []
        },
        {
          "name": "sync",
          "description": "Whether the popup should sync its width with the trigger. Default is false.",
          "values": []
        },
        {
          "name": "maxHeight",
          "description": "The maximum height of the popup. Default is 250.",
          "values": [{ "name": "auto" }]
        },
        {
          "name": "maxWidth",
          "description": "The maximum width of the popup. Default is 'auto'.",
          "values": [{ "name": "auto" }]
        },
        {
          "name": "hasArrow",
          "description": "Whether the popup has an arrow. Default is false.",
          "values": []
        },
        {
          "name": "overflow",
          "description": "Whether the popup should overflow. Default is true.",
          "values": []
        },
        {
          "name": "fullWidth",
          "description": "Whether the popup should take full width of the screen. Default is false.",
          "values": []
        },
        {
          "name": "icon",
          "description": "The name of the icon to display in the trigger.",
          "values": []
        },
        {
          "name": "aria-labelledby",
          "description": "The name of the element that labels the navigation dropdown.",
          "values": []
        },
        {
          "name": "activeHref",
          "description": "The href of the navigation item that is active (receives aria-current=\"page\").",
          "values": []
        },
        {
          "name": "baseHref",
          "description": "The href of the navigation item. If provided, the navigation item will be active if the href is a substring of the activeHref.",
          "values": []
        },
        {
          "name": "exactHref",
          "description": "Whether the navigation item should be active if the href is exactly the same as the activeHref. Default is false.",
          "values": []
        },
        {
          "name": "href",
          "description": "The href URL for the navigation item link. When provided, the default trigger renders as a link.",
          "values": []
        },
        {
          "name": "target",
          "description": "The target attribute for link navigation.",
          "values": [
            { "name": "_blank" },
            { "name": "_self" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "The rel attribute for link security and behavior.",
          "values": []
        },
        {
          "name": "label",
          "description": "The label text for the navigation item. This will be displayed in the title slot if no custom title slot content is provided.",
          "values": []
        },
        {
          "name": "level",
          "description": "The nesting level of this navigation item (0 = top-level, automatically set for nested items). Default is 0.",
          "values": []
        },
        {
          "name": "orientation",
          "description": "The orientation of the parent navigation menu (automatically inherited). Default is 'horizontal'.",
          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
        },
        {
          "name": "tabMode",
          "description": "Controls how Tab key navigates through top-level items. Default is 'group'.",
          "values": [{ "name": "group" }, { "name": "items" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/navigation-menu-item"
        }
      ]
    },
    {
      "name": "dap-ds-navigation-menu",
      "description": "A navigation menu for website/application navigation. Supports nested dropdowns with unlimited depth.\nThis is a NAVIGATION component, not an application menu (like dropdowns or context menus).\nUses semantic HTML (`<nav>`) and proper navigation ARIA attributes.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n\n### **Methods:**\n - **getAllItems()** - Gets all slotted menu items, ignoring disabled elements\n- **getCurrentItem()** - Gets the current menu item (the one marked with `data-nav-current`).\nThe menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n- **setCurrentItem(item: _DapDSNavigationMenuItem_)** - Sets the current menu item. In 'group' mode (default), applies roving tabindex so only the\nactive item's trigger is in the sequential tab order (tabindex=\"0\"). In 'items' mode, all\ntop-level items remain in the tab order — only the data-nav-current marker is updated.\n\n### **Slots:**\n - _default_ - The navigation menu list and items.\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-gap** - The gap between navigation menu items. (default: var(--dds-spacing-100)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main navigation menu container (nav element).",
      "attributes": [
        {
          "name": "activeHref",
          "description": "The currently active href for highlighting active navigation items with aria-current=\"page\". Defaults to window.location.pathname if not provided.",
          "values": []
        },
        {
          "name": "orientation",
          "description": "The orientation of the navigation menu. Default is 'horizontal'.",
          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
        },
        {
          "name": "fullWidth",
          "description": "Whether the navigation menu should take full width of the screen. Default is false.",
          "values": []
        },
        {
          "name": "allowMultipleOpen",
          "description": "Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true.",
          "values": []
        },
        {
          "name": "tabMode",
          "description": "Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order.",
          "values": [{ "name": "group" }, { "name": "items" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/navigation-menu"
        }
      ]
    },
    {
      "name": "dap-ds-notification-badge",
      "description": "A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.\n---\n\n\n### **Slots:**\n - _default_ - The content of the notification badge.\n\n### **CSS Properties:**\n - **--dds-notification-badge-size** - Controls the overall size of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-min-width** - Minimum width of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-height** - Height of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-padding** - Padding inside the notification badge (default: 0 var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-notification-badge-border-radius** - Border radius of the notification badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-notification-badge-font-size** - Font size of the notification badge text (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-notification-badge-dot-size** - Size of the dot variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-notification-badge-color** - Text color of the notification badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-notification-badge-neutral-bg** - Background color for neutral type (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-notification-badge-brand-bg** - Background color for brand type (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-notification-badge-info-bg** - Background color for info type (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-positive-bg** - Background color for positive type (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-notification-badge-warning-bg** - Background color for warning type (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-notification-badge-negative-bg** - Background color for negative type (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-x** - Horizontal offset for circular positioning (default: 20px) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-y** - Vertical offset for circular positioning (default: -20px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the notification badge.\n- **noty** - The notification badge container.",
      "attributes": [
        {
          "name": "badgeContent",
          "description": "The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string.",
          "values": []
        },
        {
          "name": "visible",
          "description": "This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control.",
          "values": []
        },
        {
          "name": "showZero",
          "description": "This switch decides whether to show a zero value or not.",
          "values": []
        },
        {
          "name": "type",
          "description": "The color scheme of the badge",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "info" },
            { "name": "positive" },
            { "name": "warning" },
            { "name": "negative" }
          ]
        },
        {
          "name": "variant",
          "description": "The variant of the badge.",
          "values": [{ "name": "round" }, { "name": "dot" }]
        },
        {
          "name": "max",
          "description": "The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap.",
          "values": []
        },
        {
          "name": "placement",
          "description": "The position of the badge content around the slot content.",
          "values": [
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" }
          ]
        },
        {
          "name": "circular-auto",
          "description": "Whether to automatically detect circular elements and adjust positioning accordingly",
          "values": []
        },
        {
          "name": "force-circular",
          "description": "Override circular positioning detection - forces circular positioning calculation",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/notification-badge"
        }
      ]
    },
    {
      "name": "dap-ds-number-input",
      "description": "A number input component.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800) ). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main number input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.\n- **decrement-button** - The decrement button of the input.\n- **increment-button** - The increment button of the input.\n- **decrement-button-base** - The base of the decrement button.\n- **increment-button-base** - The base of the increment button.\n- **decrement-button-content** - The content of the decrement button.\n- **increment-button-content** - The content of the increment button.",
      "attributes": [
        {
          "name": "thousandSeparator",
          "description": "The thousand separator of the input.",
          "values": []
        },
        {
          "name": "decimalSeparator",
          "description": "The decimal separator of the input.",
          "values": []
        },
        {
          "name": "decimalScale",
          "description": "The decimal scale of the input.",
          "values": []
        },
        {
          "name": "allowNegative",
          "description": "The allow negative state of the input.",
          "values": []
        },
        {
          "name": "allowDecimal",
          "description": "The allow decimal state of the input.",
          "values": []
        },
        {
          "name": "hideControls",
          "description": "Hides the increment and decrement buttons.",
          "values": []
        },
        {
          "name": "padStart",
          "description": "The number of leading zeros to add to the input.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/number-input"
        }
      ]
    },
    {
      "name": "dap-ds-official-website-banner",
      "description": "An official website banner is a banner that displays that the website is an official website.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/official-website-banner"
        }
      ]
    },
    {
      "name": "dap-ds-option-group",
      "description": "An option group is a container for grouping related option items.\nUsed with dap-ds-select to create grouped options that render as native optgroup elements.\n---\n\n\n### **Slots:**\n - _default_ - The option items in this group.\n\n### **CSS Parts:**\n - **base** - The main option group container.\n- **label** - The label of the option group.",
      "attributes": [
        {
          "name": "label",
          "description": "The label of the option group (displayed in native optgroup).",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Whether all options in the group are disabled.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/option-group"
        }
      ]
    },
    {
      "name": "dap-ds-option-item",
      "description": "An option item is a selectable item in a list of options.\n---\n\n\n### **Slots:**\n - **prefix** - The prefix of the option item.\n- _default_ - The label of the option item.\n- **suffix** - The suffix of the option item.\n\n### **CSS Properties:**\n - **--dds-option-item-padding-vertical** - The vertical padding of the option item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-option-item-padding-horizontal** - The horizontal padding of the option item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-option-item-border-radius** - The border radius of the option item (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-option-item-color** - The text color of the option item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-option-item-hover-bg** - The background color of the option item when hovered (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-option-item-active-bg** - The background color of the option item when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-option-item-disabled-color** - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-option-item-high-contrast-border** - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-option-item-selected-font-weight** - The font weight of the option item when selected (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-option-item-xs-font-size** - The font size of the option item in extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-option-item-lg-font-size** - The font size of the option item in large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-option-item-selected-icon-width** - The width of the selected icon (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main option item container.\n- **prefix** - The prefix of the option item.\n- **label** - The label of the option item.\n- **suffix** - The suffix of the option item.",
      "attributes": [
        {
          "name": "selected",
          "description": "The selected state of the option item",
          "values": []
        },
        {
          "name": "selectable",
          "description": "Wheteher the item is selectable, whether it shows the selected icon",
          "values": []
        },
        {
          "name": "selectedIconPosition",
          "description": "The position of the selected icon",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the option item",
          "values": []
        },
        {
          "name": "disabled",
          "description": "The disabled state of the option item",
          "values": []
        },
        {
          "name": "focused",
          "description": "The focused state of the option item",
          "values": []
        },
        {
          "name": "label",
          "description": "The label of the option item, it can be a simplier version of an item",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/option-item"
        }
      ]
    },
    {
      "name": "dap-ds-option-list",
      "description": "An option list is a list of selectable options.\n---\n\n\n### **Events:**\n - **dds-cancel** - Fired when the escape key is pressed.\n- **dds-option-change** - Fired when the option list value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-list-changed** - Fired when the available options list changes.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Parts:**\n - **base** - The main option list container.\n- **option-item** - The option item of the option list.\n- **popup-base** - The base of the popup.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.",
      "attributes": [
        {
          "name": "filterText",
          "description": "The filter text of the option list",
          "values": []
        },
        {
          "name": "value",
          "description": "The value of the option list",
          "values": []
        },
        {
          "name": "focused",
          "description": "The focused state of the option list.",
          "values": []
        },
        {
          "name": "search",
          "description": "Whether the option list is searchable",
          "values": []
        },
        {
          "name": "searchMode",
          "description": "The search mode of the option list. Default is `none`",
          "values": [
            { "name": "none" },
            { "name": "typehead" },
            { "name": "autocomplete" },
            { "name": "manual" }
          ]
        },
        {
          "name": "selectable",
          "description": "Whether the option list items are selectable, whether it shows the selected icon",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/option-list"
        }
      ]
    },
    {
      "name": "dap-ds-overlay",
      "description": "An overlay is a container for overlay content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the overlay opens.\n- **dds-opened** - Fires after the overlay opens.\n- **dds-before-close** - Fires before the overlay closes.\n- **dds-closed** - Fires after the overlay closes.\n\n### **Slots:**\n - _default_ - The content of the overlay.\n\n### **CSS Properties:**\n - **--dds-overlay-z-index** - Controls the z-index of the overlay (default: 1) _(default: undefined)_\n- **--dds-overlay-background** - Controls the background of the overlay (default: var(--dds-black-10)) _(default: undefined)_\n- **--dds-overlay-opacity-closed** - Controls the opacity when overlay is closed (default: 0) _(default: undefined)_\n- **--dds-overlay-opacity-open** - Controls the opacity when overlay is open (default: 1) _(default: undefined)_\n- **--dds-overlay-transition-duration** - Controls the transition duration (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-overlay-transition-timing** - Controls the transition timing function (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The overlay element",
      "attributes": [
        {
          "name": "open",
          "description": "The open state of the overlay.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/overlay"
        }
      ]
    },
    {
      "name": "dap-ds-pager",
      "description": "A pager is a component that displays pagination controls.\n---\n\n\n### **Events:**\n - **dds-pagination-change** - Event fired when the pagination changes\n\n### **CSS Properties:**\n - **--dds-pager-spacing-vertical** - The vertical spacing of the pager (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-pager-spacing-horizontal** - The horizontal spacing of the pager (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-pager-button-padding** - The padding of the pager buttons (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-pager-button-border-width** - The border width of the pager buttons (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-pager-button-border-color** - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-border-radius** - The border radius of the pager buttons (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-pager-button-background** - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-font-size** - The font size of the pager buttons (default: var(--dds-font-sm, 14px)) _(default: undefined)_\n- **--dds-pager-button-font-weight** - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main pager container.\n- **first** - The first page button.\n- **previous** - The previous page button.\n- **next** - The next page button.\n- **last** - The last page button.\n- **page-size** - The page size select.\n- **pager-button-first-base** - The base of the first page button.\n- **pager-button-first-content** - The content of the first page button.\n- **pager-button-previous-base** - The base of the previous page button.\n- **pager-button-previous-content** - The content of the previous page button.\n- **pager-button-next-base** - The base of the next page button.\n- **pager-button-next-content** - The content of the next page button.\n- **pager-button-last-base** - The base of the last page button.\n- **pager-button-last-content** - The content of the last page button.\n- **page-size-select-base** - The base of the page size select.\n- **page-size-select-trigger** - The trigger of the page size select.",
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the pager is disabled.",
          "values": []
        },
        {
          "name": "manualPagination",
          "description": "Enable manual pagination. If true, the component will not automatically update the page index.",
          "values": []
        },
        {
          "name": "pageIndex",
          "description": "The current page index.",
          "values": []
        },
        {
          "name": "pageSize",
          "description": "The number of items per page.",
          "values": []
        },
        {
          "name": "totalRows",
          "description": "The total number of rows.",
          "values": []
        },
        {
          "name": "pageSizeOptions",
          "description": "Available page size options",
          "values": [{ "name": "array" }]
        },
        {
          "name": "showPageSizeOptions",
          "description": "Show the page size options.",
          "values": []
        },
        {
          "name": "showPageIndex",
          "description": "Show the page index.",
          "values": []
        },
        {
          "name": "showPageCount",
          "description": "Show the page count.",
          "values": []
        },
        {
          "name": "showFirstButton",
          "description": "Show the first button.",
          "values": []
        },
        {
          "name": "showPreviousButton",
          "description": "Show the previous button.",
          "values": []
        },
        {
          "name": "showNextButton",
          "description": "Show the next button.",
          "values": []
        },
        {
          "name": "showLastButton",
          "description": "Show the last button.",
          "values": []
        },
        {
          "name": "firstButtonLabel",
          "description": "The first button label.",
          "values": []
        },
        {
          "name": "previousButtonLabel",
          "description": "The previous button label.",
          "values": []
        },
        {
          "name": "nextButtonLabel",
          "description": "The next button label.",
          "values": []
        },
        {
          "name": "lastButtonLabel",
          "description": "The last button label.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/pager"
        }
      ]
    },
    {
      "name": "dap-ds-password-input",
      "description": "A password input a field for entering a password.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **postfix** - The postfix of the password input.\n- **password-input** - The password input.\n- **password-input--visible** - The visible password input.\n- **show-button** - The show button of the password input.\n- **show-button-base** - The base of the show button.\n- **show-button-content** - The content of the show button.\n- **show-icon** - The show icon of the password input.\n- **show-icon-base** - The base of the show icon.\n- **hide-button** - The hide button of the password input.\n- **hide-button-base** - The base of the hide button.\n- **hide-button-content** - The content of the hide button.\n- **hide-icon** - The hide icon of the password input.\n- **hide-icon-base** - The base of the hide icon.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/password-input"
        }
      ]
    },
    {
      "name": "dap-ds-popup",
      "description": "A popup is a container for popup content.\n---\n\n\n### **Events:**\n - **dds-opened** - Fired when the popup is opened.\n- **dds-closed** - Fired when the popup is closed.\n- **dds-close** - Fired when the popup should be closed.\n\n### **Slots:**\n - **trigger** - The trigger of the popup.\n- _default_ - The content of the popup.\n\n### **CSS Properties:**\n - **--dds-popup-z-index** - Z-index of the popup (default: var(--dds-z-index-20)) _(default: undefined)_\n- **--dds-popup-padding** - Default padding of the popup (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-popup-padding-xs** - Padding of the popup when size is xs (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-popup-padding-lg** - Padding of the popup when size is lg (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-popup-border-width** - Border width of the popup (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-popup-border-radius** - Border radius of the popup (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-popup-border-color** - Border color of the popup (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-popup-background** - Background color of the popup (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-popup-color** - Text color of the popup (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-popup-arrow-size** - Size of the popup arrow (default: var(--dds-tooltip-arrow-size)) _(default: undefined)_\n\n### **CSS Parts:**\n - **popup** - The main popup container.\n- **arrow** - The arrow of the popup.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/popup"
        }
      ]
    },
    {
      "name": "dap-ds-progress",
      "description": "Progress indicator component with linear and circular variants.\n---\n\n\n### **Slots:**\n - **label** - Custom label content for the progress indicator.\n\n### **CSS Properties:**\n - **--dds-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-progress-fill-color-neutral** - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-progress-fill-color-brand** - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-negative** - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-positive** - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-inverted** - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-progress-height-xs** - Height for extra small linear progress (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-progress-height-sm** - Height for small linear progress (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-progress-height-md** - Height for medium linear progress (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-progress-height-lg** - Height for large linear progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-height-xl** - Height for extra large linear progress (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-progress-height-xxl** - Height for extra extra large linear progress (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-progress-diameter-xs** - Diameter for extra small circular progress (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-progress-diameter-sm** - Diameter for small circular progress (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-progress-diameter-md** - Diameter for medium circular progress (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-progress-diameter-lg** - Diameter for large circular progress (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-progress-diameter-xl** - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-progress-diameter-xxl** - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-progress-stroke-width** - Stroke width for circular progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-animation-duration** - Duration of indeterminate animation (default: 1.5s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill (bar for linear, circle for circular).\n- **label** - The progress label text.\n- **percentage** - The percentage text (circular variant only).\n- **background** - The background circle (circular variant only).",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the progress indicator.",
          "values": [{ "name": "linear" }, { "name": "circular" }]
        },
        {
          "name": "color",
          "description": "The color variant of the progress indicator.",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "negative" },
            { "name": "positive" },
            { "name": "inverted" }
          ]
        },
        {
          "name": "value",
          "description": "Current progress value (0-100 for percentage, or 0-max).",
          "values": []
        },
        {
          "name": "max",
          "description": "Maximum value for the progress indicator.",
          "values": []
        },
        {
          "name": "indeterminate",
          "description": "Whether to show the progress as indeterminate (loading animation).",
          "values": []
        },
        {
          "name": "showPercentage",
          "description": "Whether to show percentage text in the center (circular variant only).",
          "values": []
        },
        {
          "name": "label",
          "description": "Label text for the progress indicator.",
          "values": []
        },
        {
          "name": "aria-live",
          "description": "The aria-live politeness level for screen readers.",
          "values": [
            { "name": "polite" },
            { "name": "assertive" },
            { "name": "off" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/progress"
        }
      ]
    },
    {
      "name": "dap-ds-radio-button",
      "description": "A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio button is checked.\n- **dds-blur** - Emitted when the radio button loses focus.\n- **dds-focus** - Emitted when the radio button gains focus.\n- **dds-input** - Emitted when the radio button receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the radio button input element.\n- **blur(): _void_** - Programmatically blurs the radio button input element.\n\n### **CSS Properties:**\n - **--dds-radio-size** - Sets the size of the radio button. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-radio-border-width** - Sets the border width of the radio button. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-radio-border-radius** - Sets the border radius of the radio button. (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-radio-border-color** - Sets the border color of the radio button. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-radio-background-color** - Sets the background color of the radio button. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-radio-hover-border-color** - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-radio-hover-background-color** - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-radio-active-border-color** - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-radio-active-background-color** - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-radio-checked-background-color** - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-radio-checked-hover-background-color** - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-radio-checked-active-background-color** - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-radio-disabled-background-color** - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled)) _(default: undefined)_\n- **--dds-radio-icon-background-color** - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static)) _(default: undefined)_\n- **--dds-radio-disabled-icon-background-color** - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-radio-invalid-border-color** - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-background-color** - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-hover-border-color** - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-hover-background-color** - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-active-border-color** - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-active-background-color** - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-checked-background-color** - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-hover-background-color** - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-active-background-color** - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted)) _(default: undefined)_\n- **--dds-radio-icon-size** - Sets the size of the radio button icon. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-radio-readonly-border-color** - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-background-color** - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-icon-color** - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main radio button container.\n- **wrapper** - The wrapper of the radio button.\n- **base-label** - The main label container.\n- **label** - The label of the radio button.\n- **input** - The native input of the radio button.\n- **control** - The control of the radio button.\n- **label-container** - The label container of the radio button.\n- **description** - The description of the radio button.",
      "attributes": [
        {
          "name": "focusable",
          "description": "Whether the radio button is focusable.",
          "values": []
        },
        {
          "name": "preventDefault",
          "description": "Whether the radio button should prevent the default action.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Whether the radio button is readonly (cannot be changed but value is submitted with form).",
          "values": []
        },
        {
          "name": "border",
          "description": "This sets up a border around the radio button, when true.",
          "values": []
        },
        {
          "name": "type",
          "description": "The type of the radio button.",
          "values": [{ "name": "normal" }, { "name": "background" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/radio-button"
        }
      ]
    },
    {
      "name": "dap-ds-rating",
      "description": "Rating is a component that allows users to rate a product or service.\n---\n\n\n### **Events:**\n - **dds-change** - Event fired when the rating value changes.\n\n### **Methods:**\n - **_announceRating()** - Announce the current rating to screen readers\n\n### **CSS Parts:**\n - **base** - The main rating container.\n- **star** - The star element.\n- **stars-container** - The container of the stars.\n- **icon** - The icon of the star.",
      "attributes": [
        {
          "name": "label",
          "description": "The label of the rating",
          "values": []
        },
        {
          "name": "max",
          "description": "The maximum number of stars",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/rating"
        }
      ]
    },
    {
      "name": "dap-ds-scroll-area",
      "description": "A component that provides a customizable scrollable area with a custom scrollbar.\n---\n\n\n### **Slots:**\n - _default_ - The content to be scrolled\n\n### **CSS Properties:**\n - **--dds-scroll-area-radius** - The border radius of the scroll area and its elements (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-scroll-area-background** - The background color of the scroll area (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-background** - The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-scroll-area-thumb-background** - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) _(default: undefined)_\n- **--dds-scroll-area-thumb-hover-background** - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) _(default: undefined)_\n- **--dds-scroll-area-thumb-active-background** - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) _(default: undefined)_\n- **--dds-scroll-area-transition** - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-size** - The width/height of the scrollbar (default: 10px) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The viewport element that contains the scrollable content\n- **scrollbar** - The scrollbar container\n- **corner** - The corner between vertical and horizontal scrollbars",
      "attributes": [
        {
          "name": "orientation",
          "description": "The orientation of the scrollbar.",
          "values": [
            { "name": "vertical" },
            { "name": "horizontal" },
            { "name": "both" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/scroll-area"
        }
      ]
    },
    {
      "name": "dap-ds-scroll-progress",
      "description": "A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.\n---\n\n\n### **CSS Properties:**\n - **--dds-scroll-progress-z-index** - Z-index for fixed positioning (default: 1000) _(default: undefined)_\n- **--dds-scroll-progress-transition** - Transition for progress updates (default: width 0.1s ease-out) _(default: undefined)_\n- **--dds-scroll-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-scroll-progress-fill-color-neutral** - Fill color for neutral variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-brand** - Fill color for brand variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-negative** - Fill color for negative variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-positive** - Fill color for positive variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-inverted** - Fill color for inverted variant _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main scroll progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill bar.",
      "attributes": [
        {
          "name": "target",
          "description": "CSS selector for scroll container. If not set, tracks global page scroll.\nWhen set, the component uses sticky positioning within the container.",
          "values": []
        },
        {
          "name": "variant",
          "description": "The color variant of the progress indicator.",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "negative" },
            { "name": "positive" },
            { "name": "inverted" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/scroll-progress"
        }
      ]
    },
    {
      "name": "dap-ds-search",
      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the search value changes.\n- **dds-blur** - Emitted when the search loses focus.\n- **dds-focus** - Emitted when the search gains focus.\n- **dds-clear** - Emitted when the search is cleared.\n- **dds-search** - Emitted when the search input value changes.\n- **dds-input** - Emitted when typing happens in the search input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main search container.\n- **trigger** - The trigger button of the search.\n- **label** - The label of the search.\n- **description** - The description of the search.\n- **feedback** - The feedback of the search.\n- **tooltip** - The tooltip of the search.\n- **option-list** - The option list of the search.\n- **input** - The input of the search.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/search"
        }
      ]
    },
    {
      "name": "dap-ds-select",
      "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.",
      "attributes": [
        {
          "name": "placement",
          "description": "The popup placement of the select",
          "values": [
            { "name": "top" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "right" },
            { "name": "right-start" },
            { "name": "right-end" },
            { "name": "bottom" },
            { "name": "bottom-start" },
            { "name": "bottom-end" },
            { "name": "left" },
            { "name": "left-start" },
            { "name": "left-end" }
          ]
        },
        {
          "name": "opened",
          "description": "Whether the select dropdown is opened.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "The placeholder of the select.",
          "values": []
        },
        {
          "name": "sync",
          "description": "The sync size of the select dropdown",
          "values": []
        },
        {
          "name": "isMobile",
          "description": "Whether the select is in mobile mode.",
          "values": []
        },
        {
          "name": "native",
          "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
          "values": []
        },
        {
          "name": "loading",
          "description": "The loading state of the select.",
          "values": []
        },
        {
          "name": "maxHeight",
          "description": "The max heigth of the select dropdown.",
          "values": []
        },
        {
          "name": "noAnimation",
          "description": "Whether the select dropdown indicator is animated or not",
          "values": []
        },
        {
          "name": "floatingStrategy",
          "description": "The floating strategy of the select dropdown",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "disableViewportAutoClose",
          "description": "Whether to keep popup open when trigger leaves viewport.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/select"
        }
      ]
    },
    {
      "name": "dap-ds-sidenav-group",
      "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
      "attributes": [
        {
          "name": "href",
          "description": "The href of the side navigation item",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether the side navigation item is active",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The spacing of the side navigation item",
          "values": [
            { "name": "top" },
            { "name": "bottom" },
            { "name": "both" },
            { "name": "none" }
          ]
        },
        {
          "name": "open",
          "description": "Whether the side navigation group is open",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the side navigation group",
          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/sidenav-group"
        }
      ]
    },
    {
      "name": "dap-ds-sidenav-item",
      "description": "Side navigation item\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation item.\n- **suffix** - The suffix of the side navigation item.\n\n### **CSS Properties:**\n - **--dds-sidenav-item-min-height-xs** - Minimum height of the sidenav item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-sm** - Minimum height of the sidenav item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-lg** - Minimum height of the sidenav item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-item-margin-bottom** - Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-item-padding-xs** - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-item-padding-sm** - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-padding-lg** - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-item-radius** - Border radius of the sidenav item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-item-color** - Text color of the sidenav item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-xs** - Font size of the sidenav item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-sm** - Font size of the sidenav item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-lg** - Font size of the sidenav item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-item-font-weight** - Font weight of the sidenav item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-item-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation item container.\n- **link** - The link of the side navigation item.",
      "attributes": [
        {
          "name": "href",
          "description": "The href of the side navigation item",
          "values": []
        },
        {
          "name": "active",
          "description": "Whether the side navigation item is active",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The spacing of the side navigation item",
          "values": [
            { "name": "top" },
            { "name": "bottom" },
            { "name": "both" },
            { "name": "none" }
          ]
        },
        {
          "name": "size",
          "description": "The size of the side navigation item",
          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/sidenav-item"
        }
      ]
    },
    {
      "name": "dap-ds-sidenav",
      "description": "Side navigation is a list of links that are used to navigate to different sections of a page.\n---\n\n\n### **Events:**\n - **dds-item-click** - Event fired when the side navigation item is clicked.\n\n### **Slots:**\n - _default_ - The content of the side navigation.\n\n### **CSS Parts:**\n - **base** - The main side navigation container.\n- **menu** - The menu of the side navigation.",
      "attributes": [
        {
          "name": "label",
          "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
          "values": []
        },
        {
          "name": "activeHref",
          "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the side navigation",
          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/sidenav"
        }
      ]
    },
    {
      "name": "dap-ds-skeleton",
      "description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-color** - The base color of the skeleton (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent)) _(default: undefined)_\n- **--dds-skeleton-animation-duration** - Duration of the loading animation (default: 1.5s) _(default: undefined)_\n- **--dds-skeleton-border-radius** - Border radius for rectangular skeletons (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skeleton-text-spacing** - Spacing between text lines in text variant (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-skeleton-animation-timing-function** - Timing function for the loading animation (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skeleton container.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the skeleton.",
          "values": [
            { "name": "text" },
            { "name": "circular" },
            { "name": "rectangular" }
          ]
        },
        {
          "name": "width",
          "description": "The width of the skeleton. Can be any valid CSS width value.",
          "values": []
        },
        {
          "name": "height",
          "description": "The height of the skeleton. Can be any valid CSS height value.",
          "values": []
        },
        {
          "name": "noAnimation",
          "description": "Whether to animate the skeleton.",
          "values": []
        },
        {
          "name": "animation",
          "description": "The animation type for the skeleton.",
          "values": [
            { "name": "wave" },
            { "name": "pulse" },
            { "name": "custom" }
          ]
        },
        {
          "name": "custom-keyframes",
          "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/skeleton"
        }
      ]
    },
    {
      "name": "dap-ds-skip-link",
      "description": "A skip link is a link that allows keyboard users to skip to the main content of a page.\n---\n\n\n### **Slots:**\n - _default_ - The content of the skip link.\n\n### **CSS Properties:**\n - **--dds-skip-link-border-color** - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-skip-link-border-width** - Border width for the high contrast outline (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-skip-link-border-width-active** - Border width for the active state (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-skip-link-border-radius** - Border radius of the skip link (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skip-link-padding-sm** - Padding for small size variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-skip-link-padding-lg** - Padding for large size variant (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-skip-link-text-underline-offset** - Underline offset for the text (default: 3px) _(default: undefined)_\n- **--dds-skip-link-z-index** - Z-index of the skip link (default: var(--dds-z-index-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skip link container.\n- **text** - The text container of the skip link.\n- **high-contrast** - The high contrast outline container.",
      "attributes": [
        {
          "name": "placement",
          "description": "The placement of the skip link.",
          "values": [{ "name": "left" }, { "name": "center" }]
        },
        {
          "name": "href",
          "description": "The href of the skip link",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the skip link",
          "values": [{ "name": "sm" }, { "name": "lg" }]
        },
        {
          "name": "noUnderline",
          "description": "Whether the skip link should have an underline",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/skip-link"
        }
      ]
    },
    {
      "name": "dap-ds-snackbar-message",
      "description": "The Snackbar component shows a sliding message to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Fires when the snackbar closes.\n\n### **Slots:**\n - **default** - The content of the snackbar.\n\n### **CSS Properties:**\n - **--dds-snackbar-width** - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall))) _(default: undefined)_\n- **--dds-snackbar-gap** - Gap between snackbar elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-padding** - Padding inside the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-margin-bottom** - Bottom margin of the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-transition** - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete) _(default: undefined)_\n- **--dds-snackbar-border-radius** - Border radius of the snackbar (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-snackbar-font-size** - Font size used in the snackbar (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-snackbar-background** - Background color of the snackbar (default: var(--dds-snackbar-error-background)) _(default: undefined)_\n- **--dds-snackbar-border** - Border color of the snackbar (default: var(--dds-snackbar-error-border)) _(default: undefined)_\n- **--dds-snackbar-text** - Text color of the snackbar (default: var(--dds-snackbar-variant-text)) _(default: undefined)_\n- **--dds-snackbar-icon** - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon)) _(default: undefined)_\n- **--dds-snackbar-link** - Link color of the snackbar (default: var(--dds-snackbar-variant-link)) _(default: undefined)_\n- **--dds-snackbar-information-background** - Background color for information variant (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-snackbar-information-border** - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-information-icon** - Icon color for information variant (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-background** - Background color for success variant (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-snackbar-success-border** - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-icon** - Icon color for success variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-background** - Background color for error variant (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-snackbar-error-border** - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-icon** - Icon color for error variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-variant-text** - Text color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-icon** - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-link** - Link color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-animation-duration** - Duration of entrance animations (default: 0.3s) _(default: undefined)_\n- **--dds-snackbar-animation-timing** - Timing function for animations (default: ease-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main snackbar container.\n- **text** - The text part of the snackbar.\n- **closebutton** - The close button part of the component.\n- **icon** - The icon part of the close button.",
      "attributes": [
        {
          "name": "actions",
          "description": "The actions of the snackbar item.",
          "values": [{ "name": "ActionType[]" }]
        },
        {
          "name": "message",
          "description": "The message of the snackbar item.",
          "values": []
        },
        {
          "name": "closeButton",
          "description": "Whether the snackbar has a close button.",
          "values": []
        },
        {
          "name": "alertType",
          "description": "The message type of the snackbar item.",
          "values": [{ "name": "AlertType" }]
        },
        {
          "name": "customStyle",
          "description": "The custom style of the snackbar item.",
          "values": [{ "name": "Record<string, string>" }]
        },
        {
          "name": "position",
          "description": "The position of the snackbar container for directional animations.",
          "values": [{ "name": "SnackbarPosition" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/snackbar-message"
        }
      ]
    },
    {
      "name": "dap-ds-snackbar",
      "description": "The Snackbar is a container of sliding messages.\n---\n\n\n### **Methods:**\n - **show(message: _string_, options: _MessageOptionsType_): _void_** - Static method to show a snackbar message anywhere in the application\n- **success(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a success message\n- **error(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an error message\n- **info(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show an information message\n- **default(message: _string_, options: _Omit<MessageOptionsType, 'alertType'>_): _void_** - Static method to show a default message\n- **closeAll(): _void_** - Static method to close all snackbar messages globally\n- **closeAll(): _void_** - Close all currently displayed messages\n\n### **CSS Properties:**\n - **--dds-snackbar-spacing** - Spacing used for positioning the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-z-index** - Z-index of the snackbar container (default: 10000) _(default: undefined)_\n- **--dds-snackbar-pointer-events** - Pointer events behavior for the snackbar (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **host** - The host element\n- **message** - The message part of the snackbar\n- **message-base** - The base part of the message\n- **message-text** - The text part of the message\n- **message-closebutton** - The close button part of the message\n- **message-close-icon** - The close icon part of the message\n- **message-actions** - The actions part of the message",
      "attributes": [
        {
          "name": "maxItems",
          "description": "The maximum number of snackbar messages at a given time.",
          "values": []
        },
        {
          "name": "position",
          "description": "The position of the snackbar",
          "values": [
            { "name": "bottom-left" },
            { "name": "bottom-right" },
            { "name": "bottom-center" },
            { "name": "top-right" },
            { "name": "top-center" }
          ]
        },
        {
          "name": "duration",
          "description": "The duration of the snackbar message in milliseconds",
          "values": []
        },
        {
          "name": "announceMessages",
          "description": "Whether the snackbar should announce new messages to screen readers",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/snackbar"
        }
      ]
    },
    {
      "name": "dap-ds-spinner",
      "description": "Loading spinner component.\n---\n\n\n### **Slots:**\n - _default_ - The loading text content.\n- **icon** - The loading icon content.\n\n### **CSS Properties:**\n - **--dds-spinner-icon-color-neutral** - Color for neutral spinner icons (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-spinner-icon-color-brand** - Color for brand spinner icons (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-negative** - Color for negative spinner icons (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-positive** - Color for positive spinner icons (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-inverted** - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-spinner-text-spacing** - Spacing between spinner and text (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-spinner-animation-duration** - Duration of the spinner animation (default: 1s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main spinner container.\n- **icon** - The loading icon element.\n- **icon-base** - The base of the loading icon.\n- **icon-content** - The content of the loading icon.\n- **text** - The loading text element.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the spinner.",
          "values": [
            { "name": "neutral" },
            { "name": "brand" },
            { "name": "negative" },
            { "name": "positive" },
            { "name": "inverted" }
          ]
        },
        {
          "name": "staticSize",
          "description": "The size of the spinner in pixels. This overrides the size attribute",
          "values": []
        },
        { "name": "text", "description": "The loading text.", "values": [] },
        {
          "name": "noColor",
          "description": "Removes the text color",
          "values": []
        },
        {
          "name": "orientation",
          "description": "The orientation of the spinner (icon and text layout).",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "aria-live",
          "description": "The aria-live politeness level for screen readers.",
          "values": [
            { "name": "polite" },
            { "name": "assertive" },
            { "name": "off" }
          ]
        },
        {
          "name": "delay",
          "description": "Delay in milliseconds before showing the spinner.\nPrevents flash for quick operations.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/spinner"
        }
      ]
    },
    {
      "name": "dap-ds-stack",
      "description": "A stack is a container for stacked content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the stack.\n\n### **CSS Parts:**\n - **stack** - The main stack container.",
      "attributes": [
        {
          "name": "direction",
          "description": "The direction of the stack.",
          "values": [
            { "name": "column" },
            { "name": "column-reverse" },
            { "name": "row" },
            { "name": "row-reverse" }
          ]
        },
        {
          "name": "endMargin",
          "description": "Adds margin to the end of the stack.",
          "values": []
        },
        {
          "name": "startMargin",
          "description": "Adds margin to the start of the stack.",
          "values": []
        },
        {
          "name": "spacing",
          "description": "The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc)",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/stack"
        }
      ]
    },
    {
      "name": "dap-ds-tab-group",
      "description": "A tab group component. It is used with dap-ds-tab component to create a tab group.\n---\n\n\n### **Events:**\n - **dds-tab-select** - Fired when select a new tab.\n\n### **Slots:**\n - _default_ - The tab items.\n\n### **CSS Properties:**\n - **--dds-tab-group-border-radius** - Border radius of the tab group container (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-tab-border-radius** - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0) _(default: undefined)_\n- **--dds-tab-group-border-width** - Border width of the tab navigation (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-tab-group-border-color** - Border color of the tab navigation (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tab-height-sm** - Height of small tabs (default: 40px) _(default: undefined)_\n- **--dds-tab-height-lg** - Height of large tabs (default: 50px) _(default: undefined)_\n- **--dds-tab-font-size-sm** - Font size of small tabs (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-tab-font-size-lg** - Font size of large tabs (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-tab-padding** - Padding of the tab buttons (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tab-border-width** - Border width for tabs (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-tab-selected-border-color** - Border color for selected tabs (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-tab-text-color** - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-tab-hover-text-color** - Text color for tabs on hover (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-tab-disabled-text-color** - Text color for disabled tabs (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-tab-hover-background** - Background color for tabs on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-tab-active-background** - Background color for active tabs (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container.\n- **tab-nav** - The tab navigation container.\n- **tab-content** - The tab content container.",
      "attributes": [
        {
          "name": "selectedTabId",
          "description": "The selected tab id.",
          "values": []
        },
        {
          "name": "size",
          "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
          "values": [{ "name": "sm" }, { "name": "lg" }]
        },
        {
          "name": "mobile",
          "description": "If true, the tab group will be displayed in mobile mode.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/tab-group"
        }
      ]
    },
    {
      "name": "dap-ds-tab",
      "description": "A tab item component. It is used in dap-ds-tab-group component slot to create a tab item.\n---\n\n\n### **Slots:**\n - _default_ - The tab title template.\n- **content** - The tab content.\n\n### **CSS Parts:**\n - **base** - The main tab content container.",
      "attributes": [
        {
          "name": "tabId",
          "description": "The tab id. Required",
          "values": []
        },
        {
          "name": "disabled",
          "description": "The disabled state of the tab.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/tab"
        }
      ]
    },
    {
      "name": "dap-ds-switch",
      "description": "A switch is a graphical control element that allows the user to toggle between two states.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-blur** - Emitted when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-input** - Emitted when the input receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the switch input element.\n- **blur(): _void_** - Programmatically blurs the switch input element.\n\n### **CSS Parts:**\n - **base** - The main switch container.\n- **baselabel** - The main label container\n- **label** - The label of the switch.\n- **input** - The native input of the switch.\n- **control** - The control of the switch.\n- **description** - The description of the switch.",
      "attributes": [
        {
          "name": "border",
          "description": "This sets up border around the switch, when true.",
          "values": []
        },
        {
          "name": "type",
          "description": "The type of the switch",
          "values": [{ "name": "normal" }, { "name": "background" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/switch"
        }
      ]
    },
    {
      "name": "dap-ds-textarea",
      "description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.",
      "attributes": [
        {
          "name": "hideCounter",
          "description": "Hide character counter.",
          "values": []
        },
        {
          "name": "minlength",
          "description": "The minimum length of the textarea.",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "The maximum length of the textarea.",
          "values": []
        },
        {
          "name": "rows",
          "description": "The number of rows in the textarea.",
          "values": []
        },
        {
          "name": "cols",
          "description": "The number of columns in the textarea.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "The placeholder of the textarea.",
          "values": []
        },
        {
          "name": "wrap",
          "description": "Indicates how the control should wrap the value for form submission.",
          "values": [{ "name": "hard" }, { "name": "soft" }]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/textarea"
        }
      ]
    },
    {
      "name": "dap-ds-timeline-item",
      "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/timeline-item"
        }
      ]
    },
    {
      "name": "dap-ds-timeline",
      "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/timeline"
        }
      ]
    },
    {
      "name": "dap-ds-table-cell",
      "description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main cell container.",
      "attributes": [
        {
          "name": "last",
          "description": "If the cell is the last one.",
          "values": []
        },
        {
          "name": "role",
          "description": "The html role of the cell",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/table-cell"
        }
      ]
    },
    {
      "name": "dap-ds-table-header",
      "description": "Table header cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-header-padding-block** - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-padding-inline-start** - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-header-padding-inline-end** - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-border-width** - Width of the header cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-header-border-color** - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-header-text-color** - Text color of the header cell. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-table-header-font-weight** - Font weight of the header cell text. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-table-header-line-height** - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main header cell container.",
      "attributes": [
        {
          "name": "last",
          "description": "If the header cell is the last one.",
          "values": []
        },
        {
          "name": "role",
          "description": "The html role of the header cell",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/table-header"
        }
      ]
    },
    {
      "name": "dap-ds-table-row",
      "description": "Table row component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n\n### **CSS Properties:**\n - **--dds-table-row-padding-right** - Padding right for the last table header, (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-row-padding-top** - Padding top for table headers in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-padding-bottom** - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-border-color** - Border color for table cells and headers, (default: transparent) _(default: undefined)_",
      "attributes": [
        {
          "name": "role",
          "description": "The html role of the row",
          "values": []
        },
        {
          "name": "mobile",
          "description": "If the row is mobile design",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/table-row"
        }
      ]
    },
    {
      "name": "dap-ds-table",
      "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
      "attributes": [
        { "name": "role", "values": [] },
        {
          "name": "mobile",
          "description": "If the table has mobile design",
          "values": []
        },
        {
          "name": "caption",
          "description": "The caption of the table",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/table"
        }
      ]
    },
    {
      "name": "dap-ds-time-grid",
      "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
      "attributes": [
        {
          "name": "selectedHour",
          "description": "The currently selected hour (0-23).",
          "values": []
        },
        {
          "name": "selectedMinute",
          "description": "The currently selected minute (0-59).",
          "values": []
        },
        { "name": "selectedSecond", "values": [] },
        {
          "name": "minTime",
          "description": "The minimum selectable time (format: 'HH:mm').",
          "values": []
        },
        {
          "name": "maxTime",
          "description": "The maximum selectable time (format: 'HH:mm').",
          "values": []
        },
        {
          "name": "step",
          "description": "The step interval in minutes.",
          "values": []
        },
        {
          "name": "locale",
          "description": "The locale for time formatting.",
          "values": []
        },
        { "name": "showSeconds", "values": [] },
        { "name": "secondsStep", "values": [] },
        { "name": "hideDisabledTimes", "values": [] },
        { "name": "presets", "values": [{ "name": "TimePreset[]" }] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/time-grid"
        }
      ]
    },
    {
      "name": "dap-ds-timepicker",
      "description": "A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the timepicker value changes.\n- **dds-input** - Fired when the timepicker input value changes.\n- **dds-valid-time** - Fired when the timepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-time** - Fired when the timepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the timepicker is cleared.\n- **dds-focus** - Emitted when the timepicker gains focus.\n- **dds-blur** - Emitted when the timepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-timepicker-background** - The background color of the timepicker. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-timepicker-border-color** - The border color of the timepicker. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-border-width** - The border width of the timepicker. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-timepicker-border-radius** - The border radius of the timepicker. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-timepicker-text-color** - The text color of the timepicker. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-timepicker-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-timepicker-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-timepicker-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-timepicker-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-timepicker-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-timepicker-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-timepicker-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-timepicker-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-timepicker-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timepicker-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timepicker-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-timepicker-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-timepicker-min-width** - The minimum width of the timepicker. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timepicker container.\n- **trigger** - The trigger button of the timepicker.\n- **label** - The label of the timepicker.\n- **description** - The description of the timepicker.\n- **feedback** - The feedback of the timepicker.\n- **tooltip** - The tooltip of the timepicker.\n- **input** - The input of the timepicker.\n- **clear-button** - The clear button of the timepicker.",
      "attributes": [
        {
          "name": "value",
          "description": "The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.",
          "values": [{ "name": "Dayjs" }]
        },
        {
          "name": "minTime",
          "description": "The minimum time of the timepicker. Format: 'HH:mm'.",
          "values": []
        },
        {
          "name": "maxTime",
          "description": "The maximum time of the timepicker. Format: 'HH:mm'.",
          "values": []
        },
        {
          "name": "step",
          "description": "The step interval in minutes. Defaults to 15.",
          "values": []
        },
        {
          "name": "placement",
          "description": "The placement of the dropdown of the timepicker.",
          "values": []
        },
        {
          "name": "opened",
          "description": "The open state of the timepicker.",
          "values": []
        },
        {
          "name": "openTimeOnInput",
          "description": "Whether the time picker should open on typing.",
          "values": []
        },
        {
          "name": "sendEmptyEventOnInput",
          "description": "Whether the time picker should send an empty event on typing.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "The placeholder of the timepicker.",
          "values": []
        },
        {
          "name": "loading",
          "description": "The loading state of the timepicker.",
          "values": []
        },
        {
          "name": "format",
          "description": "The format of the timepicker. Defaults to 'HH:mm'.",
          "values": []
        },
        {
          "name": "clearButton",
          "description": "Whether the clear button should be shown. Defaults to 'true'.",
          "values": []
        },
        {
          "name": "clearButtonAriaLabel",
          "description": "The aria label of the clear button.",
          "values": []
        },
        {
          "name": "floatingStrategy",
          "description": "The floating strategy of the timepicker.",
          "values": [{ "name": "FloatingStrategy" }]
        },
        {
          "name": "disableViewportAutoClose",
          "description": "Whether to keep popup open when trigger leaves viewport.",
          "values": []
        },
        {
          "name": "locale",
          "description": "The locale of the timepicker.",
          "values": []
        },
        {
          "name": "closeOnSelection",
          "description": "Whether the dropdown should close when a time is selected.",
          "values": []
        },
        {
          "name": "showSeconds",
          "description": "Whether to show the seconds column in the time picker.",
          "values": []
        },
        {
          "name": "secondsStep",
          "description": "The step interval in seconds. Defaults to 1.",
          "values": []
        },
        {
          "name": "hideDisabledTimes",
          "description": "Whether to hide disabled times or show them as disabled.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/timepicker"
        }
      ]
    },
    {
      "name": "dap-ds-toc",
      "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
      "attributes": [
        {
          "name": "root",
          "description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
          "values": []
        },
        {
          "name": "rootMargin",
          "description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
          "values": []
        },
        {
          "name": "lastAnchorRootMargin",
          "description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
          "values": []
        },
        {
          "name": "threshold",
          "description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
          "values": [{ "name": "number[]" }]
        },
        {
          "name": "minHeadingLevel",
          "description": "The minimum heading level to include in the TOC. The default value is `2`.",
          "values": []
        },
        {
          "name": "maxHeadingLevel",
          "description": "The maximum heading level to include in the TOC. The default value is `3`.",
          "values": []
        },
        {
          "name": "noIndent",
          "description": "Whether to indent the TOC items.",
          "values": []
        },
        {
          "name": "header",
          "description": "The header of the TOC.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/toc"
        }
      ]
    },
    {
      "name": "dap-ds-toggle-button",
      "description": "A toggle button is a button that can be toggled on (active) or off (inactive).\n---\n\n\n### **Slots:**\n - _default_ - The content of the toggle button.\n\n### **CSS Properties:**\n - **--dds-toggle-button-min-width-lg** - Minimum width of the large toggle button (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-toggle-button-min-width-md** - Minimum width of the medium toggle button (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toggle-button-min-width-sm** - Minimum width of the small toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-min-width-xs** - Minimum width of the extra small toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-height-lg** - Height of the large toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-height-md** - Height of the medium toggle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-toggle-button-height-sm** - Height of the small toggle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toggle-button-height-xs** - Height of the extra small toggle button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-toggle-button-padding-lg** - Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toggle-button-padding-md** - Padding of the medium toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-toggle-button-padding-sm** - Padding of the small toggle button (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toggle-button-padding-xs** - Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toggle-button-font-size-lg** - Font size of the large toggle button (default: 1.125rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-md** - Font size of the medium toggle button (default: 1rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-sm** - Font size of the small toggle button (default: 0.875rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-xs** - Font size of the extra small toggle button (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-toggle-button-border-enabled** - Border color in enabled state (default: var(--dds-button-toggle-border-enabled)) _(default: undefined)_\n- **--dds-toggle-button-background-enabled** - Background color in enabled state (default: var(--dds-button-toggle-background-enabled)) _(default: undefined)_\n- **--dds-toggle-button-content-enabled** - Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled)) _(default: undefined)_\n- **--dds-toggle-button-border-hover** - Border color in hover state (default: var(--dds-button-toggle-border-hover)) _(default: undefined)_\n- **--dds-toggle-button-background-hover** - Background color in hover state (default: var(--dds-button-toggle-background-hover)) _(default: undefined)_\n- **--dds-toggle-button-border-pressed** - Border color in pressed state (default: var(--dds-button-toggle-border-pressed)) _(default: undefined)_\n- **--dds-toggle-button-background-pressed** - Background color in pressed state (default: var(--dds-button-toggle-background-pressed)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-enabled** - Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled)) _(default: undefined)_\n- **--dds-toggle-button-content-selected-enabled** - Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-hover** - Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-pressed** - Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed)) _(default: undefined)_\n- **--dds-toggle-button-border-disabled** - Border color in disabled state (default: var(--dds-button-toggle-border-disabled)) _(default: undefined)_\n- **--dds-toggle-button-background-disabled** - Background color in disabled state (default: var(--dds-button-toggle-background-disabled)) _(default: undefined)_\n- **--dds-toggle-button-content-disabled** - Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled)) _(default: undefined)_\n- **--dds-toggle-button-highcontrast-border** - High contrast border color (default: var(--dds-button-toggle-highcontrast-border)) _(default: undefined)_\n- **--dds-toggle-button-highcontrast-border-hover** - High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.",
      "attributes": [
        {
          "name": "active",
          "description": "Whether the button is active.",
          "values": []
        },
        {
          "name": "shape",
          "description": "The shape of the button",
          "values": [{ "name": "button" }, { "name": "circle" }]
        },
        { "name": "sizeChildren", "values": [] }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/toggle-button"
        }
      ]
    },
    {
      "name": "dap-ds-tooltip",
      "description": "A tooltip is a container for tooltip content.\n---\n\n\n### **Slots:**\n - _default_ - The content of the tooltip.\n- **trigger** - The trigger element of the tooltip.\n\n### **CSS Properties:**\n - **--dds-tooltip-max-width** - The maximum width of the tooltip before its content will wrap (default: 14rem) _(default: undefined)_\n- **--dds-tooltip-padding** - The padding inside the tooltip (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tooltip-border-color** - The border color of the tooltip (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tooltip-bg-color** - The background color of the tooltip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-text-color** - The text color of the tooltip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-tooltip-font-size** - The font size of the tooltip text (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-tooltip-box-shadow** - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tooltip container.\n- **trigger** - The trigger element of the tooltip.\n- **popup** - The popup of the tooltip.\n- **arrow** - The arrow of the tooltip.",
      "attributes": [
        {
          "name": "content",
          "description": "The content of the tooltip, supporting text only.",
          "values": []
        },
        {
          "name": "placement",
          "description": "The position of the tooltip around the trigger element.",
          "values": [
            { "name": "top" },
            { "name": "right" },
            { "name": "bottom" },
            { "name": "left" }
          ]
        },
        {
          "name": "opened",
          "description": "Sets the tooltip to opened by default (will still be closed on closing events).",
          "values": []
        },
        {
          "name": "mode",
          "description": "Sets the tooltip to toggle mode.",
          "values": [{ "name": "tooltip" }, { "name": "toggle" }]
        },
        {
          "name": "noArrow",
          "description": "Hides the arrow of the tooltip.",
          "values": []
        },
        {
          "name": "floatingStrategy",
          "description": "The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "disableViewportAutoClose",
          "description": "Whether to keep popup open when trigger leaves viewport.",
          "values": []
        },
        {
          "name": "trigger",
          "description": "Sets custom trigger event (hover, focus, click). Default is `hover focus`.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/tooltip"
        }
      ]
    },
    {
      "name": "dap-ds-tray",
      "description": "A tray is a container for slide in content.\n---\n\n\n### **Events:**\n - **dds-before-open** - Fires before the tray opens.\n- **dds-opened** - Fires after the tray opens.\n- **dds-before-close** - Fires before the tray closes.\n- **dds-closed** - Fires after the tray closed.\n- **dds-close** - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n\n### **Slots:**\n - _default_ - The content of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n\n### **CSS Properties:**\n - **--dds-modal-max-block-size** - Maximum height of the modal. (default: 80vh) _(default: undefined)_\n- **--dds-modal-max-inline-size** - Maximum width of the modal. (default: 600px) _(default: undefined)_\n- **--dds-modal-padding-sm** - Padding inside the modal. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-padding-lg** - Padding inside the modal. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-modal-transform-amount** - Amount to transform for entrance animation. (default: 2rem) _(default: undefined)_\n- **--dds-modal-transition-speed** - Speed of transition animations. (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-modal-transition-timing** - Timing function for transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-modal-border-width** - Border width of the modal. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-modal-border-color** - Border color of the modal. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-modal-border-radius** - Border radius of the modal. (default: var(--dds-radius-large, 16px)) _(default: undefined)_\n- **--dds-modal-background** - Background color of the modal. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-modal-header-margin-sm** - Margin below the header. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-header-margin-lg** - Margin below the header. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-margin-sm** - Margin above the footer. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-footer-margin-lg** - Margin above the footer. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-modal-footer-gap** - Gap between footer elements. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-modal-close-margin** - Margin for the close button. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-tray-width-side** - Width of the side (left/right) trays. (default: 250px) _(default: undefined)_\n- **--dds-tray-min-width-horizontal** - Minimum width of the horizontal (top/bottom) trays. (default: 400px) _(default: undefined)_\n- **--dds-tray-min-height-horizontal** - Minimum height of the horizontal (top/bottom) trays. (default: 300px) _(default: undefined)_\n- **--dds-tray-min-height-vertical** - Minimum height of the vertical (left/right) trays. (default: 100%) _(default: undefined)_\n- **--dds-tray-transform-duration** - Duration of the transform animation. (default: 0.3s) _(default: undefined)_\n- **--dds-tray-transform-timing** - Timing function for the transform animation. (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main tray container.\n- **panel** - The panel of the tray.\n- **header** - The header of the tray.\n- **footer** - The footer of the tray.\n- **content** - The content of the tray.\n- **body** - The body of the tray.",
      "attributes": [
        {
          "name": "placement",
          "description": "The placement of the tray.",
          "values": [
            { "name": "left" },
            { "name": "right" },
            { "name": "top" },
            { "name": "bottom" }
          ]
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/tray"
        }
      ]
    },
    {
      "name": "dap-ds-typography",
      "description": "Typography is used to display text in different styles.\n---\n\n\n### **Slots:**\n - **default** - The content of the typography.\n\n### **CSS Properties:**\n - **--dds-text-color** - The color of the typography. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-text-color-inverted** - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-heading-color** - The color of the heading typography. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-text-heading-color-inverted** - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-description-color** - The color of the subtle typography. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-text-description-color-inverted** - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-text-font-family** - The font family of the typography. (default: var(--font-family)) _(default: undefined)_\n- **--dds-text-font-weight-medium** - The font weight of the medium typography. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-text-font-weight-bold** - The font weight of the bold typography. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-text-font-size-h1** - The font size of the h1 typography. (default: var(--dds-font-7xl)) _(default: undefined)_\n- **--dds-text-font-size-h2** - The font size of the h2 typography. (default: var(--dds-font-4xl)) _(default: undefined)_\n- **--dds-text-font-size-h3** - The font size of the h3 typography. (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-text-font-size-h4** - The font size of the h4 typography. (default: var(--dds-font-xl)) _(default: undefined)_\n- **--dds-text-font-size-h5** - The font size of the h5 typography. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-text-font-size-h6** - The font size of the h6 typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-body** - The font size of the body typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-caption** - The font size of the caption typography. (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-text-font-size-description** - The font size of the description typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-description-lg** - The font size of the description lg typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-description-sm** - The font size of the description sm typography. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-text-font-size-lg** - The font size of the lg typography. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-text-font-size-md** - The font size of the md typography. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-text-font-size-sm** - The font size of the sm typography. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-text-font-size-xs** - The font size of the xs typography. (default: var(--dds-font-xs)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main typography container.",
      "attributes": [
        {
          "name": "variant",
          "description": "The variant of the typography.",
          "values": [
            { "name": "h1" },
            { "name": "h2" },
            { "name": "h3" },
            { "name": "h4" },
            { "name": "h5" },
            { "name": "h6" },
            { "name": "body" },
            { "name": "caption" },
            { "name": "description" }
          ]
        },
        {
          "name": "size",
          "description": "The size of the typography.",
          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
        },
        {
          "name": "bodyAs",
          "description": "The html element of the body typography.",
          "values": []
        },
        {
          "name": "customClass",
          "description": "The custom class of the typography.",
          "values": []
        },
        {
          "name": "anchor",
          "description": "Whether the typography is an anchor for the TOC component.",
          "values": []
        },
        {
          "name": "inverted",
          "description": "Whether the typography is inverted.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/typography"
        }
      ]
    },
    {
      "name": "dap-ds-form-label",
      "description": "A form label is a container for labels in a form.\n---\n\n\n### **CSS Properties:**\n - **--dds-form-label-font-weight** - Font weight of the label. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-form-label-line-height** - Line height of the label. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-form-label-color** - Text color of the label. (default: var(--dds-text-neutral-enabled)) _(default: undefined)_\n- **--dds-form-label-disabled-color** - Text color when the label is disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-form-label-required-color** - Color of the required indicator. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-form-label-optional-color** - Color of the optional indicator. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-form-label-margin-bottom** - Bottom margin of the label. (default: var(--dds-spacing-200)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main form label container.\n- **required** - The required indicator of the form label.\n- **optional** - The optional indicator of the form label.",
      "attributes": [
        {
          "name": "for",
          "description": "The id of the form element that the label is associated with.",
          "values": []
        },
        {
          "name": "renderAs",
          "description": "Whether the label should be rendered as text or a <label> tag. Default is label.",
          "values": []
        },
        {
          "name": "noMargin",
          "description": "Whether the label should have no margin.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/form-label"
        }
      ]
    },
    {
      "name": "dap-ds-input-group",
      "description": "An input group is a container for inputs.\n---\n\n\n### **Slots:**\n - _default_ - The content of the input group items.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main input group container.\n- **label** - The label of the input group.\n- **description** - The description of the input group.\n- **tooltip** - The tooltip of the input group.\n- **container** - The container of the input group items.",
      "attributes": [],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/input-group"
        }
      ]
    },
    {
      "name": "dap-ds-radio-group",
      "description": "A radio group is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio group is checked.\n- **dds-blur** - Emitted when the radio group loses focus.\n- **dds-focus** - Emitted when the radio group gains focus.\n\n### **Slots:**\n - _default_ - The content of the radio group.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main radio group container.\n- **label** - The label of the radio group.\n- **tooltip** - The tooltip of the radio group.\n- **container** - The container of the radio group items.",
      "attributes": [
        {
          "name": "tooltipPlacement",
          "description": "The tooltip placement of the radio group.",
          "values": [
            { "name": "top" },
            { "name": "right" },
            { "name": "bottom" },
            { "name": "left" }
          ]
        },
        {
          "name": "optionalLabel",
          "description": "Text of optional label.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/radio-group"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-down-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-down-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-down-s-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-down-s-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-down-s-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-down-s-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-down-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-down-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-l-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-l-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-s-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-s-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-s-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-left-up-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-left-up-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-down-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-down-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-l-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-l-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-s-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-s-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-s-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-s-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-right-up-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-right-up-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-up-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-up-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-up-s-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-up-s-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-arrow-up-s-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-arrow-up-s-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-expand-up-down-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-expand-up-down-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-home-6-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-home-6-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-calendar-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-calendar-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-edit-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-edit-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-tools-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-tools-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-computer-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-computer-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-clipboard-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-clipboard-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-file-copy-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-file-copy-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-file-image-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-file-image-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-file-music-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-file-music-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-file-text-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-file-text-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-file-video-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-file-video-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-folder-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-folder-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-folder-open-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-folder-open-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-separator",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-separator"
        }
      ]
    },
    {
      "name": "dap-ds-icon-heart-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-heart-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-heart-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-heart-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-account-circle-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-account-circle-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-cookie-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-cookie-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-account-circle-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-account-circle-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-user-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-user-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-user-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-user-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-add-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-add-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-alert-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-alert-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-alert-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-alert-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-check-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-check-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-check-line2",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-check-line2"
        }
      ]
    },
    {
      "name": "dap-ds-icon-checkbox-blank-circle-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-checkbox-blank-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.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-checkbox-blank-circle-fill-check"
        }
      ]
    },
    {
      "name": "dap-ds-icon-checkbox-blank-circle-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-checkbox-blank-circle-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-checkbox-circle-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-checkbox-circle-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-checkbox-circle-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-checkbox-circle-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-close-circle-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-close-circle-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-close-circle-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-close-circle-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-close-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-close-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-close-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-close-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-delete-bin-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-delete-bin-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-delete-bin-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-delete-bin-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-download-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-download-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-error-warning-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-error-warning-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-error-warning-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-error-warning-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-external-link-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-external-link-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-eye-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-eye-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-eye-off-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-eye-off-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-forbid-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-forbid-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-information-2-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-information-2-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-information-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-information-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-information-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-information-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-lightbulb-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-lightbulb-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-loading-spinner",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-loading-spinner"
        }
      ]
    },
    {
      "name": "dap-ds-icon-lock-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-lock-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-lock-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-lock-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-menu-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-menu-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-menu-line-s",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-menu-line-s"
        }
      ]
    },
    {
      "name": "dap-ds-icon-more-2-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-more-2-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-search-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-search-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-more-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-more-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-share-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-share-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-shield-check-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-shield-check-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-shield-check-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-shield-check-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-star-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-star-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-subtract-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-subtract-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-subtract-line2",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-subtract-line2"
        }
      ]
    },
    {
      "name": "dap-ds-icon-time-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-time-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-time-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-time-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-upload-2-fill",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-upload-2-fill"
        }
      ]
    },
    {
      "name": "dap-ds-icon-upload-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-upload-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-upload-2-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-upload-2-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-zoom-in-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-zoom-in-line"
        }
      ]
    },
    {
      "name": "dap-ds-icon-zoom-out-line",
      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
      "attributes": [
        {
          "name": "size",
          "description": "(optional) The width and height in pixels",
          "values": []
        },
        {
          "name": "selected",
          "description": "(optional) Sets the icon color via the `fill` attribute",
          "values": []
        },
        {
          "name": "accessibilityTitle",
          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
          "values": []
        },
        {
          "name": "focusable",
          "description": "(optional) If `true` the icon can receive focus",
          "values": []
        }
      ],
      "references": [
        {
          "name": "Documentation",
          "url": "https://shoelace.style/components/icon-zoom-out-line"
        }
      ]
    }
  ]
}