dap-design-system 0.62.4 → 0.63.0

package/dist/react/dap-ds-accordion/index.d.ts

@@ -39,6 +39,7 @@ export type { DdsClosedEvent } from '../../events/events';
 * @csspart open-icon-base - The base of the icon when the accordion is opened.
 * @csspart close-icon - The icon when the accordion is closed.
 * @csspart close-icon-base - The base of the icon when the accordion is closed.
+* @csspart heading-text - The text of the heading.
 *
 * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))
 * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)

package/dist/react/dap-ds-accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-accordion/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/accordion/accordion.js'\n      import type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\n      export type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-accordion'\n\n      /**\n * `dap-ds-accordion` is a custom accordion component.\n * @element dap-ds-accordion\n * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n * @title - Accordion\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\")\n * @property {string} parentSized - When \"true\", size is taken from the parent card if present.\n * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided\n * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n * @property {boolean} disabled - Whether the accordion is disabled.\n * @property {boolean} loading - Whether the accordion is in loading state.\n *\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n *\n * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))\n * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)\n * @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))\n * @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))\n * @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))\n * @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))\n * @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>\n        },\n        displayName: \"DapDSAccordion\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,oBA0DVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-accordion/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/accordion/accordion.js'\n      import type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\n      export type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-accordion'\n\n      /**\n * `dap-ds-accordion` is a custom accordion component.\n * @element dap-ds-accordion\n * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n * @title - Accordion\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\")\n * @property {string} parentSized - When \"true\", size is taken from the parent card if present.\n * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided\n * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n * @property {boolean} disabled - Whether the accordion is disabled.\n * @property {boolean} loading - Whether the accordion is in loading state.\n *\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n * @csspart heading-text - The text of the heading.\n *\n * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))\n * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)\n * @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))\n * @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))\n * @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))\n * @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))\n * @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>\n        },\n        displayName: \"DapDSAccordion\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,oBA2DVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-anchor-heading/index.d.ts

@@ -12,6 +12,7 @@ import { default as Component } from '../../components/anchor-heading/anchor-hea
  * @csspart link - The link of the anchor heading. dap-ds-link element.
  * @csspart link-base - The base of the link part.
  * @csspart text - The text of the anchor heading.
+ * @csspart link-text - Alias of the text part.
  *
  * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))
  * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)

package/dist/react/dap-ds-anchor-heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-anchor-heading/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/anchor-heading/anchor-heading.js'\n\nconst tagName = 'dap-ds-anchor-heading'\n\n/**\n * `dap-ds-anchor-heading`\n * @summary Anchor heading is a heading with an anchor link.\n * @element dap-ds-anchor-heading\n * @title - Anchor heading\n *\n * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.\n * @attribute {string} label - The label of the heading.\n *\n * @csspart base - The main anchor heading container.\n * @csspart link - The link of the anchor heading. dap-ds-link element.\n * @csspart link-base - The base of the link part.\n * @csspart text - The text of the anchor heading.\n *\n * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))\n * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)\n * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered (default: 1)\n * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSAnchorHeading',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,yBAqBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-anchor-heading/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/anchor-heading/anchor-heading.js'\n\nconst tagName = 'dap-ds-anchor-heading'\n\n/**\n * `dap-ds-anchor-heading`\n * @summary Anchor heading is a heading with an anchor link.\n * @element dap-ds-anchor-heading\n * @title - Anchor heading\n *\n * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.\n * @attribute {string} label - The label of the heading.\n *\n * @csspart base - The main anchor heading container.\n * @csspart link - The link of the anchor heading. dap-ds-link element.\n * @csspart link-base - The base of the link part.\n * @csspart text - The text of the anchor heading.\n * @csspart link-text - Alias of the text part.\n *\n * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))\n * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)\n * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered (default: 1)\n * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSAnchorHeading',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,yBAsBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-banner/index.d.ts

@@ -23,7 +23,7 @@ export type { DdsCloseEvent } from '../../events/events';
 * @csspart close-icon-element - The icon element of the close button.
 * @csspart close-icon-base - The base of the close button icon.
 * @csspart actions - The actions of the banner.
-* @csspart title -  The title of the banner.
+* @csspart close-button - The close button wrapper of the banner.
 *
 * @cssproperty --dds-banner-gap - The gap between banner elements (default: var(--dds-spacing-200))
 * @cssproperty --dds-banner-line-height - The line height of the banner text (default: var(--dds-font-line-height-xlarge))

package/dist/react/dap-ds-banner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-banner/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/banner/banner.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-banner'\n\n      /**\n * `dap-ds-banner` is a custom banner component.\n * @element dap-ds-banner\n * @summary A banner is a message displayed at the top of the page to provide important information to the user.\n * @title - Banner\n *\n * @event {{ void }} dds-close - Event fired when the banner is closed.\n *\n * @slot - The content of the banner.\n * @slot actions - Actions of banner\n * @slot icon - The icon of the banner.\n *\n * @csspart base - The main banner container.\n * @csspart card-base - The wrapper card container.\n * @csspart icon - The icon of the banner.\n * @csspart icon-element - The icon element of the banner.\n * @csspart icon-base - The base of the icon.\n * @csspart closebutton - The close button of the banner.\n * @csspart close-icon-element - The icon element of the close button.\n * @csspart close-icon-base - The base of the close button icon.\n * @csspart actions - The actions of the banner.\n * @csspart title -  The title of the banner.\n *\n * @cssproperty --dds-banner-gap - The gap between banner elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-banner-line-height - The line height of the banner text (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-banner-transition - The transition property for the banner (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-banner-brand-background - The background color of the brand banner (default: var(--dds-banner-background-brand))\n * @cssproperty --dds-banner-brand-icon-color - The color of the brand banner icon (default: var(--dds-banner-icon-brand))\n * @cssproperty --dds-banner-brand-text-color - The text color of the brand banner (default: var(--dds-banner-text-brand))\n * @cssproperty --dds-banner-brand-action-color - The color of the brand banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-info-background - The background color of the info banner (default: var(--dds-banner-background-informative))\n * @cssproperty --dds-banner-info-icon-color - The color of the info banner icon (default: var(--dds-banner-icon-informative))\n * @cssproperty --dds-banner-info-text-color - The text color of the info banner (default: var(--dds-banner-text-informative))\n * @cssproperty --dds-banner-info-action-color - The color of the info banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-positive-background - The background color of the positive banner (default: var(--dds-banner-background-positive))\n * @cssproperty --dds-banner-positive-icon-color - The color of the positive banner icon (default: var(--dds-banner-icon-positive))\n * @cssproperty --dds-banner-positive-text-color - The text color of the positive banner (default: var(--dds-banner-text-positive))\n * @cssproperty --dds-banner-positive-action-color - The color of the positive banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-warning-background - The background color of the warning banner (default: var(--dds-banner-background-warning))\n * @cssproperty --dds-banner-warning-icon-color - The color of the warning banner icon (default: var(--dds-banner-icon-warning))\n * @cssproperty --dds-banner-warning-text-color - The text color of the warning banner (default: var(--dds-banner-text-warning))\n * @cssproperty --dds-banner-warning-action-color - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled))\n *\n * @cssproperty --dds-banner-negative-background - The background color of the negative banner (default: var(--dds-banner-background-negative))\n * @cssproperty --dds-banner-negative-icon-color - The color of the negative banner icon (default: var(--dds-banner-icon-negative))\n * @cssproperty --dds-banner-negative-text-color - The text color of the negative banner (default: var(--dds-banner-text-negative))\n * @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSBanner\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,iBAsDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-banner/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/banner/banner.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-banner'\n\n      /**\n * `dap-ds-banner` is a custom banner component.\n * @element dap-ds-banner\n * @summary A banner is a message displayed at the top of the page to provide important information to the user.\n * @title - Banner\n *\n * @event {{ void }} dds-close - Event fired when the banner is closed.\n *\n * @slot - The content of the banner.\n * @slot actions - Actions of banner\n * @slot icon - The icon of the banner.\n *\n * @csspart base - The main banner container.\n * @csspart card-base - The wrapper card container.\n * @csspart icon - The icon of the banner.\n * @csspart icon-element - The icon element of the banner.\n * @csspart icon-base - The base of the icon.\n * @csspart closebutton - The close button of the banner.\n * @csspart close-icon-element - The icon element of the close button.\n * @csspart close-icon-base - The base of the close button icon.\n * @csspart actions - The actions of the banner.\n * @csspart close-button - The close button wrapper of the banner.\n *\n * @cssproperty --dds-banner-gap - The gap between banner elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-banner-line-height - The line height of the banner text (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-banner-transition - The transition property for the banner (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-banner-brand-background - The background color of the brand banner (default: var(--dds-banner-background-brand))\n * @cssproperty --dds-banner-brand-icon-color - The color of the brand banner icon (default: var(--dds-banner-icon-brand))\n * @cssproperty --dds-banner-brand-text-color - The text color of the brand banner (default: var(--dds-banner-text-brand))\n * @cssproperty --dds-banner-brand-action-color - The color of the brand banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-info-background - The background color of the info banner (default: var(--dds-banner-background-informative))\n * @cssproperty --dds-banner-info-icon-color - The color of the info banner icon (default: var(--dds-banner-icon-informative))\n * @cssproperty --dds-banner-info-text-color - The text color of the info banner (default: var(--dds-banner-text-informative))\n * @cssproperty --dds-banner-info-action-color - The color of the info banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-positive-background - The background color of the positive banner (default: var(--dds-banner-background-positive))\n * @cssproperty --dds-banner-positive-icon-color - The color of the positive banner icon (default: var(--dds-banner-icon-positive))\n * @cssproperty --dds-banner-positive-text-color - The text color of the positive banner (default: var(--dds-banner-text-positive))\n * @cssproperty --dds-banner-positive-action-color - The color of the positive banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-warning-background - The background color of the warning banner (default: var(--dds-banner-background-warning))\n * @cssproperty --dds-banner-warning-icon-color - The color of the warning banner icon (default: var(--dds-banner-icon-warning))\n * @cssproperty --dds-banner-warning-text-color - The text color of the warning banner (default: var(--dds-banner-text-warning))\n * @cssproperty --dds-banner-warning-action-color - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled))\n *\n * @cssproperty --dds-banner-negative-background - The background color of the negative banner (default: var(--dds-banner-background-negative))\n * @cssproperty --dds-banner-negative-icon-color - The color of the negative banner icon (default: var(--dds-banner-icon-negative))\n * @cssproperty --dds-banner-negative-text-color - The text color of the negative banner (default: var(--dds-banner-text-negative))\n * @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSBanner\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,iBAsDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-breadcrumb/index.d.ts

@@ -9,7 +9,7 @@ import { default as Component } from '../../components/breadcrumb/breadcrumb.js'
  * @slot separator - The separator between breadcrumb items. Default is '/'.
  *
  * @csspart base - The main breadcrumb container.
- * @csspart separator - The separator of the breadcrumb.
+ * @csspart list - The ordered list holding the breadcrumb items.
  *
  * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)
  * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)

package/dist/react/dap-ds-breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-breadcrumb/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/breadcrumb/breadcrumb.js'\n\nconst tagName = 'dap-ds-breadcrumb'\n\n/**\n * `dap-ds-breadcrumb`\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @element dap-ds-breadcrumb\n * @title - Breadcrumb\n *\n * @slot - The content of the breadcrumb.\n * @slot separator - The separator between breadcrumb items. Default is '/'.\n *\n * @csspart base - The main breadcrumb container.\n * @csspart separator - The separator of the breadcrumb.\n *\n * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)\n * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)\n * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list (default: flex)\n * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list (default: nowrap)\n * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list (default: center)\n * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSBreadcrumb',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBAsBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-breadcrumb/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/breadcrumb/breadcrumb.js'\n\nconst tagName = 'dap-ds-breadcrumb'\n\n/**\n * `dap-ds-breadcrumb`\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @element dap-ds-breadcrumb\n * @title - Breadcrumb\n *\n * @slot - The content of the breadcrumb.\n * @slot separator - The separator between breadcrumb items. Default is '/'.\n *\n * @csspart base - The main breadcrumb container.\n * @csspart list - The ordered list holding the breadcrumb items.\n *\n * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)\n * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)\n * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list (default: flex)\n * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list (default: nowrap)\n * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list (default: center)\n * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSBreadcrumb',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBAsBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-button-group/index.d.ts

@@ -0,0 +1,45 @@
+import { default as Component } from '../../components/button-group/button-group.js';
+/**
+ * `dap-ds-button-group` visually joins related buttons into a single control.
+ * Inner corners are squared off and adjacent borders collapse into one.
+ * @element dap-ds-button-group
+ * @summary A container that groups related buttons with consistent, connected styling.
+ * @title - Button Group
+ *
+ * @example Basic Usage
+ * ```html
+ * <dap-ds-button-group aria-label="Text alignment">
+ *   <dap-ds-button variant="outline">Left</dap-ds-button>
+ *   <dap-ds-button variant="outline">Center</dap-ds-button>
+ *   <dap-ds-button variant="outline">Right</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @example Separator
+ * ```html
+ * <dap-ds-button-group aria-label="Clipboard">
+ *   <dap-ds-button>Copy</dap-ds-button>
+ *   <dap-ds-button-group-separator></dap-ds-button-group-separator>
+ *   <dap-ds-button>Paste</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @example Nested groups
+ * ```html
+ * <dap-ds-button-group aria-label="Editor toolbar">
+ *   <dap-ds-button-group>...</dap-ds-button-group>
+ *   <dap-ds-button-group>...</dap-ds-button-group>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @slot - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.
+ *
+ * @cssproperty --dds-button-group-gap - Spacing between nested button groups (default: var(--dds-spacing-200))
+ * @cssproperty --dds-button-group-overlap - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large))
+ * @cssproperty --dds-button-group-start-start-radius - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`.
+ * @cssproperty --dds-button-group-start-end-radius - Set on grouped items to square off their start-end corner.
+ * @cssproperty --dds-button-group-end-start-radius - Set on grouped items to square off their end-start corner.
+ * @cssproperty --dds-button-group-end-end-radius - Set on grouped items to square off their end-end corner.
+ */
+declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/dap-ds-button-group/index.js

