dap-design-system 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/accordion/accordion.component.d.ts

@@ -35,6 +35,7 @@ import { AccordionBaseElement } from './accordion-base-element';
  * @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/components/accordion/accordion.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.js","sources":["../../../src/components/accordion/accordion.component.ts"],"sourcesContent":["import { AccordionBaseElement } from './accordion-base-element'\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 */\nexport default class DapDSAccordion extends AccordionBaseElement {\n  static tagName = 'dap-ds-accordion'\n\n  render() {\n    return this.renderAccordion()\n  }\n}\n"],"names":["_DapDSAccordion","AccordionBaseElement","DapDSAccordion"],"mappings":";AA0DA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAqB;AAAA,EAG/D,SAAS;AACP,WAAO,KAAK,gBAAgB;AAAA,EAAA;AAEhC;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}
+{"version":3,"file":"accordion.component.js","sources":["../../../src/components/accordion/accordion.component.ts"],"sourcesContent":["import { AccordionBaseElement } from './accordion-base-element'\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 */\nexport default class DapDSAccordion extends AccordionBaseElement {\n  static tagName = 'dap-ds-accordion'\n\n  render() {\n    return this.renderAccordion()\n  }\n}\n"],"names":["_DapDSAccordion","AccordionBaseElement","DapDSAccordion"],"mappings":";AA2DA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAqB;AAAA,EAG/D,SAAS;AACP,WAAO,KAAK,gBAAgB;AAAA,EAAA;AAEhC;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}

package/dist/components/anchor-heading/anchor-heading.component.d.ts

@@ -15,6 +15,7 @@ export type HeadingVariant = Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4
  * @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/components/anchor-heading/anchor-heading.component.js

@@ -34,7 +34,7 @@ const e = class e extends k {
       ${this.label}
       <dap-ds-link
         part="link"
-        exportparts="base: link-base, text: link-text"
+        exportparts="base: link-base, text: link-text, text: text"
         class="dds-anchor__link"
         href=${`#${this.elementId}`}
         aria-label=${this.anchorTitle}

package/dist/components/anchor-heading/anchor-heading.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-heading.component.js","sources":["../../../src/components/anchor-heading/anchor-heading.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\nimport { kebabCase } from '@/common/utils'\nimport { adoptLightStyles } from '@/internal/adopt-light-styles'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSLink from '../link/link.component'\nimport typographyStyles from '../typography/_styles/typography.scss?inline'\nimport { TypographyVariant } from '../typography/typography.component'\nimport styles from './anchor-heading.scss?inline'\n\nexport type HeadingVariant = Extract<\n  TypographyVariant,\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n>\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 */\nexport default class DapDSAnchorHeading extends DdsElement {\n  static tagName = 'dap-ds-anchor-heading'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  @property() variant!: HeadingVariant\n  @property() label!: string\n\n  static readonly styles = [unsafeCSS(styles), unsafeCSS(typographyStyles)]\n\n  createRenderRoot() {\n    adoptLightStyles(this)\n    return this\n  }\n\n  get elementId() {\n    return this.id ? this.id : kebabCase(this.label)\n  }\n\n  get anchorTitle() {\n    return `Link to ${this.label}`\n  }\n\n  render() {\n    return html`\n    <${unsafeStatic(this.variant)}\n      id=${this.elementId}\n      part=\"base\"\n      class=${clsx(anchorClass, { [`typography-${this.variant}`]: this.variant })}\n    >\n      ${this.label}\n      <dap-ds-link\n        part=\"link\"\n        exportparts=\"base: link-base, text: link-text\"\n        class=\"dds-anchor__link\"\n        href=${`#${this.elementId}`}\n        aria-label=${this.anchorTitle}\n        title=${this.anchorTitle}>\n        &#8203;\n      </dap-ds-link>\n    </${unsafeStatic(this.variant)}>\n  `\n  }\n}\n"],"names":["_DapDSAnchorHeading","DdsElement","adoptLightStyles","kebabCase","html","unsafeStatic","clsx","anchorClass","DapDSLink","unsafeCSS","styles","typographyStyles","DapDSAnchorHeading","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAW;AAAA,EAYzD,mBAAmB;AACjB,WAAAC,EAAiB,IAAI,GACd;AAAA,EAAA;AAAA,EAGT,IAAI,YAAY;AACd,WAAO,KAAK,KAAK,KAAK,KAAKC,EAAU,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjD,IAAI,cAAc;AACT,WAAA,WAAW,KAAK,KAAK;AAAA,EAAA;AAAA,EAG9B,SAAS;AACA,WAAAC;AAAA,OACJC,EAAa,KAAK,OAAO,CAAC;AAAA,WACtB,KAAK,SAAS;AAAA;AAAA,cAEXC,EAAKC,GAAa,EAAE,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG,KAAK,SAAS,CAAC;AAAA;AAAA,QAEzE,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,eAKH,IAAI,KAAK,SAAS,EAAE;AAAA,qBACd,KAAK,WAAW;AAAA,gBACrB,KAAK,WAAW;AAAA;AAAA;AAAA,QAGxBF,EAAa,KAAK,OAAO,CAAC;AAAA;AAAA,EAAA;AAGlC;AA5CEL,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeQ;AACjB,GAKAR,EAAgB,SAAS,CAACS,EAAUC,CAAM,GAAGD,EAAUE,CAAgB,CAAC;AAV1E,IAAqBC,IAArBZ;AAOca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAPSF,EAOP,WAAA,SAAA;AACAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,OAAA;"}
+{"version":3,"file":"anchor-heading.component.js","sources":["../../../src/components/anchor-heading/anchor-heading.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\nimport { kebabCase } from '@/common/utils'\nimport { adoptLightStyles } from '@/internal/adopt-light-styles'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSLink from '../link/link.component'\nimport typographyStyles from '../typography/_styles/typography.scss?inline'\nimport { TypographyVariant } from '../typography/typography.component'\nimport styles from './anchor-heading.scss?inline'\n\nexport type HeadingVariant = Extract<\n  TypographyVariant,\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n>\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 */\nexport default class DapDSAnchorHeading extends DdsElement {\n  static tagName = 'dap-ds-anchor-heading'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  @property() variant!: HeadingVariant\n  @property() label!: string\n\n  static readonly styles = [unsafeCSS(styles), unsafeCSS(typographyStyles)]\n\n  createRenderRoot() {\n    adoptLightStyles(this)\n    return this\n  }\n\n  get elementId() {\n    return this.id ? this.id : kebabCase(this.label)\n  }\n\n  get anchorTitle() {\n    return `Link to ${this.label}`\n  }\n\n  render() {\n    return html`\n    <${unsafeStatic(this.variant)}\n      id=${this.elementId}\n      part=\"base\"\n      class=${clsx(anchorClass, { [`typography-${this.variant}`]: this.variant })}\n    >\n      ${this.label}\n      <dap-ds-link\n        part=\"link\"\n        exportparts=\"base: link-base, text: link-text, text: text\"\n        class=\"dds-anchor__link\"\n        href=${`#${this.elementId}`}\n        aria-label=${this.anchorTitle}\n        title=${this.anchorTitle}>\n        &#8203;\n      </dap-ds-link>\n    </${unsafeStatic(this.variant)}>\n  `\n  }\n}\n"],"names":["_DapDSAnchorHeading","DdsElement","adoptLightStyles","kebabCase","html","unsafeStatic","clsx","anchorClass","DapDSLink","unsafeCSS","styles","typographyStyles","DapDSAnchorHeading","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AAwCA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAW;AAAA,EAYzD,mBAAmB;AACjB,WAAAC,EAAiB,IAAI,GACd;AAAA,EAAA;AAAA,EAGT,IAAI,YAAY;AACd,WAAO,KAAK,KAAK,KAAK,KAAKC,EAAU,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjD,IAAI,cAAc;AACT,WAAA,WAAW,KAAK,KAAK;AAAA,EAAA;AAAA,EAG9B,SAAS;AACA,WAAAC;AAAA,OACJC,EAAa,KAAK,OAAO,CAAC;AAAA,WACtB,KAAK,SAAS;AAAA;AAAA,cAEXC,EAAKC,GAAa,EAAE,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG,KAAK,SAAS,CAAC;AAAA;AAAA,QAEzE,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,eAKH,IAAI,KAAK,SAAS,EAAE;AAAA,qBACd,KAAK,WAAW;AAAA,gBACrB,KAAK,WAAW;AAAA;AAAA;AAAA,QAGxBF,EAAa,KAAK,OAAO,CAAC;AAAA;AAAA,EAAA;AAGlC;AA5CEL,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeQ;AACjB,GAKAR,EAAgB,SAAS,CAACS,EAAUC,CAAM,GAAGD,EAAUE,CAAgB,CAAC;AAV1E,IAAqBC,IAArBZ;AAOca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAPSF,EAOP,WAAA,SAAA;AACAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,OAAA;"}

package/dist/components/banner/banner.component.d.ts

@@ -27,7 +27,7 @@ export type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negativ
  * @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/components/banner/banner.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.component.js","sources":["../../../src/components/banner/banner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport styles from './banner.scss?inline'\n\nexport type BannerTheme = 'clean' | 'normal'\n\nexport type BannerVariant =\n  | 'brand'\n  | 'positive'\n  | 'info'\n  | 'warning'\n  | 'negative'\n\nconst iconNameMap = {\n  brand: 'information-2-fill',\n  info: 'information-fill',\n  positive: 'checkbox-circle-fill',\n  warning: 'alert-fill',\n  negative: 'error-warning-fill',\n}\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 */\nexport default class DapDSBanner extends DdsElement {\n  static tagName = 'dap-ds-banner'\n\n  static dependencies = {\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** @ignore */\n  @queryAssignedElements({ slot: 'actions' }) actionSlot: HTMLElement[]\n  /** @ignore */\n  @query('.banner__actions') actionContainer: HTMLElement\n\n  /** The variant of the banner\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: BannerVariant = 'brand'\n\n  /** Whether the banner is closeable */\n  @property({ type: Boolean }) closeable: boolean\n\n  /** State of the banner. If false banner is hidden */\n  @property({ reflect: true }) opened: string = 'true'\n\n  /** The aria-label for the close button */\n  @property({ type: String })\n  closeButtonLabel = 'close'\n\n  /** `data-testid` for the close button. */\n  @property() closeButtonTestId = 'banner-close-button'\n\n  /** The icon of the banner, this is a name of a built icon icon */\n  @property({ type: String }) icon: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties:\n      | PropertyValueMap<DapDSBanner>\n      | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot?.length) {\n      if (this.actionSlot?.length && this.variant !== 'warning') {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'inverted')\n        })\n      } else {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'warning')\n        })\n      }\n    }\n\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private onCloseClick() {\n    this.emit('dds-close')\n  }\n\n  render() {\n    const icon = iconNameMap[this.variant]\n\n    if (this.opened === 'false') {\n      return nothing\n    }\n    return html`\n      <dap-ds-card size=\"lg\">\n        <dap-ds-card-content\n          class=${clsx(`banner--${this.variant}`)}\n          part=\"card-base\"\n          spacing=\"none\">\n          <div class=${clsx('banner', `banner--${this.variant}`)} part=\"base\">\n            <div class=\"banner__icon-container\">\n              ${this.icon || icon\n                ? html`<slot part=\"icon\" name=\"icon\">\n                    <dap-ds-icon\n                      part=\"icon\"\n                      exportparts=\"icon:icon-element, base:icon-base\"\n                      class=\"banner__icon\"\n                      aria-hidden=\"true\"\n                      name=\"${this.icon || icon}\">\n                    </dap-ds-icon\n                  ></slot>`\n                : html`<slot name=\"icon\" part=\"icon\"></slot>`}\n            </div>\n            <div>\n              <slot class=\"banner__content\"></slot>\n\n              <div class=\"banner__actions\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </div>\n            </div>\n\n            ${this.closeable\n              ? html`\n                  <dap-ds-icon-button\n                    class=\"banner__close\"\n                    part=\"close-button\"\n                    data-testid=${this.closeButtonTestId}\n                    exportparts=\"icon-base:close-icon-element, base:close-icon-base\"\n                    variant=\"inverted\"\n                    clean\n                    size=\"md\"\n                    icon=\"close-line\"\n                    part=\"closebutton\"\n                    @click=\"${this.onCloseClick}\"\n                    aria-label=${this.closeButtonLabel ??\n                    this.localize.t('close')}>\n                  </dap-ds-icon-button>\n                `\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["iconNameMap","_DapDSBanner","DdsElement","_changedProperties","_a","_b","element","icon","nothing","html","clsx","DapDSCard","DapDSCardContent","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSBanner","__decorateClass","queryAssignedElements","query","property"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAMA,IAAc;AAAA,EAClB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AACZ,GAsDqBC,IAArB,MAAqBA,UAAoBC,EAAW;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBuC,KAAA,UAAA,SAMS,KAAA,SAAA,QAI3B,KAAA,mBAAA,SAGa,KAAA,oBAAA;AAAA,EAAA;AAAA,EAOtB,aACRC,GAGM;;AACF,KAAAC,IAAA,KAAK,eAAL,QAAAA,EAAiB,YACfC,IAAA,KAAK,eAAL,QAAAA,EAAiB,UAAU,KAAK,YAAY,YACzC,KAAA,WAAW,QAAQ,CAAWC,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,UAAU;AAAA,IAAA,CAC3C,IAEI,KAAA,WAAW,QAAQ,CAAWA,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,SAAS;AAAA,IAAA,CAC1C,IAID,KAAK,cAAc,CAAC,KAAK,WAAW,UAAU,KAAK,oBAChD,KAAA,gBAAgB,MAAM,UAAU;AAAA,EACvC;AAAA,EAGM,eAAe;AACrB,SAAK,KAAK,WAAW;AAAA,EAAA;AAAA,EAGvB,SAAS;;AACD,UAAAC,IAAOP,EAAY,KAAK,OAAO;AAEjC,WAAA,KAAK,WAAW,UACXQ,IAEFC;AAAA;AAAA;AAAA,kBAGOC,EAAK,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,uBAG1BA,EAAK,UAAU,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA,gBAEhD,KAAK,QAAQH,IACXE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMY,KAAK,QAAQF,CAAI;AAAA;AAAA,8BAG7BE,wCAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAU/C,KAAK,YACHA;AAAA;AAAA;AAAA;AAAA,kCAIkB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAO1B,KAAK,YAAY;AAAA,kCACdL,IAAA,KAAK,qBAAL,OAAAA,IACb,KAAK,SAAS,EAAE,OAAO,CAAC;AAAA;AAAA,oBAG5BI,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvB;AAxHEP,EAAO,UAAU,iBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeU;AAAA,EACf,uBAAuBC;AAAA,EACvB,eAAeC;AAAA,EACf,sBAAsBC;AACxB,GA4BgBb,EAAA,SAASc,EAAUC,CAAM;AApC3C,IAAqBC,IAArBhB;AAW8CiB,EAAA;AAAA,EAA3CC,EAAsB,EAAE,MAAM,UAAW,CAAA;AAAA,GAXvBF,EAWyB,WAAA,YAAA;AAEjBC,EAAA;AAAA,EAA1BE,EAAM,kBAAkB;AAAA,GAbNH,EAaQ,WAAA,iBAAA;AAKfC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAlBSJ,EAkBP,WAAA,SAAA;AAGiBC,EAAA;AAAA,EAA5BG,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRJ,EAqBU,WAAA,WAAA;AAGAC,EAAA;AAAA,EAA5BG,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRJ,EAwBU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA3BPJ,EA4BnB,WAAA,kBAAA;AAGYC,EAAA;AAAA,EAAXG,EAAS;AAAA,GA/BSJ,EA+BP,WAAA,mBAAA;AAGgBC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlCPJ,EAkCS,WAAA,MAAA;"}
