dap-design-system

{ "$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-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-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 is 0. _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout. Default is -8px. _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars. Default is 2px. _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars. Default is white. _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator. _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator. _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator. _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars. Default is 80px. _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars. Default is 64px. _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars. Default is 48px. _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars. Default is 32px. _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars. Default is 24px. _(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": "size", "description": "The size of avatars in the group", "values": [ { "name": "xxs" }, { "name": "xs" }, { "name": "sm" }, { "name": "md" }, { "name": "lg" } ] }, { "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-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 is the design system's base border width. _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border. Default is solid. _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge. Default is the design system's base radius. _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text. Default is bold. _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text. Default is 1.2. _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge. Default is 'all 0.2s ease-in-out'. _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge. Default is the design system's spacing-100 and spacing-200. _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge. Default is the design system's spacing-100 and spacing-300. _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge. Default is the design system's font-xs. _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge. Default is the design system's font-sm. _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge. Default is the design system's border-neutral-base. _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge. Default is the design system's background-neutral-medium. _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge. Default is the design system's text-neutral-subtle. _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge. Default is the design system's border-brand-base. _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge. Default is the design system's background-brand-medium. _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge. Default is the design system's text-brand-subtle. _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge. Default is the design system's border-informative-base. _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge. Default is the design system's background-informative-medium. _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge. Default is the design system's text-informative-subtle. _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge. Default is the design system's border-positive-base. _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge. Default is the design system's background-positive-medium. _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge. Default is the design system's text-positive-subtle. _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge. Default is the design system's border-warning-subtle. _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge. Default is the design system's background-warning-medium. _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge. Default is the design system's text-warning-subtle. _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge. Default is the design system's border-negative-base. _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge. Default is the design system's background-negative-medium. _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge. Default is the design system's 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": "size", "description": "The size of the badge", "values": [{ "name": "sm" }, { "name": "lg" }] }, { "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-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 is the primary color. _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered. Default is 0. _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered. Default is 1. _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity. Default is '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-avatar", "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-click** - Fired when the avatar is clicked (only when interactive).\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 varies by shape. _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar. Default is neutral. _(default: undefined)_\n- **--dds-avatar-border-width** - The width of the avatar's border. Default is 0. _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border. Default is transparent. _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border. Default is solid. _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar. Default is 'all 0.2s ease-in-out'. _(default: undefined)_\n- **--dds-avatar-text-color** - The color of initials text. Default is neutral strong. _(default: undefined)_\n- **--dds-avatar-font-size** - The font size for initials. Calculated based on size. _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials. Default is semibold. _(default: undefined)_\n- **--dds-avatar-size-lg** - The size of the large avatar. Default is 80px. _(default: undefined)_\n- **--dds-avatar-size-md** - The size of the medium avatar. Default is 64px. _(default: undefined)_\n- **--dds-avatar-size-sm** - The size of the small avatar. Default is 48px. _(default: undefined)_\n- **--dds-avatar-size-xs** - The size of the extra small avatar. Default is 32px. _(default: undefined)_\n- **--dds-avatar-size-xxs** - The size of the extra extra small avatar. Default is 24px. _(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": "size", "description": "The size of the avatar", "values": [ { "name": "xxs" }, { "name": "xs" }, { "name": "sm" }, { "name": "md" }, { "name": "lg" } ] }, { "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-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 is the design system's spacing-200. _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text. Default is the design system's font-line-height-xlarge. _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner. Default is 'all 0.2s ease-in-out'. _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner. Default is the design system's banner-background-brand. _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon. Default is the design system's banner-icon-brand. _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner. Default is the design system's banner-text-brand. _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions. Default is the design system's banner-action-enabled. _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner. Default is the design system's banner-background-informative. _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon. Default is the design system's banner-icon-informative. _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner. Default is the design system's banner-text-informative. _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions. Default is the design system's banner-action-enabled. _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner. Default is the design system's banner-background-positive. _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon. Default is the design system's banner-icon-positive. _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner. Default is the design system's banner-text-positive. _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions. Default is the design system's banner-action-enabled. _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner. Default is the design system's banner-background-warning. _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon. Default is the design system's banner-icon-warning. _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner. Default is the design system's banner-text-warning. _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions. Default is the design system's banner-action-inverted-enabled. _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner. Default is the design system's banner-background-negative. _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon. Default is the design system's banner-icon-negative. _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner. Default is the design system's banner-text-negative. _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions. Default is the design system's 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-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 is 100%. _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb. Default is auto. _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb. Default is 'all 0.2s ease-in-out'. _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list. Default is flex. _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list. Default is nowrap. _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list. Default is center. _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list. Default is 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-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 is inline-flex. _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item. Default is nowrap. _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item. Default is center. _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item. Default is the design system's text-neutral-base. _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item. Default is 'all 0.2s ease-in-out'. _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator. Default is the design system's spacing-200. _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item. Default is the design system's spacing-200. _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item. Default is the design system's font-sm. _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item. Default is the design system's font-weight-medium. _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item. Default is the design system's font-weight-bold. _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator. Default is the design system's text-neutral-disabled. _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link. Default is the design system's link-neutral-enabled. _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted. Default is the design system's text-neutral-inverted. _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted. Default is the design system's 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-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": "aria-controls", "description": "The ID of the element controlled by this button", "values": [] }, { "name": "aria-describedby", "description": "The ID of the element that describes the button", "values": [] }, { "name": "loadingTimeout", "description": "Controls loading timeout in milliseconds", "values": [] }, { "name": "active", "description": "Whether the button is active", "values": [] } ], "references": [ { "name": "Documentation", "url": "https://shoelace.style/components/button" } ] }, { "name": "dap-ds-calendar-cell", "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS 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": [] } ], "references": [ { "name": "Documentation",