@@ -0,0 +1,15 @@
+import { createComponent as t } from "@lit/react";
+import * as o from "react";
+import "../../components/button-group/button-group.js";
+import a from "../../components/button-group/button-group.component.js";
+const e = "dap-ds-button-group", n = t({
+  tagName: e,
+  elementClass: a,
+  react: o,
+  events: {},
+  displayName: "DapDSButtonGroup"
+});
+export {
+  n as default
+};
+//# sourceMappingURL=index.js.map

package/dist/react/dap-ds-button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-button-group/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/button-group/button-group.js'\n\nconst tagName = 'dap-ds-button-group'\n\n/**\n * `dap-ds-button-group` visually joins related buttons into a single control.\n * Inner corners are squared off and adjacent borders collapse into one.\n * @element dap-ds-button-group\n * @summary A container that groups related buttons with consistent, connected styling.\n * @title - Button Group\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-button-group aria-label=\"Text alignment\">\n *   <dap-ds-button variant=\"outline\">Left</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">Center</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">Right</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @example Separator\n * ```html\n * <dap-ds-button-group aria-label=\"Clipboard\">\n *   <dap-ds-button>Copy</dap-ds-button>\n *   <dap-ds-button-group-separator></dap-ds-button-group-separator>\n *   <dap-ds-button>Paste</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @example Nested groups\n * ```html\n * <dap-ds-button-group aria-label=\"Editor toolbar\">\n *   <dap-ds-button-group>...</dap-ds-button-group>\n *   <dap-ds-button-group>...</dap-ds-button-group>\n * </dap-ds-button-group>\n * ```\n *\n * @slot - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.\n *\n * @cssproperty --dds-button-group-gap - Spacing between nested button groups (default: var(--dds-spacing-200))\n * @cssproperty --dds-button-group-overlap - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large))\n * @cssproperty --dds-button-group-start-start-radius - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`.\n * @cssproperty --dds-button-group-start-end-radius - Set on grouped items to square off their start-end corner.\n * @cssproperty --dds-button-group-end-start-radius - Set on grouped items to square off their end-start corner.\n * @cssproperty --dds-button-group-end-end-radius - Set on grouped items to square off their end-end corner.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSButtonGroup',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,uBA4CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-button-group-separator/index.d.ts