+{"version":3,"file":"banner.component.js","sources":["../../../src/components/banner/banner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport styles from './banner.scss?inline'\n\nexport type BannerTheme = 'clean' | 'normal'\n\nexport type BannerVariant =\n  | 'brand'\n  | 'positive'\n  | 'info'\n  | 'warning'\n  | 'negative'\n\nconst iconNameMap = {\n  brand: 'information-2-fill',\n  info: 'information-fill',\n  positive: 'checkbox-circle-fill',\n  warning: 'alert-fill',\n  negative: 'error-warning-fill',\n}\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 */\nexport default class DapDSBanner extends DdsElement {\n  static tagName = 'dap-ds-banner'\n\n  static dependencies = {\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** @ignore */\n  @queryAssignedElements({ slot: 'actions' }) actionSlot: HTMLElement[]\n  /** @ignore */\n  @query('.banner__actions') actionContainer: HTMLElement\n\n  /** The variant of the banner\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: BannerVariant = 'brand'\n\n  /** Whether the banner is closeable */\n  @property({ type: Boolean }) closeable: boolean\n\n  /** State of the banner. If false banner is hidden */\n  @property({ reflect: true }) opened: string = 'true'\n\n  /** The aria-label for the close button */\n  @property({ type: String })\n  closeButtonLabel = 'close'\n\n  /** `data-testid` for the close button. */\n  @property() closeButtonTestId = 'banner-close-button'\n\n  /** The icon of the banner, this is a name of a built icon icon */\n  @property({ type: String }) icon: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties:\n      | PropertyValueMap<DapDSBanner>\n      | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot?.length) {\n      if (this.actionSlot?.length && this.variant !== 'warning') {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'inverted')\n        })\n      } else {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'warning')\n        })\n      }\n    }\n\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private onCloseClick() {\n    this.emit('dds-close')\n  }\n\n  render() {\n    const icon = iconNameMap[this.variant]\n\n    if (this.opened === 'false') {\n      return nothing\n    }\n    return html`\n      <dap-ds-card size=\"lg\">\n        <dap-ds-card-content\n          class=${clsx(`banner--${this.variant}`)}\n          part=\"card-base\"\n          spacing=\"none\">\n          <div class=${clsx('banner', `banner--${this.variant}`)} part=\"base\">\n            <div class=\"banner__icon-container\">\n              ${this.icon || icon\n                ? html`<slot part=\"icon\" name=\"icon\">\n                    <dap-ds-icon\n                      part=\"icon\"\n                      exportparts=\"icon:icon-element, base:icon-base\"\n                      class=\"banner__icon\"\n                      aria-hidden=\"true\"\n                      name=\"${this.icon || icon}\">\n                    </dap-ds-icon\n                  ></slot>`\n                : html`<slot name=\"icon\" part=\"icon\"></slot>`}\n            </div>\n            <div>\n              <slot class=\"banner__content\"></slot>\n\n              <div class=\"banner__actions\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </div>\n            </div>\n\n            ${this.closeable\n              ? html`\n                  <dap-ds-icon-button\n                    class=\"banner__close\"\n                    part=\"close-button\"\n                    data-testid=${this.closeButtonTestId}\n                    exportparts=\"icon-base:close-icon-element, base:close-icon-base\"\n                    variant=\"inverted\"\n                    clean\n                    size=\"md\"\n                    icon=\"close-line\"\n                    part=\"closebutton\"\n                    @click=\"${this.onCloseClick}\"\n                    aria-label=${this.closeButtonLabel ??\n                    this.localize.t('close')}>\n                  </dap-ds-icon-button>\n                `\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["iconNameMap","_DapDSBanner","DdsElement","_changedProperties","_a","_b","element","icon","nothing","html","clsx","DapDSCard","DapDSCardContent","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSBanner","__decorateClass","queryAssignedElements","query","property"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAMA,IAAc;AAAA,EAClB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AACZ,GAsDqBC,IAArB,MAAqBA,UAAoBC,EAAW;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBuC,KAAA,UAAA,SAMS,KAAA,SAAA,QAI3B,KAAA,mBAAA,SAGa,KAAA,oBAAA;AAAA,EAAA;AAAA,EAOtB,aACRC,GAGM;;AACF,KAAAC,IAAA,KAAK,eAAL,QAAAA,EAAiB,YACfC,IAAA,KAAK,eAAL,QAAAA,EAAiB,UAAU,KAAK,YAAY,YACzC,KAAA,WAAW,QAAQ,CAAWC,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,UAAU;AAAA,IAAA,CAC3C,IAEI,KAAA,WAAW,QAAQ,CAAWA,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,SAAS;AAAA,IAAA,CAC1C,IAID,KAAK,cAAc,CAAC,KAAK,WAAW,UAAU,KAAK,oBAChD,KAAA,gBAAgB,MAAM,UAAU;AAAA,EACvC;AAAA,EAGM,eAAe;AACrB,SAAK,KAAK,WAAW;AAAA,EAAA;AAAA,EAGvB,SAAS;;AACD,UAAAC,IAAOP,EAAY,KAAK,OAAO;AAEjC,WAAA,KAAK,WAAW,UACXQ,IAEFC;AAAA;AAAA;AAAA,kBAGOC,EAAK,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,uBAG1BA,EAAK,UAAU,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA,gBAEhD,KAAK,QAAQH,IACXE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMY,KAAK,QAAQF,CAAI;AAAA;AAAA,8BAG7BE,wCAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAU/C,KAAK,YACHA;AAAA;AAAA;AAAA;AAAA,kCAIkB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAO1B,KAAK,YAAY;AAAA,kCACdL,IAAA,KAAK,qBAAL,OAAAA,IACb,KAAK,SAAS,EAAE,OAAO,CAAC;AAAA;AAAA,oBAG5BI,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvB;AAxHEP,EAAO,UAAU,iBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeU;AAAA,EACf,uBAAuBC;AAAA,EACvB,eAAeC;AAAA,EACf,sBAAsBC;AACxB,GA4BgBb,EAAA,SAASc,EAAUC,CAAM;AApC3C,IAAqBC,IAArBhB;AAW8CiB,EAAA;AAAA,EAA3CC,EAAsB,EAAE,MAAM,UAAW,CAAA;AAAA,GAXvBF,EAWyB,WAAA,YAAA;AAEjBC,EAAA;AAAA,EAA1BE,EAAM,kBAAkB;AAAA,GAbNH,EAaQ,WAAA,iBAAA;AAKfC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAlBSJ,EAkBP,WAAA,SAAA;AAGiBC,EAAA;AAAA,EAA5BG,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRJ,EAqBU,WAAA,WAAA;AAGAC,EAAA;AAAA,EAA5BG,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRJ,EAwBU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA3BPJ,EA4BnB,WAAA,kBAAA;AAGYC,EAAA;AAAA,EAAXG,EAAS;AAAA,GA/BSJ,EA+BP,WAAA,mBAAA;AAGgBC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlCPJ,EAkCS,WAAA,MAAA;"}

package/dist/components/breadcrumb/breadcrumb.component.d.ts

@@ -9,7 +9,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @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/components/breadcrumb/breadcrumb.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.component.js","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.component'\nimport styles from './breadcrumb.scss?inline'\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 */\nexport default class DapDSBreadcrumb extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb'\n\n  static readonly styles = unsafeCSS(styles)\n  /** @ignore */\n  @query('slot') defaultSlot!: HTMLSlotElement\n  /** @ignore */\n  @query('slot[name=\"separator\"]') separatorSlot!: HTMLSlotElement\n\n  /* Variant of the breadcrumb\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String }) variant = 'normal'\n\n  /** Mobile version of the breadcrumb */\n  @property({ type: Boolean }) mobile = false\n\n  /** The aria-labelledby of the breadcrumb */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  private _cachedItems: DapDSBreadcrumbItem[] = []\n  private _debounceTimeout?: number\n\n  protected firstUpdated(): void {\n    // On SSR hydration `slotchange` does not fire, so the separators (injected\n    // imperatively into the slotted items) are never added — the breadcrumb\n    // renders without its `/`s. Resolve once here if items are already assigned.\n    if (this.defaultSlot?.assignedElements({ flatten: true }).length) {\n      this._updateBreadcrumbItems()\n    }\n  }\n\n  private cloneSeparator() {\n    const separator = this.separatorSlot.assignedElements({\n      flatten: true,\n    })[0] as HTMLElement\n\n    return separator.cloneNode(true) as HTMLElement\n  }\n\n  private handleSlotChange(): void {\n    if (this._debounceTimeout) {\n      clearTimeout(this._debounceTimeout)\n    }\n\n    this._debounceTimeout = window.setTimeout(() => {\n      this._updateBreadcrumbItems()\n    }, 16) // One frame delay for batching\n  }\n\n  private _updateBreadcrumbItems(): void {\n    const items = Array.from(\n      this.defaultSlot.assignedElements({ flatten: true }),\n    ).filter(\n      (el): el is DapDSBreadcrumbItem => el instanceof DapDSBreadcrumbItem,\n    )\n\n    // Check if items have actually changed to avoid unnecessary work\n    const itemsChanged =\n      items.length !== this._cachedItems.length ||\n      items.some((item, index) => item !== this._cachedItems[index])\n\n    if (!itemsChanged) return\n\n    this._cachedItems = items\n\n    items.forEach((item, index) => {\n      const isLast = index === items.length - 1\n\n      if (this.mobile && index !== 0 && !isLast) {\n        item.style.display = 'none'\n        return\n      } else {\n        item.style.display = ''\n      }\n\n      item.toggleAttribute('inverted', this.variant === 'inverted')\n      item.variant = this.variant\n      if (isLast) {\n        item.setAttribute('aria-current', 'page')\n      } else {\n        item.removeAttribute('aria-current')\n      }\n      item.toggleAttribute('disabled', isLast)\n\n      // Hand the separator down as a property rather than appending it to the\n      // item's light DOM. The item renders it as the fallback of its own\n      // `separator` slot, so the children the consumer wrote stay untouched —\n      // appending here corrupts hydration in SSR frameworks that own that DOM\n      // (React discards the server markup and re-renders the whole tree).\n      // An item that carries its own `[slot=\"separator\"]` still wins, because\n      // slotted content always takes precedence over slot fallback content.\n      item.inheritedSeparator = isLast ? undefined : this.cloneSeparator()\n    })\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        aria-label=\"${ifDefined(this.ariaLabel) || ''}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy) || ''}\"\n        class=\"${clsx('breadcrumb')}\">\n        <ol class=\"breadcrumb__list\" part=\"list\">\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </ol>\n      </nav>\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\"> <span>/</span> </slot>\n      </span>\n    `\n  }\n}\n"],"names":["_DapDSBreadcrumb","DdsElement","_a","items","el","DapDSBreadcrumbItem","item","index","isLast","html","ifDefined","clsx","unsafeCSS","styles","DapDSBreadcrumb","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAW;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAYwC,KAAA,UAAA,UAGA,KAAA,SAAA,IAMtC,KAAQ,eAAsC,CAAC;AAAA,EAAA;AAAA,EAGrC,eAAqB;;AAIzB,KAAAC,IAAA,KAAK,gBAAL,QAAAA,EAAkB,iBAAiB,EAAE,SAAS,GAAK,GAAG,UACxD,KAAK,uBAAuB;AAAA,EAC9B;AAAA,EAGM,iBAAiB;AAKhB,WAJW,KAAK,cAAc,iBAAiB;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EAAE,CAAC,EAEa,UAAU,EAAI;AAAA,EAAA;AAAA,EAGzB,mBAAyB;AAC/B,IAAI,KAAK,oBACP,aAAa,KAAK,gBAAgB,GAG/B,KAAA,mBAAmB,OAAO,WAAW,MAAM;AAC9C,WAAK,uBAAuB;AAAA,OAC3B,EAAE;AAAA,EAAA;AAAA,EAGC,yBAA+B;AACrC,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,YAAY,iBAAiB,EAAE,SAAS,GAAM,CAAA;AAAA,IAAA,EACnD;AAAA,MACA,CAACC,MAAkCA,aAAcC;AAAA,IACnD;AAOA,KAHEF,EAAM,WAAW,KAAK,aAAa,UACnCA,EAAM,KAAK,CAACG,GAAMC,MAAUD,MAAS,KAAK,aAAaC,CAAK,CAAC,OAI/D,KAAK,eAAeJ,GAEdA,EAAA,QAAQ,CAACG,GAAMC,MAAU;AACvB,YAAAC,IAASD,MAAUJ,EAAM,SAAS;AAExC,UAAI,KAAK,UAAUI,MAAU,KAAK,CAACC,GAAQ;AACzC,QAAAF,EAAK,MAAM,UAAU;AACrB;AAAA,MAAA;AAEA,QAAAA,EAAK,MAAM,UAAU;AAGvB,MAAAA,EAAK,gBAAgB,YAAY,KAAK,YAAY,UAAU,GAC5DA,EAAK,UAAU,KAAK,SAChBE,IACGF,EAAA,aAAa,gBAAgB,MAAM,IAExCA,EAAK,gBAAgB,cAAc,GAEhCA,EAAA,gBAAgB,YAAYE,CAAM,GASvCF,EAAK,qBAAqBE,IAAS,SAAY,KAAK,eAAe;AAAA,IAAA,CACpE;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,sBAGWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,2BAC1BA,EAAU,KAAK,cAAc,KAAK,EAAE;AAAA,iBAC9CC,EAAK,YAAY,CAAC;AAAA;AAAA,+BAEJ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQpD;AAhHEX,EAAO,UAAU,qBAEDA,EAAA,SAASY,EAAUC,CAAM;AAH3C,IAAqBC,IAArBd;AAKiBe,EAAA;AAAA,EAAdC,EAAM,MAAM;AAAA,GALMF,EAKJ,WAAA,aAAA;AAEkBC,EAAA;AAAA,EAAhCC,EAAM,wBAAwB;AAAA,GAPZF,EAOc,WAAA,eAAA;AAKLC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;AAGCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRH,EAeU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GAlBrCH,EAmBnB,WAAA,gBAAA;"}
+{"version":3,"file":"breadcrumb.component.js","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.component'\nimport styles from './breadcrumb.scss?inline'\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 */\nexport default class DapDSBreadcrumb extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb'\n\n  static readonly styles = unsafeCSS(styles)\n  /** @ignore */\n  @query('slot') defaultSlot!: HTMLSlotElement\n  /** @ignore */\n  @query('slot[name=\"separator\"]') separatorSlot!: HTMLSlotElement\n\n  /* Variant of the breadcrumb\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String }) variant = 'normal'\n\n  /** Mobile version of the breadcrumb */\n  @property({ type: Boolean }) mobile = false\n\n  /** The aria-labelledby of the breadcrumb */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  private _cachedItems: DapDSBreadcrumbItem[] = []\n  private _debounceTimeout?: number\n\n  protected firstUpdated(): void {\n    // On SSR hydration `slotchange` does not fire, so the separators (injected\n    // imperatively into the slotted items) are never added — the breadcrumb\n    // renders without its `/`s. Resolve once here if items are already assigned.\n    if (this.defaultSlot?.assignedElements({ flatten: true }).length) {\n      this._updateBreadcrumbItems()\n    }\n  }\n\n  private cloneSeparator() {\n    const separator = this.separatorSlot.assignedElements({\n      flatten: true,\n    })[0] as HTMLElement\n\n    return separator.cloneNode(true) as HTMLElement\n  }\n\n  private handleSlotChange(): void {\n    if (this._debounceTimeout) {\n      clearTimeout(this._debounceTimeout)\n    }\n\n    this._debounceTimeout = window.setTimeout(() => {\n      this._updateBreadcrumbItems()\n    }, 16) // One frame delay for batching\n  }\n\n  private _updateBreadcrumbItems(): void {\n    const items = Array.from(\n      this.defaultSlot.assignedElements({ flatten: true }),\n    ).filter(\n      (el): el is DapDSBreadcrumbItem => el instanceof DapDSBreadcrumbItem,\n    )\n\n    // Check if items have actually changed to avoid unnecessary work\n    const itemsChanged =\n      items.length !== this._cachedItems.length ||\n      items.some((item, index) => item !== this._cachedItems[index])\n\n    if (!itemsChanged) return\n\n    this._cachedItems = items\n\n    items.forEach((item, index) => {\n      const isLast = index === items.length - 1\n\n      if (this.mobile && index !== 0 && !isLast) {\n        item.style.display = 'none'\n        return\n      } else {\n        item.style.display = ''\n      }\n\n      item.toggleAttribute('inverted', this.variant === 'inverted')\n      item.variant = this.variant\n      if (isLast) {\n        item.setAttribute('aria-current', 'page')\n      } else {\n        item.removeAttribute('aria-current')\n      }\n      item.toggleAttribute('disabled', isLast)\n\n      // Hand the separator down as a property rather than appending it to the\n      // item's light DOM. The item renders it as the fallback of its own\n      // `separator` slot, so the children the consumer wrote stay untouched —\n      // appending here corrupts hydration in SSR frameworks that own that DOM\n      // (React discards the server markup and re-renders the whole tree).\n      // An item that carries its own `[slot=\"separator\"]` still wins, because\n      // slotted content always takes precedence over slot fallback content.\n      item.inheritedSeparator = isLast ? undefined : this.cloneSeparator()\n    })\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        aria-label=\"${ifDefined(this.ariaLabel) || ''}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy) || ''}\"\n        class=\"${clsx('breadcrumb')}\">\n        <ol class=\"breadcrumb__list\" part=\"list\">\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </ol>\n      </nav>\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\"> <span>/</span> </slot>\n      </span>\n    `\n  }\n}\n"],"names":["_DapDSBreadcrumb","DdsElement","_a","items","el","DapDSBreadcrumbItem","item","index","isLast","html","ifDefined","clsx","unsafeCSS","styles","DapDSBreadcrumb","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAW;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAYwC,KAAA,UAAA,UAGA,KAAA,SAAA,IAMtC,KAAQ,eAAsC,CAAC;AAAA,EAAA;AAAA,EAGrC,eAAqB;;AAIzB,KAAAC,IAAA,KAAK,gBAAL,QAAAA,EAAkB,iBAAiB,EAAE,SAAS,GAAK,GAAG,UACxD,KAAK,uBAAuB;AAAA,EAC9B;AAAA,EAGM,iBAAiB;AAKhB,WAJW,KAAK,cAAc,iBAAiB;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EAAE,CAAC,EAEa,UAAU,EAAI;AAAA,EAAA;AAAA,EAGzB,mBAAyB;AAC/B,IAAI,KAAK,oBACP,aAAa,KAAK,gBAAgB,GAG/B,KAAA,mBAAmB,OAAO,WAAW,MAAM;AAC9C,WAAK,uBAAuB;AAAA,OAC3B,EAAE;AAAA,EAAA;AAAA,EAGC,yBAA+B;AACrC,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,YAAY,iBAAiB,EAAE,SAAS,GAAM,CAAA;AAAA,IAAA,EACnD;AAAA,MACA,CAACC,MAAkCA,aAAcC;AAAA,IACnD;AAOA,KAHEF,EAAM,WAAW,KAAK,aAAa,UACnCA,EAAM,KAAK,CAACG,GAAMC,MAAUD,MAAS,KAAK,aAAaC,CAAK,CAAC,OAI/D,KAAK,eAAeJ,GAEdA,EAAA,QAAQ,CAACG,GAAMC,MAAU;AACvB,YAAAC,IAASD,MAAUJ,EAAM,SAAS;AAExC,UAAI,KAAK,UAAUI,MAAU,KAAK,CAACC,GAAQ;AACzC,QAAAF,EAAK,MAAM,UAAU;AACrB;AAAA,MAAA;AAEA,QAAAA,EAAK,MAAM,UAAU;AAGvB,MAAAA,EAAK,gBAAgB,YAAY,KAAK,YAAY,UAAU,GAC5DA,EAAK,UAAU,KAAK,SAChBE,IACGF,EAAA,aAAa,gBAAgB,MAAM,IAExCA,EAAK,gBAAgB,cAAc,GAEhCA,EAAA,gBAAgB,YAAYE,CAAM,GASvCF,EAAK,qBAAqBE,IAAS,SAAY,KAAK,eAAe;AAAA,IAAA,CACpE;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,sBAGWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,2BAC1BA,EAAU,KAAK,cAAc,KAAK,EAAE;AAAA,iBAC9CC,EAAK,YAAY,CAAC;AAAA;AAAA,+BAEJ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQpD;AAhHEX,EAAO,UAAU,qBAEDA,EAAA,SAASY,EAAUC,CAAM;AAH3C,IAAqBC,IAArBd;AAKiBe,EAAA;AAAA,EAAdC,EAAM,MAAM;AAAA,GALMF,EAKJ,WAAA,aAAA;AAEkBC,EAAA;AAAA,EAAhCC,EAAM,wBAAwB;AAAA,GAPZF,EAOc,WAAA,eAAA;AAKLC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;AAGCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRH,EAeU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GAlBrCH,EAmBnB,WAAA,gBAAA;"}

package/dist/components/calendar/calendar.component.d.ts

@@ -26,6 +26,9 @@ import { default as DapDSCalendarCell } from './calendar-cell.component';
  * @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/components/calendar/calendar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.component.js","sources":["../../../src/components/calendar/calendar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAll, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsExpandUpDownFill from '../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './calendar.scss?inline'\nimport DapDSCalendarCell from './calendar-cell.component'\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 */\nexport default class DapDSCalendar extends DdsElement {\n  static tagName = 'dap-ds-calendar'\n\n  static dependencies = {\n    'dap-ds-calendar-cell': DapDSCalendarCell,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-select': DapDSSelect,\n    'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFill,\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  @queryAll('dap-ds-calendar-cell:not([header])')\n  private readonly cells: NodeListOf<DapDSCalendarCell>\n\n  @query('#monthSelect')\n  private readonly monthSelect: DapDSSelect\n\n  /** The mode of the calendar - single date or range selection.\n   * @type {'single' | 'range'}\n   * @default 'single'\n   */\n  @property({ reflect: true }) mode: 'single' | 'range' = 'single'\n\n  /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.*/\n  @property({ type: Boolean }) hideAdjacentMonths: boolean = false\n\n  /** The value of the calendar.\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) value?: Dayjs\n\n  /** The start date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeStart?: Dayjs\n\n  /** The end date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeEnd?: Dayjs\n\n  /** The current visible date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs()\n   */\n  @property({ attribute: false }) currentDate = dayjs()\n\n  /** The minimum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().subtract(50, 'year')\n   */\n  @property({ attribute: false }) minDate = dayjs().subtract(50, 'year')\n\n  /** The maximum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().add(50, 'year')\n   */\n  @property({ attribute: false }) maxDate = dayjs().add(50, 'year')\n\n  /** The function to determine if the date is disabled.\n   * @type {Function}\n   * @default () => false\n   */\n  @property({ attribute: false }) disabledDate = (date: Dayjs) => {\n    return !date\n  }\n\n  /** The locale of the calendar.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  /** `data-testid` for the previous-month button. */\n  @property() prevButtonTestId = 'calendar-prev-button'\n\n  /** `data-testid` for the next-month button. */\n  @property() nextButtonTestId = 'calendar-next-button'\n\n  @state() private _currentCell: DapDSCalendarCell\n  @state() private _yearOptionsLoaded = false\n\n  /** Locale-aware month/weekday data. Derived from `this.locale` (a reactive\n   * property Lit sets from the attribute during SSR) so the weekday/month names\n   * are correct in the SERVER render. The old approach set this field only from\n   * `connectedCallback`/`attributeChangedCallback`, neither of which takes effect\n   * on the server, so SSR rendered English names that then mismatched the\n   * Hungarian client hydration render. */\n  private get instanceLocalData() {\n    return dayjs()\n      .locale(this.locale || dayjs.locale())\n      .localeData()\n  }\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    if (!dayjs.isDayjs(this.currentDate)) {\n      this.currentDate = dayjs(this.currentDate)\n    }\n\n    if (this.locale) {\n      this.currentDate = dayjs(this.currentDate).locale(this.locale)\n      // Remove requestUpdate() - let Lit handle the update cycle\n    }\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  get startDate() {\n    if (dayjs.isDayjs(this.currentDate)) {\n      return dayjs(this.currentDate.toDate())\n        .locale(this.locale)\n        .startOf('month')\n    }\n    return dayjs(this.currentDate).locale(this.locale).startOf('month')\n  }\n\n  get endDate() {\n    return dayjs(this.currentDate).locale(this.locale).endOf('month')\n  }\n\n  get shouldHideAdjacentMonths() {\n    // If explicitly set, use that value\n    if (this.mode === 'range') {\n      return true\n    }\n    // Default: false for single mode, true for range mode\n    return this.hideAdjacentMonths\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    const documentElementObserver = new MutationObserver(\n      this.updateLocaleFromHtml,\n    )\n\n    documentElementObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir', 'lang'],\n    })\n\n    this.setValue(this.value, false)\n\n    // Load year options after initial render to improve startup performance\n    // but ensure they're available for user interaction\n    queueMicrotask(() => this.loadYearOptions())\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      this.setValue(this.value, false)\n    }\n\n    if (_changedProperties.has('locale')) {\n      // The month select's displayed (collapsed) label is derived from its\n      // slotted option-item text, which we relabel on locale change. Relabeling\n      // existing option text nodes does NOT fire `slotchange`, and the select's\n      // own `value` is unchanged, so it won't re-render on its own — its trigger\n      // keeps the previous language's month name even though the options are\n      // correct. Force it to re-read the now-localized selected option text.\n      // (The year select shows a locale-independent number, so it needs nothing.)\n      this.monthSelect?.requestUpdate()\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, _old, value)\n\n    if (name === 'locale') {\n      this.updateLocale(value)\n    }\n  }\n\n  private readonly updateLocale = (locale?: string | null) => {\n    if (!locale) {\n      this.locale = dayjs.locale()\n    } else {\n      this.locale = locale\n    }\n    // Re-render so the month/year options pick up the new locale. The options\n    // are declared in the template (getAllowedMonths / year range), so we let\n    // Lit re-render them declaratively instead of imperatively removing and\n    // re-creating <dap-ds-option-item> nodes — imperative DOM surgery on\n    // template-managed nodes breaks Lit hydration under SSR (the month/year\n    // selects then render blank even though the value is set).\n    this.requestUpdate()\n  }\n\n  private readonly updateLocaleFromHtml = (mutationList: any) => {\n    this.updateLocale(mutationList[0].target[mutationList[0].attributeName])\n  }\n\n  setValue(value?: Dayjs, setFocus = true) {\n    if (value) {\n      if (\n        this.isOutOfRange(\n          dayjs(this.currentDate).locale(this.locale),\n          dayjs(value),\n        )\n      ) {\n        this.setToFirstDayOfMonth()\n      } else {\n        const selectedCell = this.getCellByDate(dayjs(value))\n        this.setCurrentCell(selectedCell!, setFocus)\n      }\n    } else if (\n      this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), dayjs())\n    ) {\n      this.setToFirstAllowedDayOfMonth()\n    } else {\n      this.setToToday()\n    }\n  }\n\n  private readonly getWeeksInMonth = (date: Dayjs) => {\n    const days = date.daysInMonth()\n    const weekday = date.weekday()\n\n    return Math.ceil((days + weekday) / 7)\n  }\n\n  private loadYearOptions() {\n    if (!this._yearOptionsLoaded) {\n      this._yearOptionsLoaded = true\n      // Immediate update for better UX\n      this.requestUpdate()\n    }\n  }\n\n  isOutOfRange(currentDate: Dayjs, date: Dayjs) {\n    return !dayjs(currentDate).locale(this.locale).isSame(date, 'month')\n  }\n\n  isToday(date: Dayjs) {\n    return date.isSame(new Date(), 'day')\n  }\n\n  isSelected(date: Dayjs) {\n    if (this.mode === 'range') {\n      return this.isRangeStart(date) || this.isRangeEnd(date)\n    }\n\n    if (!this.value) {\n      return false\n    }\n\n    return date.isSame(this.value, 'day')\n  }\n\n  isRangeStart(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart) {\n      return false\n    }\n    return date.isSame(this.rangeStart, 'day')\n  }\n\n  isRangeEnd(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeEnd) {\n      return false\n    }\n    return date.isSame(this.rangeEnd, 'day')\n  }\n\n  isInRange(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart || !this.rangeEnd) {\n      return false\n    }\n    return (\n      date.isAfter(this.rangeStart, 'day') &&\n      date.isBefore(this.rangeEnd, 'day')\n    )\n  }\n\n  getDatesInWeek(week: number, from: Dayjs) {\n    let date = from.startOf('week').add(week, 'week')\n    const dates: Dayjs[] = []\n\n    while (dates.length < 7) {\n      dates.push(date)\n      const nextDate = date.add(1, 'day')\n      if (date.isSame(from.endOf('month'))) {\n        break\n      }\n      date = nextDate\n    }\n\n    return dates\n  }\n\n  isDateInAllowedRange(date: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    return !date.isBefore(minDate, 'day') && !date.isAfter(maxDate, 'day')\n  }\n\n  isMonthInAllowedRange(year: number, month: number) {\n    const monthStart = dayjs(new Date(year, month, 1)).locale(this.locale)\n    const monthEnd = monthStart.endOf('month')\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n\n    // A month is allowed if it intersects the [minDate, maxDate] range.\n    return (\n      !monthEnd.isBefore(minDate, 'day') && !monthStart.isAfter(maxDate, 'day')\n    )\n  }\n\n  isDateInAllowedRangeByDate(year: number, month: number, date: number) {\n    return this.isDateInAllowedRange(dayjs(new Date(year, month, date)))\n  }\n\n  getAllowedMonths(currentDate: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    const minYear = minDate.year()\n    const maxYear = maxDate.year()\n    const minMonth = minDate.month()\n    const maxMonth = maxDate.month()\n\n    if (currentDate.year() === minYear && currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth - minMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === minYear) {\n      return Array.from(\n        { length: 12 - minMonth },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i],\n      )\n    }\n\n    const months = Array.from(\n      { length: 12 },\n      (_, i) => this.instanceLocalData.months()[i],\n    )\n\n    return months\n  }\n\n  setMonth(month: number) {\n    if (\n      month < 0 &&\n      this.isMonthInAllowedRange(dayjs(this.currentDate).year() - 1, 11)\n    ) {\n      this.setYear(dayjs(this.currentDate).locale(this.locale).year() - 1)\n      this.currentDate = this.currentDate.locale(this.locale).set('month', 11)\n      return\n    }\n\n    if (\n      month > 11 &&\n      this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year() + 1,\n        0,\n      )\n    ) {\n      this.setYear(dayjs(this.currentDate).year() + 1)\n      this.currentDate = this.currentDate.set('month', 0)\n      return\n    }\n\n    if (\n      !this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year(),\n        month,\n      )\n    ) {\n      return\n    }\n\n    this.currentDate = dayjs(this.currentDate)\n      .locale(this.locale)\n      .set('month', month)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setDay(day: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    if (!this.isDateInAllowedRangeByDate(date.year(), date.month(), day)) {\n      return\n    }\n\n    this.currentDate = date.set('date', day)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setYear(year: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    this.currentDate = date.set('year', year)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setSelectedDate(date: Dayjs) {\n    if (this.disabledDate(date)) {\n      return\n    }\n\n    if (!this.isDateInAllowedRange(date)) {\n      return\n    }\n\n    if (this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), date)) {\n      this.setMonth(date.month())\n    }\n\n    if (this.mode === 'range') {\n      // Range selection logic\n      if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {\n        // Start new range selection\n        this.rangeStart = date\n        this.rangeEnd = undefined\n        // Update currentDate to show the start date's month\n        this.currentDate = dayjs(date).locale(this.locale)\n      } else if (this.rangeStart && !this.rangeEnd) {\n        // Complete range selection\n        if (date.isBefore(this.rangeStart)) {\n          // If end date is before start date, swap them\n          this.rangeEnd = this.rangeStart\n          this.rangeStart = date\n        } else {\n          this.rangeEnd = date\n        }\n\n        // Update currentDate to show the start date's month in the first calendar\n        this.currentDate = dayjs(this.rangeStart).locale(this.locale)\n\n        // Emit range-change event\n        this.emit('dds-range-change', {\n          startDate: this.rangeStart,\n          endDate: this.rangeEnd,\n        })\n      }\n\n      this.setCurrentCell(this.getCellByDate(date)!)\n    } else {\n      // Single date selection\n      this.value = date\n      this.setCurrentCell(this.getCellByDate(date)!)\n\n      this.emit('dds-change', {\n        value: this.value,\n        type: 'value',\n      })\n    }\n  }\n\n  getFirstDayOfMonthCell() {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(this.startDate, 'day')\n    })\n  }\n\n  getCellByDate(date: Dayjs) {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(date, 'day')\n    })\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    event.preventDefault()\n    const element = event.composedPath()[0]\n    if (element instanceof DapDSCalendarCell) {\n      switch (event.code) {\n        case 'ArrowLeft':\n          this.focusNextCell(element, -1)\n          break\n        case 'ArrowRight':\n          this.focusNextCell(element, 1)\n          break\n        case 'ArrowUp':\n          this.focusNextCell(element, -7)\n          break\n        case 'ArrowDown':\n          this.focusNextCell(element, 7)\n          break\n        case 'PageUp':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() - 1)\n          break\n        case 'PageDown':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() + 1)\n          break\n        case 'Enter':\n          this.setSelectedDate(element.value)\n          break\n        case 'Escape':\n          this.emit('dds-close')\n          break\n      }\n    } else if (event.key === 'Escape') {\n      this.emit('dds-close')\n    }\n  }\n\n  setCurrentCell(cell: DapDSCalendarCell, setFocus = true) {\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '-1')\n    }\n    this._currentCell = cell\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '0')\n    }\n\n    if (setFocus && this._currentCell) {\n      this.setFocusToCurrentCell()\n    }\n  }\n\n  setFocusToCurrentCell() {\n    this._currentCell.focus()\n  }\n\n  setToFirstDayOfMonth() {\n    const firstDayofMonth = this.getFirstDayOfMonthCell()\n    firstDayofMonth?.setAttribute('tabindex', '0')\n    this._currentCell = firstDayofMonth!\n  }\n\n  setToToday() {\n    const today = this.getCellByDate(dayjs())\n    today?.setAttribute('tabindex', '0')\n    this._currentCell = today!\n  }\n\n  setToFirstAllowedDayOfMonth(currentDate = this.currentDate) {\n    const firstAllowedDay = this.getCellByDate(\n      dayjs(currentDate).locale(this.locale).startOf('month'),\n    )\n    firstAllowedDay?.setAttribute('tabindex', '0')\n    this._currentCell = firstAllowedDay!\n  }\n\n  focusNextCell(element: DapDSCalendarCell, offset: number) {\n    const index = [...this.cells].indexOf(element)\n    const nextIndex = index + offset\n    const currentMonth = dayjs(this.currentDate).locale(this.locale).month()\n\n    if (nextIndex >= 0 && nextIndex < this.cells.length) {\n      const cell = this.cells[nextIndex]\n      this.setCurrentCell(cell)\n    } else if (nextIndex < 0) {\n      this.setMonth(currentMonth - 1)\n\n      if (this.currentDate.month() < currentMonth) {\n        this.updateComplete.then(() => {\n          const lastDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .endOf('month')\n          const lastDayCell = this.getCellByDate(lastDay)\n          this.setCurrentCell(lastDayCell!)\n        })\n      }\n    } else if (nextIndex >= this.cells.length) {\n      this.setMonth(currentMonth + 1)\n\n      if (this.currentDate.month() > currentMonth) {\n        this.updateComplete.then(() => {\n          const firstDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .startOf('month')\n          const firstDayCell = this.getCellByDate(firstDay)\n          this.setCurrentCell(firstDayCell!)\n        })\n      }\n    }\n  }\n\n  public captureFocus(): void {\n    this.focus()\n    this.setFocusToCurrentCell()\n  }\n\n  private getWeekdaysMin() {\n    const firstDay = this.instanceLocalData.firstDayOfWeek()\n    const weekdays = this.instanceLocalData.weekdaysMin()\n    return weekdays.slice(firstDay).concat(weekdays.slice(0, firstDay))\n  }\n\n  renderCalendarGridHeader() {\n    return html`<thead part=\"calendar-grid-header\" class=\"calendar-grid-header\">\n      <tr class=\"calendar-grid-header-row\">\n        ${this.getWeekdaysMin().map(\n          day =>\n            html`<th class=\"calendar-cell\">\n              <dap-ds-calendar-cell\n                header\n                part=\"calendar-grid-header-cell\"\n                exportparts=\"base: calendar-grid-header-cell-base\"\n                locale=${this.locale}\n                >${day}</dap-ds-calendar-cell\n              >\n            </th>`,\n        )}\n      </tr>\n    </thead>`\n  }\n\n  renderCalendarGridBody(date: Dayjs) {\n    return html`<tbody part=\"body\" class=\"calendar-grid-body\">\n      ${[\n        ...new Array(\n          this.getWeeksInMonth(date || dayjs().locale(this.locale)),\n        ).keys(),\n      ].map(\n        week =>\n          html`<tr class=\"calendar-grid-row\">\n            ${this.getDatesInWeek(week, date).map(d => {\n              const isOutOfRange = this.isOutOfRange(date, d)\n              const isDisabled =\n                !this.isDateInAllowedRange(d) || this.disabledDate(d)\n\n              const isRangeStart = this.isRangeStart(d)\n              const isRangeEnd = this.isRangeEnd(d)\n              const isInRange = this.isInRange(d)\n\n              // Hide dates from adjacent months if shouldHideAdjacentMonths is true\n              if (this.shouldHideAdjacentMonths && isOutOfRange) {\n                return html`<td\n                  role=\"gridcell\"\n                  class=\"${clsx('calendar-cell calendar-cell--empty')}\"></td>`\n              }\n\n              return html`<td\n                role=\"gridcell\"\n                class=\"${clsx('calendar-cell')}\"\n                aria-disabled=${isDisabled}>\n                <dap-ds-calendar-cell\n                  part=\"calendar-grid-cell\"\n                  exportparts=\"base: calendar-grid-cell-base, today-mark: calendar-grid-cell-today-mark\"\n                  ?outofrange=${isOutOfRange}\n                  ?today=${this.isToday(d)}\n                  ?selected=${this.isSelected(d)}\n                  ?rangestart=${isRangeStart}\n                  ?rangeend=${isRangeEnd}\n                  ?inrange=${isInRange}\n                  .value=${d}\n                  locale=${this.locale}\n                  ?disabledDay=${isDisabled}\n                  role=\"button\"\n                  aria-pressed=${this.isSelected(d)}\n                  aria-disabled=${isDisabled}\n                  @click=${() => !isDisabled && this.setSelectedDate(d)}\n                  @keydown=${this.handleKeyDown}\n                  >${d.date()}</dap-ds-calendar-cell\n                >\n              </td>`\n            })}\n          </tr> `,\n      )}\n    </tbody>`\n  }\n\n  renderCalendarHeader() {\n    return html`\n      <header\n        part=\"calendar-header\"\n        class=\"calendar__header\"\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-prev\"\n          class=\"calendar__header-button-prev\"\n          data-testid=${this.prevButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-left-l-line\"\n          @keydown=${this.handleKeyDown}\n          aria-label=${t('calendar.prevMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(this.currentDate.month() - 1)\n          }}>\n        </dap-ds-icon-button>\n        <dap-ds-select\n          part=\"calendar-header-year-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-year-select',\n          )}\n          @dds-keydown=${this.handleKeyDown}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.year', { lng: this.locale })}\n          value=${dayjs(this.currentDate).year()}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).year()\n            ) {\n              this.currentDate = dayjs(this.currentDate)\n                .locale(this.locale)\n                .set('year', parseInt(e.detail.value))\n              // Remove requestUpdate() - currentDate property change will trigger update\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this._yearOptionsLoaded\n            ? [\n                ...new Array(\n                  dayjs(this.maxDate).locale(this.locale).year() -\n                    dayjs(this.minDate).locale(this.locale).year() +\n                    1,\n                ).keys(),\n              ].map(\n                year =>\n                  html`<dap-ds-option-item\n                    value=${dayjs(this.minDate).locale(this.locale).year() +\n                    year}>\n                    ${dayjs(this.minDate).locale(this.locale).year() + year}\n                  </dap-ds-option-item>`,\n              )\n            : html`<dap-ds-option-item value=${dayjs(this.currentDate).year()}>\n                ${dayjs(this.currentDate).year()}\n              </dap-ds-option-item>`}\n        </dap-ds-select>\n        <dap-ds-select\n          id=\"monthSelect\"\n          part=\"calendar-header-month-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-month-select',\n          )}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.month', { lng: this.locale })}\n          value=${dayjs(this.currentDate).locale(this.locale).month() + 1}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).month() + 1\n            ) {\n              this.setMonth(parseInt(e.detail.value) - 1)\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this.getAllowedMonths(\n            dayjs(this.currentDate).locale(this.locale),\n          ).map(\n            month =>\n              html`<dap-ds-option-item\n                value=${this.instanceLocalData.months().indexOf(month) + 1}>\n                ${month}\n              </dap-ds-option-item>`,\n          )}\n        </dap-ds-select>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-next\"\n          class=\"calendar__header-button-next\"\n          data-testid=${this.nextButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-right-l-line\"\n          aria-label=${t('calendar.nextMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(\n              dayjs(this.currentDate).locale(this.locale).month() + 1,\n            )\n          }}>\n        </dap-ds-icon-button>\n      </header>\n    `\n  }\n\n  render() {\n    if (this.mode === 'range') {\n      // Render two calendars side-by-side for range mode\n      const currentMonth = dayjs(this.currentDate).locale(this.locale)\n      const nextMonth = currentMonth.add(1, 'month')\n\n      return html` <div class=\"calendar calendar--range\">\n        ${this.renderCalendarHeader()}\n        <div class=\"calendar__months\">\n          <div class=\"calendar__month\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeStart ? dayjs(this.rangeStart).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(this.startDate)}\n            </table>\n          </div>\n          <div class=\"calendar__month calendar__month--next\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeEnd ? dayjs(this.rangeEnd).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(nextMonth.startOf('month'))}\n            </table>\n          </div>\n        </div>\n      </div>`\n    }\n\n    // Single date mode\n    return html` <div class=\"calendar\">\n      ${this.renderCalendarHeader()}\n      <table\n        part=\"base\"\n        class=\"calendar__grid\"\n        role=\"grid\"\n        aria-label=${`${this.value ? dayjs(this.value).locale(this.locale).format('LL, dddd') : ''}`}>\n        ${this.renderCalendarGridHeader()}\n        ${this.renderCalendarGridBody(this.startDate)}\n      </table>\n    </div>`\n  }\n}\n"],"names":["_DapDSCalendar","DdsElement","dayjs","date","locale","mutationList","days","weekday","__async","__superGet","_changedProperties","_a","name","_old","value","setFocus","selectedCell","currentDate","week","from","dates","nextDate","minDate","maxDate","year","month","monthStart","monthEnd","minYear","maxYear","minMonth","maxMonth","_","i","day","cell","event","element","DapDSCalendarCell","firstDayofMonth","today","firstAllowedDay","offset","nextIndex","currentMonth","lastDay","lastDayCell","firstDay","firstDayCell","weekdays","html","d","isOutOfRange","isDisabled","isRangeStart","isRangeEnd","isInRange","clsx","t","nextMonth","DapDSIconButton","DapDSSelect","ArrowsExpandUpDownFill","DapDSOptionItem","unsafeCSS","styles","DapDSCalendar","__decorateClass","queryAll","query","property","state"],"mappings":"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"}
+{"version":3,"file":"calendar.component.js","sources":["../../../src/components/calendar/calendar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAll, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsExpandUpDownFill from '../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './calendar.scss?inline'\nimport DapDSCalendarCell from './calendar-cell.component'\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 */\nexport default class DapDSCalendar extends DdsElement {\n  static tagName = 'dap-ds-calendar'\n\n  static dependencies = {\n    'dap-ds-calendar-cell': DapDSCalendarCell,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-select': DapDSSelect,\n    'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFill,\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  @queryAll('dap-ds-calendar-cell:not([header])')\n  private readonly cells: NodeListOf<DapDSCalendarCell>\n\n  @query('#monthSelect')\n  private readonly monthSelect: DapDSSelect\n\n  /** The mode of the calendar - single date or range selection.\n   * @type {'single' | 'range'}\n   * @default 'single'\n   */\n  @property({ reflect: true }) mode: 'single' | 'range' = 'single'\n\n  /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.*/\n  @property({ type: Boolean }) hideAdjacentMonths: boolean = false\n\n  /** The value of the calendar.\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) value?: Dayjs\n\n  /** The start date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeStart?: Dayjs\n\n  /** The end date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeEnd?: Dayjs\n\n  /** The current visible date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs()\n   */\n  @property({ attribute: false }) currentDate = dayjs()\n\n  /** The minimum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().subtract(50, 'year')\n   */\n  @property({ attribute: false }) minDate = dayjs().subtract(50, 'year')\n\n  /** The maximum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().add(50, 'year')\n   */\n  @property({ attribute: false }) maxDate = dayjs().add(50, 'year')\n\n  /** The function to determine if the date is disabled.\n   * @type {Function}\n   * @default () => false\n   */\n  @property({ attribute: false }) disabledDate = (date: Dayjs) => {\n    return !date\n  }\n\n  /** The locale of the calendar.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  /** `data-testid` for the previous-month button. */\n  @property() prevButtonTestId = 'calendar-prev-button'\n\n  /** `data-testid` for the next-month button. */\n  @property() nextButtonTestId = 'calendar-next-button'\n\n  @state() private _currentCell: DapDSCalendarCell\n  @state() private _yearOptionsLoaded = false\n\n  /** Locale-aware month/weekday data. Derived from `this.locale` (a reactive\n   * property Lit sets from the attribute during SSR) so the weekday/month names\n   * are correct in the SERVER render. The old approach set this field only from\n   * `connectedCallback`/`attributeChangedCallback`, neither of which takes effect\n   * on the server, so SSR rendered English names that then mismatched the\n   * Hungarian client hydration render. */\n  private get instanceLocalData() {\n    return dayjs()\n      .locale(this.locale || dayjs.locale())\n      .localeData()\n  }\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    if (!dayjs.isDayjs(this.currentDate)) {\n      this.currentDate = dayjs(this.currentDate)\n    }\n\n    if (this.locale) {\n      this.currentDate = dayjs(this.currentDate).locale(this.locale)\n      // Remove requestUpdate() - let Lit handle the update cycle\n    }\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  get startDate() {\n    if (dayjs.isDayjs(this.currentDate)) {\n      return dayjs(this.currentDate.toDate())\n        .locale(this.locale)\n        .startOf('month')\n    }\n    return dayjs(this.currentDate).locale(this.locale).startOf('month')\n  }\n\n  get endDate() {\n    return dayjs(this.currentDate).locale(this.locale).endOf('month')\n  }\n\n  get shouldHideAdjacentMonths() {\n    // If explicitly set, use that value\n    if (this.mode === 'range') {\n      return true\n    }\n    // Default: false for single mode, true for range mode\n    return this.hideAdjacentMonths\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    const documentElementObserver = new MutationObserver(\n      this.updateLocaleFromHtml,\n    )\n\n    documentElementObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir', 'lang'],\n    })\n\n    this.setValue(this.value, false)\n\n    // Load year options after initial render to improve startup performance\n    // but ensure they're available for user interaction\n    queueMicrotask(() => this.loadYearOptions())\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      this.setValue(this.value, false)\n    }\n\n    if (_changedProperties.has('locale')) {\n      // The month select's displayed (collapsed) label is derived from its\n      // slotted option-item text, which we relabel on locale change. Relabeling\n      // existing option text nodes does NOT fire `slotchange`, and the select's\n      // own `value` is unchanged, so it won't re-render on its own — its trigger\n      // keeps the previous language's month name even though the options are\n      // correct. Force it to re-read the now-localized selected option text.\n      // (The year select shows a locale-independent number, so it needs nothing.)\n      this.monthSelect?.requestUpdate()\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, _old, value)\n\n    if (name === 'locale') {\n      this.updateLocale(value)\n    }\n  }\n\n  private readonly updateLocale = (locale?: string | null) => {\n    if (!locale) {\n      this.locale = dayjs.locale()\n    } else {\n      this.locale = locale\n    }\n    // Re-render so the month/year options pick up the new locale. The options\n    // are declared in the template (getAllowedMonths / year range), so we let\n    // Lit re-render them declaratively instead of imperatively removing and\n    // re-creating <dap-ds-option-item> nodes — imperative DOM surgery on\n    // template-managed nodes breaks Lit hydration under SSR (the month/year\n    // selects then render blank even though the value is set).\n    this.requestUpdate()\n  }\n\n  private readonly updateLocaleFromHtml = (mutationList: any) => {\n    this.updateLocale(mutationList[0].target[mutationList[0].attributeName])\n  }\n\n  setValue(value?: Dayjs, setFocus = true) {\n    if (value) {\n      if (\n        this.isOutOfRange(\n          dayjs(this.currentDate).locale(this.locale),\n          dayjs(value),\n        )\n      ) {\n        this.setToFirstDayOfMonth()\n      } else {\n        const selectedCell = this.getCellByDate(dayjs(value))\n        this.setCurrentCell(selectedCell!, setFocus)\n      }\n    } else if (\n      this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), dayjs())\n    ) {\n      this.setToFirstAllowedDayOfMonth()\n    } else {\n      this.setToToday()\n    }\n  }\n\n  private readonly getWeeksInMonth = (date: Dayjs) => {\n    const days = date.daysInMonth()\n    const weekday = date.weekday()\n\n    return Math.ceil((days + weekday) / 7)\n  }\n\n  private loadYearOptions() {\n    if (!this._yearOptionsLoaded) {\n      this._yearOptionsLoaded = true\n      // Immediate update for better UX\n      this.requestUpdate()\n    }\n  }\n\n  isOutOfRange(currentDate: Dayjs, date: Dayjs) {\n    return !dayjs(currentDate).locale(this.locale).isSame(date, 'month')\n  }\n\n  isToday(date: Dayjs) {\n    return date.isSame(new Date(), 'day')\n  }\n\n  isSelected(date: Dayjs) {\n    if (this.mode === 'range') {\n      return this.isRangeStart(date) || this.isRangeEnd(date)\n    }\n\n    if (!this.value) {\n      return false\n    }\n\n    return date.isSame(this.value, 'day')\n  }\n\n  isRangeStart(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart) {\n      return false\n    }\n    return date.isSame(this.rangeStart, 'day')\n  }\n\n  isRangeEnd(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeEnd) {\n      return false\n    }\n    return date.isSame(this.rangeEnd, 'day')\n  }\n\n  isInRange(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart || !this.rangeEnd) {\n      return false\n    }\n    return (\n      date.isAfter(this.rangeStart, 'day') &&\n      date.isBefore(this.rangeEnd, 'day')\n    )\n  }\n\n  getDatesInWeek(week: number, from: Dayjs) {\n    let date = from.startOf('week').add(week, 'week')\n    const dates: Dayjs[] = []\n\n    while (dates.length < 7) {\n      dates.push(date)\n      const nextDate = date.add(1, 'day')\n      if (date.isSame(from.endOf('month'))) {\n        break\n      }\n      date = nextDate\n    }\n\n    return dates\n  }\n\n  isDateInAllowedRange(date: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    return !date.isBefore(minDate, 'day') && !date.isAfter(maxDate, 'day')\n  }\n\n  isMonthInAllowedRange(year: number, month: number) {\n    const monthStart = dayjs(new Date(year, month, 1)).locale(this.locale)\n    const monthEnd = monthStart.endOf('month')\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n\n    // A month is allowed if it intersects the [minDate, maxDate] range.\n    return (\n      !monthEnd.isBefore(minDate, 'day') && !monthStart.isAfter(maxDate, 'day')\n    )\n  }\n\n  isDateInAllowedRangeByDate(year: number, month: number, date: number) {\n    return this.isDateInAllowedRange(dayjs(new Date(year, month, date)))\n  }\n\n  getAllowedMonths(currentDate: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    const minYear = minDate.year()\n    const maxYear = maxDate.year()\n    const minMonth = minDate.month()\n    const maxMonth = maxDate.month()\n\n    if (currentDate.year() === minYear && currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth - minMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === minYear) {\n      return Array.from(\n        { length: 12 - minMonth },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i],\n      )\n    }\n\n    const months = Array.from(\n      { length: 12 },\n      (_, i) => this.instanceLocalData.months()[i],\n    )\n\n    return months\n  }\n\n  setMonth(month: number) {\n    if (\n      month < 0 &&\n      this.isMonthInAllowedRange(dayjs(this.currentDate).year() - 1, 11)\n    ) {\n      this.setYear(dayjs(this.currentDate).locale(this.locale).year() - 1)\n      this.currentDate = this.currentDate.locale(this.locale).set('month', 11)\n      return\n    }\n\n    if (\n      month > 11 &&\n      this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year() + 1,\n        0,\n      )\n    ) {\n      this.setYear(dayjs(this.currentDate).year() + 1)\n      this.currentDate = this.currentDate.set('month', 0)\n      return\n    }\n\n    if (\n      !this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year(),\n        month,\n      )\n    ) {\n      return\n    }\n\n    this.currentDate = dayjs(this.currentDate)\n      .locale(this.locale)\n      .set('month', month)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setDay(day: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    if (!this.isDateInAllowedRangeByDate(date.year(), date.month(), day)) {\n      return\n    }\n\n    this.currentDate = date.set('date', day)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setYear(year: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    this.currentDate = date.set('year', year)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setSelectedDate(date: Dayjs) {\n    if (this.disabledDate(date)) {\n      return\n    }\n\n    if (!this.isDateInAllowedRange(date)) {\n      return\n    }\n\n    if (this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), date)) {\n      this.setMonth(date.month())\n    }\n\n    if (this.mode === 'range') {\n      // Range selection logic\n      if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {\n        // Start new range selection\n        this.rangeStart = date\n        this.rangeEnd = undefined\n        // Update currentDate to show the start date's month\n        this.currentDate = dayjs(date).locale(this.locale)\n      } else if (this.rangeStart && !this.rangeEnd) {\n        // Complete range selection\n        if (date.isBefore(this.rangeStart)) {\n          // If end date is before start date, swap them\n          this.rangeEnd = this.rangeStart\n          this.rangeStart = date\n        } else {\n          this.rangeEnd = date\n        }\n\n        // Update currentDate to show the start date's month in the first calendar\n        this.currentDate = dayjs(this.rangeStart).locale(this.locale)\n\n        // Emit range-change event\n        this.emit('dds-range-change', {\n          startDate: this.rangeStart,\n          endDate: this.rangeEnd,\n        })\n      }\n\n      this.setCurrentCell(this.getCellByDate(date)!)\n    } else {\n      // Single date selection\n      this.value = date\n      this.setCurrentCell(this.getCellByDate(date)!)\n\n      this.emit('dds-change', {\n        value: this.value,\n        type: 'value',\n      })\n    }\n  }\n\n  getFirstDayOfMonthCell() {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(this.startDate, 'day')\n    })\n  }\n\n  getCellByDate(date: Dayjs) {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(date, 'day')\n    })\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    event.preventDefault()\n    const element = event.composedPath()[0]\n    if (element instanceof DapDSCalendarCell) {\n      switch (event.code) {\n        case 'ArrowLeft':\n          this.focusNextCell(element, -1)\n          break\n        case 'ArrowRight':\n          this.focusNextCell(element, 1)\n          break\n        case 'ArrowUp':\n          this.focusNextCell(element, -7)\n          break\n        case 'ArrowDown':\n          this.focusNextCell(element, 7)\n          break\n        case 'PageUp':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() - 1)\n          break\n        case 'PageDown':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() + 1)\n          break\n        case 'Enter':\n          this.setSelectedDate(element.value)\n          break\n        case 'Escape':\n          this.emit('dds-close')\n          break\n      }\n    } else if (event.key === 'Escape') {\n      this.emit('dds-close')\n    }\n  }\n\n  setCurrentCell(cell: DapDSCalendarCell, setFocus = true) {\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '-1')\n    }\n    this._currentCell = cell\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '0')\n    }\n\n    if (setFocus && this._currentCell) {\n      this.setFocusToCurrentCell()\n    }\n  }\n\n  setFocusToCurrentCell() {\n    this._currentCell.focus()\n  }\n\n  setToFirstDayOfMonth() {\n    const firstDayofMonth = this.getFirstDayOfMonthCell()\n    firstDayofMonth?.setAttribute('tabindex', '0')\n    this._currentCell = firstDayofMonth!\n  }\n\n  setToToday() {\n    const today = this.getCellByDate(dayjs())\n    today?.setAttribute('tabindex', '0')\n    this._currentCell = today!\n  }\n\n  setToFirstAllowedDayOfMonth(currentDate = this.currentDate) {\n    const firstAllowedDay = this.getCellByDate(\n      dayjs(currentDate).locale(this.locale).startOf('month'),\n    )\n    firstAllowedDay?.setAttribute('tabindex', '0')\n    this._currentCell = firstAllowedDay!\n  }\n\n  focusNextCell(element: DapDSCalendarCell, offset: number) {\n    const index = [...this.cells].indexOf(element)\n    const nextIndex = index + offset\n    const currentMonth = dayjs(this.currentDate).locale(this.locale).month()\n\n    if (nextIndex >= 0 && nextIndex < this.cells.length) {\n      const cell = this.cells[nextIndex]\n      this.setCurrentCell(cell)\n    } else if (nextIndex < 0) {\n      this.setMonth(currentMonth - 1)\n\n      if (this.currentDate.month() < currentMonth) {\n        this.updateComplete.then(() => {\n          const lastDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .endOf('month')\n          const lastDayCell = this.getCellByDate(lastDay)\n          this.setCurrentCell(lastDayCell!)\n        })\n      }\n    } else if (nextIndex >= this.cells.length) {\n      this.setMonth(currentMonth + 1)\n\n      if (this.currentDate.month() > currentMonth) {\n        this.updateComplete.then(() => {\n          const firstDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .startOf('month')\n          const firstDayCell = this.getCellByDate(firstDay)\n          this.setCurrentCell(firstDayCell!)\n        })\n      }\n    }\n  }\n\n  public captureFocus(): void {\n    this.focus()\n    this.setFocusToCurrentCell()\n  }\n\n  private getWeekdaysMin() {\n    const firstDay = this.instanceLocalData.firstDayOfWeek()\n    const weekdays = this.instanceLocalData.weekdaysMin()\n    return weekdays.slice(firstDay).concat(weekdays.slice(0, firstDay))\n  }\n\n  renderCalendarGridHeader() {\n    return html`<thead part=\"calendar-grid-header\" class=\"calendar-grid-header\">\n      <tr class=\"calendar-grid-header-row\">\n        ${this.getWeekdaysMin().map(\n          day =>\n            html`<th class=\"calendar-cell\">\n              <dap-ds-calendar-cell\n                header\n                part=\"calendar-grid-header-cell\"\n                exportparts=\"base: calendar-grid-header-cell-base\"\n                locale=${this.locale}\n                >${day}</dap-ds-calendar-cell\n              >\n            </th>`,\n        )}\n      </tr>\n    </thead>`\n  }\n\n  renderCalendarGridBody(date: Dayjs) {\n    return html`<tbody part=\"body\" class=\"calendar-grid-body\">\n      ${[\n        ...new Array(\n          this.getWeeksInMonth(date || dayjs().locale(this.locale)),\n        ).keys(),\n      ].map(\n        week =>\n          html`<tr class=\"calendar-grid-row\">\n            ${this.getDatesInWeek(week, date).map(d => {\n              const isOutOfRange = this.isOutOfRange(date, d)\n              const isDisabled =\n                !this.isDateInAllowedRange(d) || this.disabledDate(d)\n\n              const isRangeStart = this.isRangeStart(d)\n              const isRangeEnd = this.isRangeEnd(d)\n              const isInRange = this.isInRange(d)\n\n              // Hide dates from adjacent months if shouldHideAdjacentMonths is true\n              if (this.shouldHideAdjacentMonths && isOutOfRange) {\n                return html`<td\n                  role=\"gridcell\"\n                  class=\"${clsx('calendar-cell calendar-cell--empty')}\"></td>`\n              }\n\n              return html`<td\n                role=\"gridcell\"\n                class=\"${clsx('calendar-cell')}\"\n                aria-disabled=${isDisabled}>\n                <dap-ds-calendar-cell\n                  part=\"calendar-grid-cell\"\n                  exportparts=\"base: calendar-grid-cell-base, today-mark: calendar-grid-cell-today-mark\"\n                  ?outofrange=${isOutOfRange}\n                  ?today=${this.isToday(d)}\n                  ?selected=${this.isSelected(d)}\n                  ?rangestart=${isRangeStart}\n                  ?rangeend=${isRangeEnd}\n                  ?inrange=${isInRange}\n                  .value=${d}\n                  locale=${this.locale}\n                  ?disabledDay=${isDisabled}\n                  role=\"button\"\n                  aria-pressed=${this.isSelected(d)}\n                  aria-disabled=${isDisabled}\n                  @click=${() => !isDisabled && this.setSelectedDate(d)}\n                  @keydown=${this.handleKeyDown}\n                  >${d.date()}</dap-ds-calendar-cell\n                >\n              </td>`\n            })}\n          </tr> `,\n      )}\n    </tbody>`\n  }\n\n  renderCalendarHeader() {\n    return html`\n      <header\n        part=\"calendar-header\"\n        class=\"calendar__header\"\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-prev\"\n          class=\"calendar__header-button-prev\"\n          data-testid=${this.prevButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-left-l-line\"\n          @keydown=${this.handleKeyDown}\n          aria-label=${t('calendar.prevMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(this.currentDate.month() - 1)\n          }}>\n        </dap-ds-icon-button>\n        <dap-ds-select\n          part=\"calendar-header-year-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-year-select',\n          )}\n          @dds-keydown=${this.handleKeyDown}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.year', { lng: this.locale })}\n          value=${dayjs(this.currentDate).year()}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).year()\n            ) {\n              this.currentDate = dayjs(this.currentDate)\n                .locale(this.locale)\n                .set('year', parseInt(e.detail.value))\n              // Remove requestUpdate() - currentDate property change will trigger update\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this._yearOptionsLoaded\n            ? [\n                ...new Array(\n                  dayjs(this.maxDate).locale(this.locale).year() -\n                    dayjs(this.minDate).locale(this.locale).year() +\n                    1,\n                ).keys(),\n              ].map(\n                year =>\n                  html`<dap-ds-option-item\n                    value=${dayjs(this.minDate).locale(this.locale).year() +\n                    year}>\n                    ${dayjs(this.minDate).locale(this.locale).year() + year}\n                  </dap-ds-option-item>`,\n              )\n            : html`<dap-ds-option-item value=${dayjs(this.currentDate).year()}>\n                ${dayjs(this.currentDate).year()}\n              </dap-ds-option-item>`}\n        </dap-ds-select>\n        <dap-ds-select\n          id=\"monthSelect\"\n          part=\"calendar-header-month-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-month-select',\n          )}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.month', { lng: this.locale })}\n          value=${dayjs(this.currentDate).locale(this.locale).month() + 1}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).month() + 1\n            ) {\n              this.setMonth(parseInt(e.detail.value) - 1)\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this.getAllowedMonths(\n            dayjs(this.currentDate).locale(this.locale),\n          ).map(\n            month =>\n              html`<dap-ds-option-item\n                value=${this.instanceLocalData.months().indexOf(month) + 1}>\n                ${month}\n              </dap-ds-option-item>`,\n          )}\n        </dap-ds-select>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-next\"\n          class=\"calendar__header-button-next\"\n          data-testid=${this.nextButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-right-l-line\"\n          aria-label=${t('calendar.nextMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(\n              dayjs(this.currentDate).locale(this.locale).month() + 1,\n            )\n          }}>\n        </dap-ds-icon-button>\n      </header>\n    `\n  }\n\n  render() {\n    if (this.mode === 'range') {\n      // Render two calendars side-by-side for range mode\n      const currentMonth = dayjs(this.currentDate).locale(this.locale)\n      const nextMonth = currentMonth.add(1, 'month')\n\n      return html` <div class=\"calendar calendar--range\">\n        ${this.renderCalendarHeader()}\n        <div class=\"calendar__months\">\n          <div class=\"calendar__month\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeStart ? dayjs(this.rangeStart).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(this.startDate)}\n            </table>\n          </div>\n          <div class=\"calendar__month calendar__month--next\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeEnd ? dayjs(this.rangeEnd).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(nextMonth.startOf('month'))}\n            </table>\n          </div>\n        </div>\n      </div>`\n    }\n\n    // Single date mode\n    return html` <div class=\"calendar\">\n      ${this.renderCalendarHeader()}\n      <table\n        part=\"base\"\n        class=\"calendar__grid\"\n        role=\"grid\"\n        aria-label=${`${this.value ? dayjs(this.value).locale(this.locale).format('LL, dddd') : ''}`}>\n        ${this.renderCalendarGridHeader()}\n        ${this.renderCalendarGridBody(this.startDate)}\n      </table>\n    </div>`\n  }\n}\n"],"names":["_DapDSCalendar","DdsElement","dayjs","date","locale","mutationList","days","weekday","__async","__superGet","_changedProperties","_a","name","_old","value","setFocus","selectedCell","currentDate","week","from","dates","nextDate","minDate","maxDate","year","month","monthStart","monthEnd","minYear","maxYear","minMonth","maxMonth","_","i","day","cell","event","element","DapDSCalendarCell","firstDayofMonth","today","firstAllowedDay","offset","nextIndex","currentMonth","lastDay","lastDayCell","firstDay","firstDayCell","weekdays","html","d","isOutOfRange","isDisabled","isRangeStart","isRangeEnd","isInRange","clsx","t","nextMonth","DapDSIconButton","DapDSSelect","ArrowsExpandUpDownFill","DapDSOptionItem","unsafeCSS","styles","DapDSCalendar","__decorateClass","queryAll","query","property","state"],"mappings":"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"}

package/dist/components/callout/callout.component.d.ts

@@ -30,6 +30,7 @@ import { default as SystemInformation2Fill } from '../icons/system/system-inform
  * @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/components/callout/callout.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.component.js","sources":["../../../src/components/callout/callout.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Alignment, BackgroundShade, CalloutVariant } from '@/common/types'\nimport {\n  normalizeStringProperty,\n  stringPropertyConverter,\n} from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemAlertFill from '../icons/system/system-alert-fill/system-alert-fill.component'\nimport SystemCheckboxCircleFill from '../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component'\nimport SystemErrorWarningFill from '../icons/system/system-error-warning-fill/system-error-warning-fill.component'\nimport SystemInformation2Fill from '../icons/system/system-information-2-fill/system-information-2-fill.component'\nimport styles from './callout.scss?inline'\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 */\nexport default class DapDSCallout extends DdsElement {\n  static tagName = 'dap-ds-callout'\n\n  static dependencies = {\n    'dap-ds-icon-information-2-fill': SystemInformation2Fill,\n    'dap-ds-icon-checkbox-circle-fill': SystemCheckboxCircleFill,\n    'dap-ds-icon-alert-fill': SystemAlertFill,\n    'dap-ds-icon-error-warning-fill': SystemErrorWarningFill,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The variant of the callout\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: CalloutVariant = 'brand'\n\n  /** The alignment of the callout. Can be `vertical` or `horizontal`.\n   * @type { 'vertical' | 'horizontal' }\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.\n   * @type { 'subtle' | 'base' | 'medium' | 'strong' }\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /** If the callout has a border */\n  @property({ type: String }) noBorder: string = 'true'\n\n  /** If the callout has a close button */\n  @property({ type: Boolean }) closeable: boolean = false\n\n  /** The header of the callout */\n  @property({\n    converter: stringPropertyConverter,\n  })\n  title: string\n\n  /** The label of the close button */\n  @property() closeButtonLabel: string\n\n  /** `data-testid` for the default close button. */\n  @property() closeButtonTestId = 'callout-close-button'\n\n  /** If the callout is opened */\n  @property({ reflect: true }) opened: string = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** @ignore */\n  @query('slot[name=\"actions\"]') actionsSlot!: HTMLSlotElement\n\n  private _hasActions: boolean = false\n\n  private get hasActions(): boolean {\n    return this._hasActions\n  }\n\n  protected firstUpdated(): void {\n    // On SSR hydration `slotchange` does not fire, so `_hasActions` stays false\n    // and the actions wrapper keeps its server-rendered `hidden` attribute even\n    // when actions were slotted. Resolve once here from the assigned elements.\n    if (this.actionsSlot?.assignedElements().length) {\n      this._hasActions = true\n      this.requestUpdate()\n    }\n  }\n\n  private handleActionsSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement\n    const assignedElements = slot.assignedElements()\n    this._hasActions = assignedElements.length > 0\n    this.requestUpdate()\n  }\n\n  private static readonly defaultIcons = {\n    brand: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    info: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    positive: html`<dap-ds-icon-checkbox-circle-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-checkbox-circle-fill>`,\n    warning: html`<dap-ds-icon-alert-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-alert-fill>`,\n    negative: html`<dap-ds-icon-error-warning-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-error-warning-fill>`,\n  } as const\n\n  getDefaultIcon(variant: CalloutVariant) {\n    return DapDSCallout.defaultIcons[variant] ?? DapDSCallout.defaultIcons.brand\n  }\n\n  handleClose() {\n    this.emit('dds-close')\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closeable) {\n      event.preventDefault()\n      this.handleClose()\n    }\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('title')) {\n      this.title = normalizeStringProperty(this.title)\n    }\n  }\n\n  render() {\n    return this.opened !== 'false'\n      ? html`\n          <dap-ds-card\n            part=\"base\"\n            role=\"region\"\n            aria-live=\"polite\"\n            aria-labelledby=${this.title &&\n            typeof this.title === 'string' &&\n            this.title.trim() &&\n            this.title !== 'null' &&\n            this.title !== 'undefined'\n              ? 'callout-title'\n              : nothing}\n            @keydown=${this.handleKeyDown}\n            .noBorder=${this.noBorder === 'true'}\n            class=${clsx(\n              'callout',\n              `callout--${this.variant}`,\n              `callout--${this.alignment}`,\n              `callout--${this.shade}`,\n              { [`callout--border`]: this.noBorder === 'false' },\n            )}>\n            <dap-ds-card-content\n              class=\"callout__content\"\n              spacing=\"none\"\n              part=\"content\"\n              exportparts=\"base:card-content\">\n              <span class=\"callout__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" part=\"icon\">\n                  ${this.getDefaultIcon(this.variant)}\n                </slot>\n              </span>\n              <span class=\"callout__content-wrapper\">\n                ${this.title &&\n                typeof this.title === 'string' &&\n                this.title.trim() &&\n                this.title !== 'null' &&\n                this.title !== 'undefined'\n                  ? html`<span\n                      part=\"title\"\n                      class=\"callout__title\"\n                      id=\"callout-title\">\n                      <slot name=\"title\">${this.title}</slot>\n                    </span>`\n                  : nothing}\n                <span part=\"description\" class=\"callout__description\">\n                  <slot></slot>\n                </span>\n                <span\n                  part=\"actions\"\n                  class=\"callout__actions\"\n                  ?hidden=${!this.hasActions}>\n                  <slot\n                    name=\"actions\"\n                    part=\"actions\"\n                    @slotchange=${this.handleActionsSlotChange}></slot>\n                </span>\n              </span>\n              ${this.closeable\n                ? html` <span part=\"close\" class=\"callout__close\">\n                    <slot name=\"close\">\n                      <dap-ds-icon-button\n                        clean\n                        data-testid=${this.closeButtonTestId}\n                        aria-label=${this.closeButtonLabel\n                          ? this.closeButtonLabel\n                          : this.localize.t('close')}\n                        @click=${this.handleClose}>\n                        <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n                      </dap-ds-icon-button>\n                    </slot>\n                  </span>`\n                : nothing}\n            </dap-ds-card-content>\n          </dap-ds-card>\n        `\n      : nothing\n  }\n}\n"],"names":["_DapDSCallout","_a","DdsElement","event","assignedElements","variant","changedProperties","normalizeStringProperty","html","nothing","clsx","SystemInformation2Fill","SystemCheckboxCircleFill","SystemAlertFill","SystemErrorWarningFill","DapDSCard","DapDSCardContent","DapDSIconButton","DapDSIcon","unsafeCSS","styles","__decorateClass","property","stringPropertyConverter","query","DapDSCallout"],"mappings":"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"}
+{"version":3,"file":"callout.component.js","sources":["../../../src/components/callout/callout.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Alignment, BackgroundShade, CalloutVariant } from '@/common/types'\nimport {\n  normalizeStringProperty,\n  stringPropertyConverter,\n} from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemAlertFill from '../icons/system/system-alert-fill/system-alert-fill.component'\nimport SystemCheckboxCircleFill from '../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component'\nimport SystemErrorWarningFill from '../icons/system/system-error-warning-fill/system-error-warning-fill.component'\nimport SystemInformation2Fill from '../icons/system/system-information-2-fill/system-information-2-fill.component'\nimport styles from './callout.scss?inline'\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 */\nexport default class DapDSCallout extends DdsElement {\n  static tagName = 'dap-ds-callout'\n\n  static dependencies = {\n    'dap-ds-icon-information-2-fill': SystemInformation2Fill,\n    'dap-ds-icon-checkbox-circle-fill': SystemCheckboxCircleFill,\n    'dap-ds-icon-alert-fill': SystemAlertFill,\n    'dap-ds-icon-error-warning-fill': SystemErrorWarningFill,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The variant of the callout\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: CalloutVariant = 'brand'\n\n  /** The alignment of the callout. Can be `vertical` or `horizontal`.\n   * @type { 'vertical' | 'horizontal' }\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.\n   * @type { 'subtle' | 'base' | 'medium' | 'strong' }\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /** If the callout has a border */\n  @property({ type: String }) noBorder: string = 'true'\n\n  /** If the callout has a close button */\n  @property({ type: Boolean }) closeable: boolean = false\n\n  /** The header of the callout */\n  @property({\n    converter: stringPropertyConverter,\n  })\n  title: string\n\n  /** The label of the close button */\n  @property() closeButtonLabel: string\n\n  /** `data-testid` for the default close button. */\n  @property() closeButtonTestId = 'callout-close-button'\n\n  /** If the callout is opened */\n  @property({ reflect: true }) opened: string = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** @ignore */\n  @query('slot[name=\"actions\"]') actionsSlot!: HTMLSlotElement\n\n  private _hasActions: boolean = false\n\n  private get hasActions(): boolean {\n    return this._hasActions\n  }\n\n  protected firstUpdated(): void {\n    // On SSR hydration `slotchange` does not fire, so `_hasActions` stays false\n    // and the actions wrapper keeps its server-rendered `hidden` attribute even\n    // when actions were slotted. Resolve once here from the assigned elements.\n    if (this.actionsSlot?.assignedElements().length) {\n      this._hasActions = true\n      this.requestUpdate()\n    }\n  }\n\n  private handleActionsSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement\n    const assignedElements = slot.assignedElements()\n    this._hasActions = assignedElements.length > 0\n    this.requestUpdate()\n  }\n\n  private static readonly defaultIcons = {\n    brand: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    info: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    positive: html`<dap-ds-icon-checkbox-circle-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-checkbox-circle-fill>`,\n    warning: html`<dap-ds-icon-alert-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-alert-fill>`,\n    negative: html`<dap-ds-icon-error-warning-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-error-warning-fill>`,\n  } as const\n\n  getDefaultIcon(variant: CalloutVariant) {\n    return DapDSCallout.defaultIcons[variant] ?? DapDSCallout.defaultIcons.brand\n  }\n\n  handleClose() {\n    this.emit('dds-close')\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closeable) {\n      event.preventDefault()\n      this.handleClose()\n    }\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('title')) {\n      this.title = normalizeStringProperty(this.title)\n    }\n  }\n\n  render() {\n    return this.opened !== 'false'\n      ? html`\n          <dap-ds-card\n            part=\"base\"\n            role=\"region\"\n            aria-live=\"polite\"\n            aria-labelledby=${this.title &&\n            typeof this.title === 'string' &&\n            this.title.trim() &&\n            this.title !== 'null' &&\n            this.title !== 'undefined'\n              ? 'callout-title'\n              : nothing}\n            @keydown=${this.handleKeyDown}\n            .noBorder=${this.noBorder === 'true'}\n            class=${clsx(\n              'callout',\n              `callout--${this.variant}`,\n              `callout--${this.alignment}`,\n              `callout--${this.shade}`,\n              { [`callout--border`]: this.noBorder === 'false' },\n            )}>\n            <dap-ds-card-content\n              class=\"callout__content\"\n              spacing=\"none\"\n              part=\"content\"\n              exportparts=\"base:card-content\">\n              <span class=\"callout__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" part=\"icon\">\n                  ${this.getDefaultIcon(this.variant)}\n                </slot>\n              </span>\n              <span class=\"callout__content-wrapper\">\n                ${this.title &&\n                typeof this.title === 'string' &&\n                this.title.trim() &&\n                this.title !== 'null' &&\n                this.title !== 'undefined'\n                  ? html`<span\n                      part=\"title\"\n                      class=\"callout__title\"\n                      id=\"callout-title\">\n                      <slot name=\"title\">${this.title}</slot>\n                    </span>`\n                  : nothing}\n                <span part=\"description\" class=\"callout__description\">\n                  <slot></slot>\n                </span>\n                <span\n                  part=\"actions\"\n                  class=\"callout__actions\"\n                  ?hidden=${!this.hasActions}>\n                  <slot\n                    name=\"actions\"\n                    part=\"actions\"\n                    @slotchange=${this.handleActionsSlotChange}></slot>\n                </span>\n              </span>\n              ${this.closeable\n                ? html` <span part=\"close\" class=\"callout__close\">\n                    <slot name=\"close\">\n                      <dap-ds-icon-button\n                        clean\n                        data-testid=${this.closeButtonTestId}\n                        aria-label=${this.closeButtonLabel\n                          ? this.closeButtonLabel\n                          : this.localize.t('close')}\n                        @click=${this.handleClose}>\n                        <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n                      </dap-ds-icon-button>\n                    </slot>\n                  </span>`\n                : nothing}\n            </dap-ds-card-content>\n          </dap-ds-card>\n        `\n      : nothing\n  }\n}\n"],"names":["_DapDSCallout","_a","DdsElement","event","assignedElements","variant","changedProperties","normalizeStringProperty","html","nothing","clsx","SystemInformation2Fill","SystemCheckboxCircleFill","SystemAlertFill","SystemErrorWarningFill","DapDSCard","DapDSCardContent","DapDSIconButton","DapDSIcon","unsafeCSS","styles","__decorateClass","property","stringPropertyConverter","query","DapDSCallout"],"mappings":"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"}

package/dist/components/card/card.component.d.ts

@@ -16,6 +16,7 @@ declare const DapDSCard_base: typeof DdsElement & {
  * @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))