dap-design-system/dist/manifest/web-types.json

Official design system for the DÁP (dap.gov.hu)

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "name": "dap-design-system",
  "version": "0.9.153",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "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.",
          "doc-url": "",
          "attributes": [],
          "slots": [
            {
              "name": "default",
              "description": "The content of the accordion."
            },
            {
              "name": "heading",
              "description": "The heading of the accordion."
            },
            {
              "name": "icon-opened",
              "description": "The icon when the accordion is opened."
            },
            {
              "name": "icon-closed",
              "description": "The icon when the accordion is closed."
            }
          ],
          "events": [
            {
              "name": "dds-opened",
              "type": "{ open: boolean, item: AccordionBaseElement }",
              "description": "Event fired when the accordion is opened."
            },
            {
              "name": "dds-closed",
              "type": "{ open: boolean, item: AccordionBaseElement }",
              "description": "Event fired when the accordion is closed."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "size",
                "description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
              },
              {
                "name": "sizeMap",
                "description": "Responsive size map (e.g. \"md:lg\")",
                "type": "string"
              },
              {
                "name": "parentSized",
                "description": "When \"true\", size is taken from the parent card if present.",
                "type": "string"
              },
              {
                "name": "heading",
                "description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
                "type": "string"
              },
              {
                "name": "headingLevel",
                "description": "The heading level of the accordion. Default is `4`.",
                "type": "1 | 2 | 3 | 4 | 5 | 6"
              },
              {
                "name": "opened",
                "description": "Whether the accordion is opened. Default is `false`.",
                "type": "boolean"
              },
              {
                "name": "iconLocation",
                "description": "The location of the icon. Default is `right`.",
                "type": "'left' | 'right'"
              },
              {
                "name": "variant",
                "description": "The variant of the accordion.",
                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
              },
              {
                "name": "lastItem",
                "description": "Whether the accordion is the last item.",
                "type": "boolean"
              },
              {
                "name": "disabled",
                "description": "Whether the accordion is disabled.",
                "type": "boolean"
              },
              {
                "name": "loading",
                "description": "Whether the accordion is in loading state.",
                "type": "boolean"
              }
            ],
            "events": [
              {
                "name": "dds-opened",
                "type": "{ open: boolean, item: AccordionBaseElement }",
                "description": "Event fired when the accordion is opened."
              },
              {
                "name": "dds-closed",
                "type": "{ open: boolean, item: AccordionBaseElement }",
                "description": "Event fired when the accordion is closed."
              }
            ]
          }
        },
        {
          "name": "dap-ds-avatar",
          "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
          "doc-url": "",
          "attributes": [
            {
              "name": "shape",
              "description": "The shape of the avatar",
              "value": {
                "type": "'circle' | 'rounded' | 'square'",
                "default": "'circle'"
              }
            },
            {
              "name": "variant",
              "description": "The variant type of the avatar",
              "value": {
                "type": "'image' | 'initials' | 'icon'",
                "default": "'image'"
              }
            },
            {
              "name": "src",
              "description": "The source of the avatar image",
              "value": { "type": "string" }
            },
            {
              "name": "alt",
              "description": "The alt text of the avatar",
              "value": { "type": "string" }
            },
            {
              "name": "initials",
              "description": "The initials to display when variant is 'initials'",
              "value": { "type": "string" }
            },
            {
              "name": "label",
              "description": "Accessible label for the avatar",
              "value": { "type": "string" }
            },
            {
              "name": "loading",
              "description": "Loading state indicator",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "interactive",
              "description": "Whether the avatar is interactive (clickable)",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "width",
              "description": "The width of the avatar. This will override the size",
              "value": { "type": "number" }
            },
            {
              "name": "height",
              "description": "The height of the avatar. This will override the size",
              "value": { "type": "number" }
            }
          ],
          "slots": [
            {
              "name": "icon",
              "description": "The icon to display when variant is 'icon'."
            },
            {
              "name": "fallback",
              "description": "Custom fallback content when image fails to load."
            }
          ],
          "events": [
            {
              "name": "dds-load",
              "description": "Fired when the image loads successfully."
            },
            {
              "name": "dds-error",
              "description": "Fired when the image fails to load."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "shape",
                "description": "The shape of the avatar",
                "type": "'circle' | 'rounded' | 'square'"
              },
              {
                "name": "variant",
                "description": "The variant type of the avatar",
                "type": "'image' | 'initials' | 'icon'"
              },
              {
                "name": "src",
                "description": "The source of the avatar image",
                "type": "string"
              },
              {
                "name": "alt",
                "description": "The alt text of the avatar",
                "type": "string"
              },
              {
                "name": "initials",
                "description": "The initials to display when variant is 'initials'",
                "type": "string"
              },
              {
                "name": "label",
                "description": "Accessible label for the avatar",
                "type": "string"
              },
              {
                "name": "loading",
                "description": "Loading state indicator",
                "type": "boolean"
              },
              {
                "name": "interactive",
                "description": "Whether the avatar is interactive (clickable)",
                "type": "boolean"
              },
              {
                "name": "width",
                "description": "The width of the avatar. This will override the size",
                "type": "number"
              },
              {
                "name": "height",
                "description": "The height of the avatar. This will override the size",
                "type": "number"
              },
              {
                "name": "size",
                "description": "The size of the avatar. Default is `md`.",
                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
              },
              {
                "name": "sizeMap",
                "description": "Responsive size map (e.g. \"md:lg\").",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "dds-load",
                "description": "Fired when the image loads successfully."
              },
              {
                "name": "dds-error",
                "description": "Fired when the image fails to load."
              }
            ]
          }
        },
        {
          "name": "dap-ds-accordion-group",
          "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
          "doc-url": "",
          "attributes": [
            {
              "name": "autoClose",
              "description": "Whether to close other accordions when one is opened.",
              "value": { "type": "string", "default": "'true'" }
            },
            {
              "name": "variant",
              "description": "The variant of the accordion",
              "value": {
                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
                "default": "'default'"
              }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the accordion group." }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "autoClose",
                "description": "Whether to close other accordions when one is opened.",
                "type": "string"
              },
              {
                "name": "variant",
                "description": "The variant of the accordion",
                "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
              }
            ],
            "events": []
          }
        },
        {
          "name": "dap-ds-anchor-heading",
          "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
          "doc-url": "",
          "attributes": [
            {
              "name": "variant",
              "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
              "value": { "type": "HeadingVariant" }
            },
            {
              "name": "label",
              "description": "The label of the heading.",
              "value": { "type": "string" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "variant", "type": "HeadingVariant" },
              { "name": "label", "type": "string" },
              { "name": "elementId" },
              { "name": "anchorTitle" }
            ],
            "events": []
          }
        },
        {
          "name": "dap-ds-avatar-group",
          "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
          "doc-url": "",
          "attributes": [
            {
              "name": "layout",
              "description": "Layout type for the avatar group",
              "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
            },
            {
              "name": "max",
              "description": "Maximum number of avatars to show before showing overflow",
              "value": { "type": "number", "default": "3" }
            },
            {
              "name": "show-total",
              "description": "Whether to show the total count in overflow indicator",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "interactive-overflow",
              "description": "Interactive overflow indicator",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "Accessible label for the avatar group",
              "value": { "type": "string" }
            },
            {
              "name": "overflow-label",
              "description": "Accessible label for the overflow indicator",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The avatars to display in the group."
            }
          ],
          "events": [
            {
              "name": "dds-overflow-click",
              "description": "Fired when the overflow indicator is clicked."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "layout",
                "description": "Layout type for the avatar group",
                "type": "'stack' | 'grid'"
              },
              {
                "name": "max",
                "description": "Maximum number of avatars to show before showing overflow",
                "type": "number"
              },
              {
                "name": "showTotal",
                "description": "Whether to show the total count in overflow indicator",
                "type": "boolean"
              },
              {
                "name": "interactiveOverflow",
                "description": "Interactive overflow indicator",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "Accessible label for the avatar group",
                "type": "string"
              },
              {
                "name": "overflowLabel",
                "description": "Accessible label for the overflow indicator",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
                "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
              },
              {
                "name": "sizeMap",
                "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "dds-overflow-click",
                "description": "Fired when the overflow indicator is clicked."
              }
            ]
          }
        },
        {
          "name": "dap-ds-badge",
          "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
          "doc-url": "",
          "attributes": [
            {
              "name": "type",
              "description": "The type of the badge",
              "value": {
                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
                "default": "'neutral'"
              }
            },
            {
              "name": "icon",
              "description": "The icon of the badge, this is a name of a built in icon",
              "value": { "type": "string | undefined" }
            },
            {
              "name": "live",
              "description": "Whether the badge represents dynamic content that should announce changes",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the badge." },
            { "name": "icon", "description": "The icon of the badge." }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "type",
                "description": "The type of the badge",
                "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
              },
              {
                "name": "icon",
                "description": "The icon of the badge, this is a name of a built in icon",
                "type": "string | undefined"
              },
              {
                "name": "live",
                "description": "Whether the badge represents dynamic content that should announce changes",
                "type": "boolean"
              },
              {
                "name": "size",
                "description": "The size of the badge. Default is `sm`.",
                "type": "'sm' | 'lg'"
              },
              {
                "name": "sizeMap",
                "description": "Responsive size map (e.g. \"md:lg\").",
                "type": "string"
              }
            ],
            "events": []
          }
        },
        {
          "name": "dap-ds-banner",
          "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** -  The title of the banner.",
          "doc-url": "",
          "attributes": [
            {
              "name": "variant",
              "description": "The variant of the banner",
              "value": {
                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
                "default": "'brand'"
              }
            },
            {
              "name": "closeable",
              "description": "Whether the banner is closeable",
              "value": { "type": "boolean" }
            },
            {
              "name": "opened",
              "description": "State of the banner. If false banner is hidden",
              "value": { "type": "string", "default": "'true'" }
            },
            {
              "name": "closeButtonLabel",
              "description": "The aria-label for the close button",
              "value": { "type": "string", "default": "'close'" }
            },
            {
              "name": "closeButtonTestId",
              "description": "`data-testid` for the close button.",
              "value": { "type": "string", "default": "'banner-close-button'" }
            },
            {
              "name": "icon",
              "description": "The icon of the banner, this is a name of a built icon icon",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the banner." },
            { "name": "actions", "description": "Actions of banner" },
            { "name": "icon", "description": "The icon of the banner." }
          ],
          "events": [
            {
              "name": "dds-close",
              "type": "{ void }",
              "description": "Event fired when the banner is closed."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "The variant of the banner",
                "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
              },
              {
                "name": "closeable",
                "description": "Whether the banner is closeable",
                "type": "boolean"
              },
              {
                "name": "opened",
                "description": "State of the banner. If false banner is hidden",
                "type": "string"
              },
              {
                "name": "closeButtonLabel",
                "description": "The aria-label for the close button",
                "type": "string"
              },
              {
                "name": "closeButtonTestId",
                "description": "`data-testid` for the close button.",
                "type": "string"
              },
              {
                "name": "icon",
                "description": "The icon of the banner, this is a name of a built icon icon",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "dds-close",
                "type": "{ void }",
                "description": "Event fired when the banner is closed."
              }
            ]
          }
        },
        {
          "name": "dap-ds-breadcrumb",
          "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
          "doc-url": "",
          "attributes": [
            {
              "name": "variant",
              "value": { "type": "string", "default": "'normal'" }
            },
            {
              "name": "mobile",
              "description": "Mobile version of the breadcrumb",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "aria-labelledby",
              "description": "The aria-labelledby of the breadcrumb",
              "value": { "type": "string | undefined" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the breadcrumb." },
            {
              "name": "separator",
              "description": "The separator between breadcrumb items. Default is '/'."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "variant", "type": "string" },
              {
                "name": "mobile",
                "description": "Mobile version of the breadcrumb",
                "type": "boolean"
              },
              {
                "name": "ariaLabelledBy",
                "description": "The aria-labelledby of the breadcrumb",
                "type": "string | undefined"
              }
            ],
            "events": []
          }
        },
        {
          "name": "dap-ds-breadcrumb-item",
          "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
          "doc-url": "",
          "attributes": [
            {
              "name": "href",
              "description": "The URL of the breadcrumb item.",
              "value": { "type": "string | undefined" }
            },
            {
              "name": "target",
              "description": "The target of the breadcrumb item.",
              "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
            },
            {
              "name": "rel",
              "description": "The rel of the breadcrumb item link.",
              "value": { "type": "string", "default": "'noreferrer noopener'" }
            },
            {
              "name": "disabled",
              "description": "Whether the breadcrumb item is disabled.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "variant",
              "description": "The variant of the breadcrumb item.",
              "value": {
                "type": "'normal' | 'inverted'",
                "default": "'normal'"
              }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The content of the breadcrumb item."
            },
            {
              "name": "separator",
              "description": "The separator between breadcrumb items. Default is an arrow-right-s-line icon."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "href",
                "description": "The URL of the breadcrumb item.",
                "type": "string | undefined"
              },
              {
                "name": "target",
                "description": "The target of the breadcrumb item.",
                "type": "'_blank' | '_self' | '_parent' | '_top'"
              },
              {
                "name": "rel",
                "description": "The rel of the breadcrumb item link.",
                "type": "string"
              },
              {
                "name": "disabled",
                "description": "Whether the breadcrumb item is disabled.",
                "type": "boolean"
              },
              {
                "name": "variant",
                "description": "The variant of the breadcrumb item.",
                "type": "'normal' | 'inverted'"
              }
            ],
            "events": []
          }
        },
        {
          "name": "dap-ds-button",
          "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\nA caller focusing a button the same tick it mounts -- a \"Save\" button that appears\nonly after the form it belongs to opens, say -- would otherwise get a TypeError,\nnot a no-op. Throwing out of a focus() call breaks whatever effect made it.\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-6