@@ -0,0 +1,24 @@
+import { default as Component } from '../../components/button-group/button-group-separator.js';
+/**
+ * `dap-ds-button-group-separator` draws a divider line between items of a `dap-ds-button-group`.
+ * It follows the group's orientation automatically.
+ * Outline buttons already have a border, so a separator is mainly useful between filled variants.
+ * @element dap-ds-button-group-separator
+ * @summary A visual divider between items in a button group.
+ * @title - Button Group Separator
+ * @group button-group
+ *
+ * @example
+ * ```html
+ * <dap-ds-button-group aria-label="Clipboard">
+ *   <dap-ds-button>Copy</dap-ds-button>
+ *   <dap-ds-button-group-separator></dap-ds-button-group-separator>
+ *   <dap-ds-button>Paste</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @cssproperty --dds-button-group-separator-color - Color of the separator line (default: var(--dds-border-neutral-divider))
+ * @cssproperty --dds-button-group-separator-size - Thickness of the separator line (default: var(--dds-border-width-base))
+ */
+declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/dap-ds-button-group-separator/index.js

@@ -0,0 +1,15 @@
+import { createComponent as t } from "@lit/react";
+import * as a from "react";
+import "../../components/button-group/button-group-separator.js";
+import r from "../../components/button-group/button-group-separator.component.js";
+const o = "dap-ds-button-group-separator", s = t({
+  tagName: o,
+  elementClass: r,
+  react: a,
+  events: {},
+  displayName: "DapDSButtonGroupSeparator"
+});
+export {
+  s as default
+};
+//# sourceMappingURL=index.js.map

package/dist/react/dap-ds-button-group-separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-button-group-separator/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/button-group/button-group-separator.js'\n\nconst tagName = 'dap-ds-button-group-separator'\n\n/**\n * `dap-ds-button-group-separator` draws a divider line between items of a `dap-ds-button-group`.\n * It follows the group's orientation automatically.\n * Outline buttons already have a border, so a separator is mainly useful between filled variants.\n * @element dap-ds-button-group-separator\n * @summary A visual divider between items in a button group.\n * @title - Button Group Separator\n * @group button-group\n *\n * @example\n * ```html\n * <dap-ds-button-group aria-label=\"Clipboard\">\n *   <dap-ds-button>Copy</dap-ds-button>\n *   <dap-ds-button-group-separator></dap-ds-button-group-separator>\n *   <dap-ds-button>Paste</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @cssproperty --dds-button-group-separator-color - Color of the separator line (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-button-group-separator-size - Thickness of the separator line (default: var(--dds-border-width-base))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSButtonGroupSeparator',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,iCAuBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-button-group-text/index.d.ts

@@ -0,0 +1,30 @@
+import { default as Component } from '../../components/button-group/button-group-text.js';
+/**
+ * `dap-ds-button-group-text` shows static text (a label, a unit, an icon) inside a `dap-ds-button-group`.
+ * It joins the group's connected styling like a button does.
+ * @element dap-ds-button-group-text
+ * @summary Non-interactive text displayed inside a button group.
+ * @title - Button Group Text
+ * @group button-group
+ *
+ * @example
+ * ```html
+ * <dap-ds-button-group aria-label="Page size">
+ *   <dap-ds-button-group-text>Per page</dap-ds-button-group-text>
+ *   <dap-ds-button variant="outline">10</dap-ds-button>
+ *   <dap-ds-button variant="outline">50</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @slot - The text content. Can also hold an icon or a `<label>` for a grouped input.
+ *
+ * @csspart base - The text container.
+ *
+ * @cssproperty --dds-button-group-text-background - Background color (default: var(--dds-background-neutral-subtle))
+ * @cssproperty --dds-button-group-text-border-color - Border color (default: var(--dds-border-neutral-subtle))
+ * @cssproperty --dds-button-group-text-color - Text color (default: var(--dds-text-neutral-strong))
+ * @cssproperty --dds-button-group-text-padding-x - Horizontal padding (default: var(--dds-spacing-300))
+ * @cssproperty --dds-button-group-text-border-radius - Corner radius outside a group (default: var(--dds-radius-rounded))
+ */
+declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/dap-ds-button-group-text/index.js

@@ -0,0 +1,15 @@
+import { createComponent as t } from "@lit/react";
+import * as e from "react";
+import "../../components/button-group/button-group-text.js";
+import o from "../../components/button-group/button-group-text.component.js";
+const a = "dap-ds-button-group-text", n = t({
+  tagName: a,
+  elementClass: o,
+  react: e,
+  events: {},
+  displayName: "DapDSButtonGroupText"
+});
+export {
+  n as default
+};
+//# sourceMappingURL=index.js.map

package/dist/react/dap-ds-button-group-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-button-group-text/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/button-group/button-group-text.js'\n\nconst tagName = 'dap-ds-button-group-text'\n\n/**\n * `dap-ds-button-group-text` shows static text (a label, a unit, an icon) inside a `dap-ds-button-group`.\n * It joins the group's connected styling like a button does.\n * @element dap-ds-button-group-text\n * @summary Non-interactive text displayed inside a button group.\n * @title - Button Group Text\n * @group button-group\n *\n * @example\n * ```html\n * <dap-ds-button-group aria-label=\"Page size\">\n *   <dap-ds-button-group-text>Per page</dap-ds-button-group-text>\n *   <dap-ds-button variant=\"outline\">10</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">50</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @slot - The text content. Can also hold an icon or a `<label>` for a grouped input.\n *\n * @csspart base - The text container.\n *\n * @cssproperty --dds-button-group-text-background - Background color (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-button-group-text-border-color - Border color (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-button-group-text-color - Text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-button-group-text-padding-x - Horizontal padding (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-group-text-border-radius - Corner radius outside a group (default: var(--dds-radius-rounded))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSButtonGroupText',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,4BA6BVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-calendar/index.d.ts

@@ -22,6 +22,9 @@ export type { DdsChangeEvent } from '../../events/events';
 * @csspart calendar-header-button-next - The next month button of the calendar header.
 * @csspart calendar-header-year-select - The year select of the calendar header.
 * @csspart calendar-header-month-select - The month select of the calendar header.
+* @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.
+* @csspart calendar-grid-cell-base - The base of the calendar grid cell.
+* @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.
 *
 * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)
 * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)

package/dist/react/dap-ds-calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-calendar/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/calendar/calendar.js'\n      import type { DdsChangeEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-calendar'\n\n      /**\n * `dap-ds-calendar`\n * @summary A calendar is a visual representation of dates. It allows users to select a date.\n * @element dap-ds-calendar\n * @title - Calendar\n *\n * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes.\n *\n * @slot - The content of the calendar.\n *\n * @csspart base - The main calendar container.\n * @csspart calendar-header - The header of the calendar.\n * @csspart body - The body of the calendar.\n * @csspart calendar-grid-header - The header of the calendar grid.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-header-button-prev - The previous month button of the calendar header.\n * @csspart calendar-header-button-next - The next month button of the calendar header.\n * @csspart calendar-header-year-select - The year select of the calendar header.\n * @csspart calendar-header-month-select - The month select of the calendar header.\n *\n * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)\n * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)\n * @cssproperty --dds-calendar-block-display - The display property of the calendar block (default: block)\n * @cssproperty --dds-calendar-transition - The transition property for the calendar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-calendar-header-display - The display property of the calendar header (default: grid)\n * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header (default: column)\n * @cssproperty --dds-calendar-header-width - The width of the calendar header (default: 100%)\n * @cssproperty --dds-calendar-header-gap - The gap between header items (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger (default: auto)\n * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger (default: 32px)\n * @cssproperty --dds-calendar-select-padding - The padding of the select trigger (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive))\n * @cssproperty --dds-calendar-select-background - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-calendar-select-color - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger (default: normal)\n * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>\n        },\n        displayName: \"DapDSCalendar\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,mBA4CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-calendar/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/calendar/calendar.js'\n      import type { DdsChangeEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-calendar'\n\n      /**\n * `dap-ds-calendar`\n * @summary A calendar is a visual representation of dates. It allows users to select a date.\n * @element dap-ds-calendar\n * @title - Calendar\n *\n * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes.\n *\n * @slot - The content of the calendar.\n *\n * @csspart base - The main calendar container.\n * @csspart calendar-header - The header of the calendar.\n * @csspart body - The body of the calendar.\n * @csspart calendar-grid-header - The header of the calendar grid.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-header-button-prev - The previous month button of the calendar header.\n * @csspart calendar-header-button-next - The next month button of the calendar header.\n * @csspart calendar-header-year-select - The year select of the calendar header.\n * @csspart calendar-header-month-select - The month select of the calendar header.\n * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.\n * @csspart calendar-grid-cell-base - The base of the calendar grid cell.\n * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.\n *\n * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)\n * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)\n * @cssproperty --dds-calendar-block-display - The display property of the calendar block (default: block)\n * @cssproperty --dds-calendar-transition - The transition property for the calendar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-calendar-header-display - The display property of the calendar header (default: grid)\n * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header (default: column)\n * @cssproperty --dds-calendar-header-width - The width of the calendar header (default: 100%)\n * @cssproperty --dds-calendar-header-gap - The gap between header items (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger (default: auto)\n * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger (default: 32px)\n * @cssproperty --dds-calendar-select-padding - The padding of the select trigger (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive))\n * @cssproperty --dds-calendar-select-background - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-calendar-select-color - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger (default: normal)\n * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>\n        },\n        displayName: \"DapDSCalendar\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,mBA+CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-callout/index.d.ts

@@ -23,6 +23,7 @@ export type { DdsCloseEvent } from '../../events/events';
 * @csspart description - The description of the callout.
 * @csspart actions - The actions of the callout.
 * @csspart close - The close button of the callout.
+* @csspart icon-base - The base of the icon.
 *
 * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))
 * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))

package/dist/react/dap-ds-callout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-callout/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/callout/callout.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-callout'\n\n      /**\n * `dap-ds-callout` is a custom callout component.\n * @element dap-ds-callout\n * @title - Callout\n *\n * @event {{ void }} dds-close - Fired when the close button is clicked.\n *\n * @slot - The content of the callout.\n * @slot title - The title of the callout.\n * @slot icon - The icon of the callout.\n * @slot actions - The actions of the callout.\n * @slot close - The close button of the callout.\n *\n * @csspart base - The main callout container.\n * @csspart content - The content of the callout.\n * @csspart card-content - The content of the card.\n * @csspart icon - The icon of the callout.\n * @csspart title - The title of the callout.\n * @csspart description - The description of the callout.\n * @csspart actions - The actions of the callout.\n * @csspart close - The close button of the callout.\n *\n * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-icon-size - Size of the icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-callout-title-color - Color of the title text. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-callout-description-color - Color of the description text. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-callout-title-font-size - Font size of the title. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-description-font-size - Font size of the description. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-title-font-weight - Font weight of the title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-description-font-weight - Font weight of the description. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-actions-gap - Gap between action items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-callout-content-gap - Gap between content elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-callout-border-radius - Border radius of the callout. (default: var(--dds-radius-base))\n *\n * @cssproperty --dds-callout-brand-background - Brand variant background color. (default: var(--dds-background-brand-base))\n * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. (default: var(--dds-background-brand-subtle))\n * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-callout-brand-icon - Brand variant icon color. (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-callout-brand-border - Brand variant border color. (default: var(--dds-border-brand-subtle))\n *\n * @cssproperty --dds-callout-info-background - Info variant background color. (default: var(--dds-background-informative-base))\n * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. (default: var(--dds-background-informative-subtle))\n * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. (default: var(--dds-background-informative-strong))\n * @cssproperty --dds-callout-info-icon - Info variant icon color. (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-callout-info-border - Info variant border color. (default: var(--dds-border-informative-subtle))\n *\n * @cssproperty --dds-callout-positive-background - Positive variant background color. (default: var(--dds-background-positive-base))\n * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. (default: var(--dds-background-positive-subtle))\n * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. (default: var(--dds-background-positive-strong))\n * @cssproperty --dds-callout-positive-icon - Positive variant icon color. (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-callout-positive-border - Positive variant border color. (default: var(--dds-border-positive-subtle))\n *\n * @cssproperty --dds-callout-warning-background - Warning variant background color. (default: var(--dds-background-warning-base))\n * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. (default: var(--dds-background-warning-subtle))\n * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. (default: var(--dds-background-warning-strong))\n * @cssproperty --dds-callout-warning-icon - Warning variant icon color. (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-callout-warning-border - Warning variant border color. (default: var(--dds-border-warning-subtle))\n *\n * @cssproperty --dds-callout-negative-background - Negative variant background color. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. (default: var(--dds-background-negative-subtle))\n * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-callout-negative-icon - Negative variant icon color. (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-callout-negative-border - Negative variant border color. (default: var(--dds-border-negative-subtle))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSCallout\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,kBAyEVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-callout/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/callout/callout.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-callout'\n\n      /**\n * `dap-ds-callout` is a custom callout component.\n * @element dap-ds-callout\n * @title - Callout\n *\n * @event {{ void }} dds-close - Fired when the close button is clicked.\n *\n * @slot - The content of the callout.\n * @slot title - The title of the callout.\n * @slot icon - The icon of the callout.\n * @slot actions - The actions of the callout.\n * @slot close - The close button of the callout.\n *\n * @csspart base - The main callout container.\n * @csspart content - The content of the callout.\n * @csspart card-content - The content of the card.\n * @csspart icon - The icon of the callout.\n * @csspart title - The title of the callout.\n * @csspart description - The description of the callout.\n * @csspart actions - The actions of the callout.\n * @csspart close - The close button of the callout.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-icon-size - Size of the icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-callout-title-color - Color of the title text. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-callout-description-color - Color of the description text. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-callout-title-font-size - Font size of the title. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-description-font-size - Font size of the description. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-title-font-weight - Font weight of the title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-description-font-weight - Font weight of the description. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-actions-gap - Gap between action items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-callout-content-gap - Gap between content elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-callout-border-radius - Border radius of the callout. (default: var(--dds-radius-base))\n *\n * @cssproperty --dds-callout-brand-background - Brand variant background color. (default: var(--dds-background-brand-base))\n * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. (default: var(--dds-background-brand-subtle))\n * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-callout-brand-icon - Brand variant icon color. (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-callout-brand-border - Brand variant border color. (default: var(--dds-border-brand-subtle))\n *\n * @cssproperty --dds-callout-info-background - Info variant background color. (default: var(--dds-background-informative-base))\n * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. (default: var(--dds-background-informative-subtle))\n * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. (default: var(--dds-background-informative-strong))\n * @cssproperty --dds-callout-info-icon - Info variant icon color. (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-callout-info-border - Info variant border color. (default: var(--dds-border-informative-subtle))\n *\n * @cssproperty --dds-callout-positive-background - Positive variant background color. (default: var(--dds-background-positive-base))\n * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. (default: var(--dds-background-positive-subtle))\n * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. (default: var(--dds-background-positive-strong))\n * @cssproperty --dds-callout-positive-icon - Positive variant icon color. (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-callout-positive-border - Positive variant border color. (default: var(--dds-border-positive-subtle))\n *\n * @cssproperty --dds-callout-warning-background - Warning variant background color. (default: var(--dds-background-warning-base))\n * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. (default: var(--dds-background-warning-subtle))\n * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. (default: var(--dds-background-warning-strong))\n * @cssproperty --dds-callout-warning-icon - Warning variant icon color. (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-callout-warning-border - Warning variant border color. (default: var(--dds-border-warning-subtle))\n *\n * @cssproperty --dds-callout-negative-background - Negative variant background color. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. (default: var(--dds-background-negative-subtle))\n * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-callout-negative-icon - Negative variant icon color. (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-callout-negative-border - Negative variant border color. (default: var(--dds-border-negative-subtle))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSCallout\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,kBA0EVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-card/index.d.ts

@@ -11,6 +11,7 @@ import { default as Component } from '../../components/card/card.js';
  * @slot - The content of the card.
  *
  * @csspart base - The main card container.
+ * @csspart high-contrast - The high contrast indicator of the card.
  *
  * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))
  * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))

package/dist/react/dap-ds-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-card/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/card/card.js'\n\nconst tagName = 'dap-ds-card'\n\n/**\n * `dap-ds-card`\n * @summary A card is a container for content, actions, and images in a consistent format.\n * @element dap-ds-card\n * @title - Card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card.\n *\n * @csspart base - The main card container.\n *\n * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))\n * @cssproperty --dds-card-border-width - The border width of the card. (default: var(--dds-border-width-base))\n * @cssproperty --dds-card-border-color - The border color of the card. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-card-background - The background color of the card. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-card-active-border-color - The border color when the card is active. (default: var(--dds-border-brand-medium))\n * @cssproperty --dds-card-shadow - The box shadow of the card. (default: none)\n * @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. (default: none)\n * @cssproperty --dds-card-transition-duration - The duration of the card's transitions. (default: var(--dds-transition-medium))\n * @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSCard',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,eA2BVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-card/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/card/card.js'\n\nconst tagName = 'dap-ds-card'\n\n/**\n * `dap-ds-card`\n * @summary A card is a container for content, actions, and images in a consistent format.\n * @element dap-ds-card\n * @title - Card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card.\n *\n * @csspart base - The main card container.\n * @csspart high-contrast - The high contrast indicator of the card.\n *\n * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))\n * @cssproperty --dds-card-border-width - The border width of the card. (default: var(--dds-border-width-base))\n * @cssproperty --dds-card-border-color - The border color of the card. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-card-background - The background color of the card. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-card-active-border-color - The border color when the card is active. (default: var(--dds-border-brand-medium))\n * @cssproperty --dds-card-shadow - The box shadow of the card. (default: none)\n * @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. (default: none)\n * @cssproperty --dds-card-transition-duration - The duration of the card's transitions. (default: var(--dds-transition-medium))\n * @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSCard',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,eA4BVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-checkbox/index.d.ts

@@ -45,7 +45,13 @@ export type { DdsInputEvent } from '../../events/events';
 * @csspart icon-base - The base icon container.
 * @csspart label-container - The label container of the checkbox.
 * @csspart description - The description of the checkbox.
-* @csspart readonly - The readonly state of the checkbox.
+* @csspart base-label - The label element wrapping the control.
+* @csspart wrapper - The wrapper of the control and label.
+* @csspart feedback - The feedback of the checkbox.
+* @csspart high-contrast - The high contrast indicator of the checkbox.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 *
 * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))
 * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))

package/dist/react/dap-ds-checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-checkbox/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/checkbox/checkbox.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-checkbox'\n\n      /**\n * `dap-ds-checkbox`\n * @summary A checkbox is a form element that allows the user to select one or more options from a set.\n * @element dap-ds-checkbox\n * @title - Checkbox\n *\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked.\n * @event {{ void }} dds-blur - Emitted when the checkbox loses focus.\n * @event {{ void }} dds-focus - Emitted when the checkbox gains focus.\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the checkbox receives input.\n *\n * @property {string} name - The name of the checkbox.\n * @property {string} value - The value of the checkbox.\n * @property {boolean} checked - Whether the checkbox is checked.\n * @property {string} label - The label of the checkbox.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the checkbox.\n * @property {boolean} disabled - Whether the checkbox is disabled.\n * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - Whether the checkbox is required.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the checkbox.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox.\n * @property {boolean} invalid - The invalid state of the checkbox.\n * @property {boolean} optional - The optional state of the checkbox.\n * @property {string} optionalLabel - The optional label of the checkbox.\n * @property {string} requiredLabel - The required indicator of the checkbox. (default: '*')\n *\n * @csspart base - The main checkbox container.\n * @csspart label - The label of the checkbox.\n * @csspart input - The input of the checkbox.\n * @csspart control - The control of the checkbox.\n * @csspart icon - The icon of the checkbox.\n * @csspart icon-base - The base icon container.\n * @csspart label-container - The label container of the checkbox.\n * @csspart description - The description of the checkbox.\n * @csspart readonly - The readonly state of the checkbox.\n *\n * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))\n * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))\n * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. (default: var(--dds-radius-small))\n * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. (default: transparent)\n * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium))\n * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong))\n * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium))\n * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong))\n * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled))\n * @cssproperty --dds-checkbox-readonly-border-color - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-background-color - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-icon-color - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSCheckbox\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,mBAyEVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-checkbox/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/checkbox/checkbox.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-checkbox'\n\n      /**\n * `dap-ds-checkbox`\n * @summary A checkbox is a form element that allows the user to select one or more options from a set.\n * @element dap-ds-checkbox\n * @title - Checkbox\n *\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked.\n * @event {{ void }} dds-blur - Emitted when the checkbox loses focus.\n * @event {{ void }} dds-focus - Emitted when the checkbox gains focus.\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the checkbox receives input.\n *\n * @property {string} name - The name of the checkbox.\n * @property {string} value - The value of the checkbox.\n * @property {boolean} checked - Whether the checkbox is checked.\n * @property {string} label - The label of the checkbox.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the checkbox.\n * @property {boolean} disabled - Whether the checkbox is disabled.\n * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - Whether the checkbox is required.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the checkbox.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox.\n * @property {boolean} invalid - The invalid state of the checkbox.\n * @property {boolean} optional - The optional state of the checkbox.\n * @property {string} optionalLabel - The optional label of the checkbox.\n * @property {string} requiredLabel - The required indicator of the checkbox. (default: '*')\n *\n * @csspart base - The main checkbox container.\n * @csspart label - The label of the checkbox.\n * @csspart input - The input of the checkbox.\n * @csspart control - The control of the checkbox.\n * @csspart icon - The icon of the checkbox.\n * @csspart icon-base - The base icon container.\n * @csspart label-container - The label container of the checkbox.\n * @csspart description - The description of the checkbox.\n * @csspart base-label - The label element wrapping the control.\n * @csspart wrapper - The wrapper of the control and label.\n * @csspart feedback - The feedback of the checkbox.\n * @csspart high-contrast - The high contrast indicator of the checkbox.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))\n * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))\n * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. (default: var(--dds-radius-small))\n * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. (default: transparent)\n * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium))\n * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong))\n * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium))\n * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong))\n * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled))\n * @cssproperty --dds-checkbox-readonly-border-color - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-background-color - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-icon-color - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSCheckbox\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,mBA+EVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-chip/index.d.ts

@@ -21,6 +21,7 @@ export type { DdsSelectEvent } from '../../events/events';
 * @csspart remove-icon - The icon of the remove icon
 * @csspart remove-icon-base - The base of the remove icon
 * @csspart remove-icon-base-base - The base of the remove icon base
+* @csspart content - The content slot of the chip.
 *
 * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))
 * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))

package/dist/react/dap-ds-chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-chip/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/chip/chip.js'\n      import type { DdsRemoveEvent } from '../../events/events'\nimport type { DdsSelectEvent } from '../../events/events'\n      export type { DdsRemoveEvent } from '../../events/events'\nexport type { DdsSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-chip'\n\n      /**\n * `dap-ds-chip`\n * @summary A chip is a small status descriptor for UI elements.\n * @element dap-ds-chip\n * @title - Chip\n *\n * @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ value: string }} dds-remove - Fired when the chip is removed\n * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected\n *\n * @csspart base - The base part\n * @csspart content-container - The container for the content\n * @csspart remove-button - The remove button\n * @csspart remove-icon - The icon of the remove icon\n * @csspart remove-icon-base - The base of the remove icon\n * @csspart remove-icon-base-base - The base of the remove icon base\n *\n * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))\n * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))\n * @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)\n * @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)\n * @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))\n * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))\n *\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsRemove: 'dds-remove' as EventName<DdsRemoveEvent>,\nonDdsSelect: 'dds-select' as EventName<DdsSelectEvent>\n        },\n        displayName: \"DapDSChip\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,eAyCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-chip/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/chip/chip.js'\n      import type { DdsRemoveEvent } from '../../events/events'\nimport type { DdsSelectEvent } from '../../events/events'\n      export type { DdsRemoveEvent } from '../../events/events'\nexport type { DdsSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-chip'\n\n      /**\n * `dap-ds-chip`\n * @summary A chip is a small status descriptor for UI elements.\n * @element dap-ds-chip\n * @title - Chip\n *\n * @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ value: string }} dds-remove - Fired when the chip is removed\n * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected\n *\n * @csspart base - The base part\n * @csspart content-container - The container for the content\n * @csspart remove-button - The remove button\n * @csspart remove-icon - The icon of the remove icon\n * @csspart remove-icon-base - The base of the remove icon\n * @csspart remove-icon-base-base - The base of the remove icon base\n * @csspart content - The content slot of the chip.\n *\n * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))\n * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))\n * @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)\n * @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)\n * @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))\n * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))\n *\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsRemove: 'dds-remove' as EventName<DdsRemoveEvent>,\nonDdsSelect: 'dds-select' as EventName<DdsSelectEvent>\n        },\n        displayName: \"DapDSChip\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,eA0CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-code-puncher/index.d.ts

@@ -45,6 +45,10 @@ export type { DdsBlurEvent } from '../../events/events';
 * @csspart label - The label element.
 * @csspart description - The description element.
 * @csspart feedback - The feedback element.
+* @csspart tooltip - The tooltip of the code puncher.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
     onDdsInput: EventName<DdsInputEvent>;

package/dist/react/dap-ds-code-puncher/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-code-puncher/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/code-puncher/code-puncher.js'\n      import type { DdsInputEvent } from '../../events/events'\nimport type { DdsChangeEvent } from '../../events/events'\nimport type { DdsCompleteEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\n      export type { DdsInputEvent } from '../../events/events'\nexport type { DdsChangeEvent } from '../../events/events'\nexport type { DdsCompleteEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-code-puncher'\n\n      /**\n * `dap-ds-code-puncher`\n * @summary A composable PIN/OTP input component for entering verification codes.\n * @element dap-ds-code-puncher\n * @title - Code Puncher\n * @group code-puncher\n *\n * @property {string} value - The complete code value.\n * @property {boolean} mask - Mask input like password. Default is false.\n * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.\n * @property {string} placeholder - Placeholder character for empty slots.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.\n * @property {string} label - The label of the component.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the component.\n * @property {string} tooltip - The tooltip of the component.\n * @property {string} feedback - The feedback message.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.\n * @property {'success' | 'error'} status - The status of the component.\n * @property {boolean} disabled - Disable all slots. Default is false.\n * @property {boolean} readonly - Read-only state. Default is false.\n * @property {boolean} required - Required for form validation. Default is false.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} name - Form element name.\n * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.\n *\n * @event {{ value: string, index: number }} dds-input - Fires on each digit input.\n * @event {{ value: string }} dds-change - Fires when value changes.\n * @event {{ value: string }} dds-complete - Fires when all slots are filled.\n * @event dds-focus - Fires when component gains focus.\n * @event dds-blur - Fires when component loses focus.\n *\n * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n *\n * @csspart base - The main container.\n * @csspart slots - The slots container.\n * @csspart label - The label element.\n * @csspart description - The description element.\n * @csspart feedback - The feedback element.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsComplete: 'dds-complete' as EventName<DdsCompleteEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSCodePuncher\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,uBA0CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,IACtB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,EACH;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-code-puncher/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/code-puncher/code-puncher.js'\n      import type { DdsInputEvent } from '../../events/events'\nimport type { DdsChangeEvent } from '../../events/events'\nimport type { DdsCompleteEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\n      export type { DdsInputEvent } from '../../events/events'\nexport type { DdsChangeEvent } from '../../events/events'\nexport type { DdsCompleteEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-code-puncher'\n\n      /**\n * `dap-ds-code-puncher`\n * @summary A composable PIN/OTP input component for entering verification codes.\n * @element dap-ds-code-puncher\n * @title - Code Puncher\n * @group code-puncher\n *\n * @property {string} value - The complete code value.\n * @property {boolean} mask - Mask input like password. Default is false.\n * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.\n * @property {string} placeholder - Placeholder character for empty slots.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.\n * @property {string} label - The label of the component.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the component.\n * @property {string} tooltip - The tooltip of the component.\n * @property {string} feedback - The feedback message.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.\n * @property {'success' | 'error'} status - The status of the component.\n * @property {boolean} disabled - Disable all slots. Default is false.\n * @property {boolean} readonly - Read-only state. Default is false.\n * @property {boolean} required - Required for form validation. Default is false.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} name - Form element name.\n * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.\n *\n * @event {{ value: string, index: number }} dds-input - Fires on each digit input.\n * @event {{ value: string }} dds-change - Fires when value changes.\n * @event {{ value: string }} dds-complete - Fires when all slots are filled.\n * @event dds-focus - Fires when component gains focus.\n * @event dds-blur - Fires when component loses focus.\n *\n * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n *\n * @csspart base - The main container.\n * @csspart slots - The slots container.\n * @csspart label - The label element.\n * @csspart description - The description element.\n * @csspart feedback - The feedback element.\n * @csspart tooltip - The tooltip of the code puncher.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsComplete: 'dds-complete' as EventName<DdsCompleteEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSCodePuncher\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,uBA8CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,IACtB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,EACH;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-combobox/index.d.ts

@@ -37,8 +37,10 @@ export type { DdsInputEvent } from '../../events/events';
 * @property {boolean} autofocus - Whether the select is autofocus.
 * @property {string} feedback - The feedback content of the select.
 * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.
-* @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select.
+* @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode.
 * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.
+* @property {DapDSOptionData[]} items - The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.
+* @property {DapDSOptionRenderer} renderOption - Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text.
 * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.
 * @property {boolean} searchForText - Whether the combobox should search for the selected item text.
 * @property {boolean} textComplete - Whether the combobox should complete the text.
@@ -56,6 +58,12 @@ export type { DdsInputEvent } from '../../events/events';
 * @csspart tooltip - The tooltip of the select.
 * @csspart option-list - The option list of the select.
 * @csspart input - The input of the select.
+* @csspart chips - The container of the selected chips.
+* @csspart indicator-icon - The dropdown indicator icon.
+* @csspart search-button - The search button.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 *
 * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))
 * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))