dap-design-system 0.62.4 → 0.63.0

package/dist/components/sidenav/sidenav.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.component.js","sources":["../../../src/components/sidenav/sidenav.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, literal } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav.scss?inline'\n\n// Mapped rather than interpolated straight into the static template: `landmark` is a\n// plain attribute, so any string can reach it from markup, and `unsafeStatic` would\n// render that string as a tag name. Unknown values fall back to `aside`.\nconst LANDMARK_TAGS = {\n  aside: literal`aside`,\n  nav: literal`nav`,\n} as const\n\nexport type SideNavLandmark = keyof typeof LANDMARK_TAGS\n\n/**\n * `dap-ds-sidenav`\n * @summary Side navigation is a list of links that are used to navigate to different sections of a page.\n * @element dap-ds-sidenav\n * @title - Side navigation\n *\n * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.\n *\n * @slot - The content of the side navigation.\n *\n * @csspart base - The main side navigation container.\n * @csspart menu - The menu of the side navigation.\n */\nexport default class DapDSSideNav extends DdsElement {\n  static tagName = 'dap-ds-sidenav'\n\n  /** The label of the side navigation, if aria label is not provided, it will be used as aria label */\n  @property({ reflect: true }) label: string\n\n  /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */\n  @property() activeHref: string\n\n  /** The size of the side navigation */\n  @property({ type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  /**\n   * The landmark element to render. `aside` exposes a complementary landmark; `nav`\n   * exposes a navigation landmark, so the sidenav is listed when a screen-reader user\n   * asks for the page's navigation.\n   *\n   * Defaults to `aside` because that is what this component has always rendered, and\n   * changing the landmark of every existing sidenav is not this component's call: a\n   * sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the\n   * sidenav is the primary way to move around the view.\n   * @type {'aside' | 'nav'}\n   */\n  @property({ reflect: true, type: String }) landmark: SideNavLandmark = 'aside'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    const activeItem = this.querySelector(\n      `[href=\"${this.activeHref ? this.activeHref : window.location.pathname}\"]`,\n    )\n\n    if (activeItem) {\n      this.removeActive()\n      this.setActive(activeItem)\n    }\n\n    const activeGroup = activeItem?.closest('dap-ds-sidenav-group')\n    if (activeGroup) {\n      activeGroup.setAttribute('open', 'true')\n    }\n\n    // go through all the items and and groups and set the size\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        ;(item as any).size = this.size\n      },\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 === 'activehref') {\n      this.removeActive()\n\n      const activeItem = this.querySelector(`[href=\"${value}\"]`)\n      this.setActive(activeItem)\n    }\n  }\n\n  private removeActive(): void {\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        item.removeAttribute('active')\n      },\n    )\n  }\n\n  private setActive(activeItem?: Element | null): void {\n    if (activeItem) {\n      activeItem.setAttribute('active', 'true')\n\n      const activeGroup = activeItem.closest('dap-ds-sidenav-group')\n      if (activeGroup) {\n        activeGroup.setAttribute('open', 'true')\n      }\n    }\n  }\n\n  // Emits `dds-item-click` when an item (or a group acting as a link) is\n  // activated. The event is cancelable: consumers doing client-side routing can\n  // call `event.preventDefault()` to suppress the item's native anchor\n  // navigation. When nobody prevents it, the anchor navigates as before.\n  private handleClick(event: MouseEvent): void {\n    const item = event\n      .composedPath()\n      .find(\n        (el): el is HTMLElement =>\n          el instanceof HTMLElement &&\n          (el.tagName === 'DAP-DS-SIDENAV-ITEM' ||\n            el.tagName === 'DAP-DS-SIDENAV-GROUP'),\n      )\n\n    // `href` is a non-reflecting reactive property, so a framework that sets it\n    // as a DOM property (e.g. React 19 for custom elements) leaves no `href`\n    // attribute. Read the property first, then fall back to the attribute.\n    const href =\n      (item as (HTMLElement & { href?: string }) | undefined)?.href ||\n      item?.getAttribute('href')\n    if (!href) return\n\n    const itemClick = this.emit(\n      'dds-item-click',\n      { href, event },\n      { cancelable: true },\n    )\n\n    if (itemClick.defaultPrevented) {\n      event.preventDefault()\n    }\n  }\n\n  render() {\n    const tag = LANDMARK_TAGS[this.landmark] ?? LANDMARK_TAGS.aside\n\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${clsx('sidenav', `sidenav--${this.size}`)}\n        aria-label=${this.ariaLabel ?? this.label}>\n        <menu part=\"menu\" @click=${this.handleClick}>\n          <slot></slot>\n        </menu>\n      </${tag}>\n    `\n  }\n}\n"],"names":["LANDMARK_TAGS","literal","_DapDSSideNav","DdsElement","_changedProperties","activeItem","activeGroup","item","name","_old","value","event","el","href","tag","_a","html","clsx","_b","unsafeCSS","styles","DapDSSideNav","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"sidenav.component.js","sources":["../../../src/components/sidenav/sidenav.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, literal } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav.scss?inline'\n\n// Mapped rather than interpolated straight into the static template: `landmark` is a\n// plain attribute, so any string can reach it from markup, and `unsafeStatic` would\n// render that string as a tag name. Unknown values fall back to `aside`.\nconst LANDMARK_TAGS = {\n  aside: literal`aside`,\n  nav: literal`nav`,\n} as const\n\nexport type SideNavLandmark = keyof typeof LANDMARK_TAGS\n\n/**\n * `dap-ds-sidenav`\n * @summary Side navigation is a list of links that are used to navigate to different sections of a page.\n * @element dap-ds-sidenav\n * @title - Side navigation\n *\n * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.\n *\n * @slot - The content of the side navigation.\n *\n * @csspart base - The main side navigation container.\n * @csspart menu - The menu of the side navigation.\n */\nexport default class DapDSSideNav extends DdsElement {\n  static tagName = 'dap-ds-sidenav'\n\n  /** The label of the side navigation, if aria label is not provided, it will be used as aria label */\n  @property({ reflect: true }) label: string\n\n  /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */\n  @property() activeHref: string\n\n  /** The size of the side navigation */\n  @property({ type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  /**\n   * The landmark element to render. `aside` exposes a complementary landmark; `nav`\n   * exposes a navigation landmark, so the sidenav is listed when a screen-reader user\n   * asks for the page's navigation.\n   *\n   * Defaults to `aside` because that is what this component has always rendered, and\n   * changing the landmark of every existing sidenav is not this component's call: a\n   * sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the\n   * sidenav is the primary way to move around the view.\n   * @type {'aside' | 'nav'}\n   */\n  @property({ reflect: true, type: String }) landmark: SideNavLandmark = 'aside'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    const activeItem = this.querySelector(\n      `[href=\"${this.activeHref ? this.activeHref : window.location.pathname}\"]`,\n    )\n\n    if (activeItem) {\n      this.removeActive()\n      this.setActive(activeItem)\n    }\n\n    const activeGroup = activeItem?.closest('dap-ds-sidenav-group')\n    if (activeGroup) {\n      activeGroup.setAttribute('open', 'true')\n    }\n\n    // go through all the items and and groups and set the size\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        ;(item as any).size = this.size\n      },\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 === 'activehref') {\n      this.removeActive()\n\n      const activeItem = this.querySelector(`[href=\"${value}\"]`)\n      this.setActive(activeItem)\n    }\n  }\n\n  private removeActive(): void {\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        item.removeAttribute('active')\n      },\n    )\n  }\n\n  private setActive(activeItem?: Element | null): void {\n    if (activeItem) {\n      activeItem.setAttribute('active', 'true')\n\n      const activeGroup = activeItem.closest('dap-ds-sidenav-group')\n      if (activeGroup) {\n        activeGroup.setAttribute('open', 'true')\n      }\n    }\n  }\n\n  // Emits `dds-item-click` when an item (or a group acting as a link) is\n  // activated. The event is cancelable: consumers doing client-side routing can\n  // call `event.preventDefault()` to suppress the item's native anchor\n  // navigation. When nobody prevents it, the anchor navigates as before.\n  private handleClick(event: MouseEvent): void {\n    const item = event\n      .composedPath()\n      .find(\n        (el): el is HTMLElement =>\n          el instanceof HTMLElement &&\n          (el.tagName === 'DAP-DS-SIDENAV-ITEM' ||\n            el.tagName === 'DAP-DS-SIDENAV-GROUP'),\n      )\n\n    // `href` is a non-reflecting reactive property, so a framework that sets it\n    // as a DOM property (e.g. React 19 for custom elements) leaves no `href`\n    // attribute. Read the property first, then fall back to the attribute.\n    const href =\n      (item as (HTMLElement & { href?: string }) | undefined)?.href ||\n      item?.getAttribute('href')\n    if (!href) return\n\n    const itemClick = this.emit(\n      'dds-item-click',\n      { href, event },\n      { cancelable: true },\n    )\n\n    if (itemClick.defaultPrevented) {\n      event.preventDefault()\n    }\n  }\n\n  render() {\n    const tag = LANDMARK_TAGS[this.landmark] ?? LANDMARK_TAGS.aside\n\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${clsx('sidenav', `sidenav--${this.size}`)}\n        aria-label=${this.ariaLabel ?? this.label}>\n        <menu part=\"menu\" @click=${this.handleClick}>\n          <slot></slot>\n        </menu>\n      </${tag}>\n    `\n  }\n}\n"],"names":["LANDMARK_TAGS","literal","_DapDSSideNav","DdsElement","_changedProperties","activeItem","activeGroup","item","name","_old","value","event","el","href","tag","_a","html","clsx","_b","unsafeCSS","styles","DapDSSideNav","__decorateClass","property"],"mappings":";;;;;;;;;;;AAWA,MAAMA,IAAgB;AAAA,EACpB,OAAOC;AAAA,EACP,KAAKA;AACP,GAiBqBC,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAUyD,KAAA,OAAA,MAagB,KAAA,WAAA;AAAA,EAAA;AAAA,EAI7D,aACRC,GACM;AACN,UAAMC,IAAa,KAAK;AAAA,MACtB,UAAU,KAAK,aAAa,KAAK,aAAa,OAAO,SAAS,QAAQ;AAAA,IACxE;AAEA,IAAIA,MACF,KAAK,aAAa,GAClB,KAAK,UAAUA,CAAU;AAGrB,UAAAC,IAAcD,KAAA,gBAAAA,EAAY,QAAQ;AACxC,IAAIC,KACUA,EAAA,aAAa,QAAQ,MAAM,GAIpC,KAAA,iBAAiB,2CAA2C,EAAE;AAAA,MACjE,CAAQC,MAAA;AACJ,QAAAA,EAAa,OAAO,KAAK;AAAA,MAAA;AAAA,IAE/B;AAAA,EAAA;AAAA,EAGF,yBACEC,GACAC,GACAC,GACM;AAGN,QAFM,MAAA,yBAAyBF,GAAMC,GAAMC,CAAK,GAE5CF,MAAS,cAAc;AACzB,WAAK,aAAa;AAElB,YAAMH,IAAa,KAAK,cAAc,UAAUK,CAAK,IAAI;AACzD,WAAK,UAAUL,CAAU;AAAA,IAAA;AAAA,EAC3B;AAAA,EAGM,eAAqB;AACtB,SAAA,iBAAiB,2CAA2C,EAAE;AAAA,MACjE,CAAQE,MAAA;AACN,QAAAA,EAAK,gBAAgB,QAAQ;AAAA,MAAA;AAAA,IAEjC;AAAA,EAAA;AAAA,EAGM,UAAUF,GAAmC;AACnD,QAAIA,GAAY;AACH,MAAAA,EAAA,aAAa,UAAU,MAAM;AAElC,YAAAC,IAAcD,EAAW,QAAQ,sBAAsB;AAC7D,MAAIC,KACUA,EAAA,aAAa,QAAQ,MAAM;AAAA,IACzC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAOM,YAAYK,GAAyB;AACrC,UAAAJ,IAAOI,EACV,aAAA,EACA;AAAA,MACC,CAACC,MACCA,aAAc,gBACbA,EAAG,YAAY,yBACdA,EAAG,YAAY;AAAA,IACrB,GAKIC,KACHN,KAAA,gBAAAA,EAAwD,UACzDA,KAAA,gBAAAA,EAAM,aAAa;AACrB,QAAI,CAACM,EAAM;AAQX,IANkB,KAAK;AAAA,MACrB;AAAA,MACA,EAAE,MAAAA,GAAM,OAAAF,EAAM;AAAA,MACd,EAAE,YAAY,GAAK;AAAA,IACrB,EAEc,oBACZA,EAAM,eAAe;AAAA,EACvB;AAAA,EAGF,SAAS;;AACP,UAAMG,KAAMC,IAAAf,EAAc,KAAK,QAAQ,MAA3B,OAAAe,IAAgCf,EAAc;AAEnD,WAAAgB;AAAA,SACFF,CAAG;AAAA;AAAA,gBAEIG,EAAK,WAAW,YAAY,KAAK,IAAI,EAAE,CAAC;AAAA,sBACnCC,IAAA,KAAK,cAAL,OAAAA,IAAkB,KAAK,KAAK;AAAA,mCACd,KAAK,WAAW;AAAA;AAAA;AAAA,UAGzCJ,CAAG;AAAA;AAAA,EAAA;AAGb;AApIEZ,EAAO,UAAU,kBAwBDA,EAAA,SAASiB,EAAUC,CAAM;AAzB3C,IAAqBC,IAArBnB;AAI+BoB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAJRF,EAIU,WAAA,OAAA;AAGjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAPSF,EAOP,WAAA,YAAA;AAGgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,MAAA;AAaeC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GAvBtBF,EAuBwB,WAAA,UAAA;"}

package/dist/components/skeleton/skeleton.component.js

@@ -1,19 +1,16 @@
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as y } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { unsafeCSS as y, html as p } from "lit";
+import { property as r } from "lit/decorators.js";
 import "../../localization/localization.js";
-import { DdsElement as p } from "../../internal/dds-hu-element.js";
-import f from "./skeleton.scss.js";
-import { t as d } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import d from "./skeleton.scss.js";
+import { t as c } from "../../node_modules/i18next/dist/esm/i18next.js";
 var S = Object.defineProperty, a = (l, t, e, o) => {
   for (var s = void 0, m = l.length - 1, h; m >= 0; m--)
     (h = l[m]) && (s = h(t, e, s) || s);
   return s && S(t, e, s), s;
 };
-const n = class n extends p {
+const n = class n extends f {
   constructor() {
     super(...arguments), this.variant = "text", this.noAnimation = !1, this.animation = "wave";
   }
@@ -50,7 +47,7 @@ const n = class n extends p {
   }
   render() {
     var t;
-    return this.width ? this.style.setProperty("--skeleton-width", this.width) : this.style.removeProperty("--skeleton-width"), this.height ? this.style.setProperty("--skeleton-height", this.height) : this.style.removeProperty("--skeleton-height"), y`
+    return this.style && (this.width ? this.style.setProperty("--skeleton-width", this.width) : this.style.removeProperty("--skeleton-width"), this.height ? this.style.setProperty("--skeleton-height", this.height) : this.style.removeProperty("--skeleton-height")), p`
       <div
         part="base"
         class="${u("skeleton", {
@@ -59,11 +56,11 @@ const n = class n extends p {
       [`skeleton--${this.animation}`]: !this.noAnimation && this.animation
     })}"
         role="status"
-        aria-label=${(t = this.ariaLabel) != null ? t : d("loading")}></div>
+        aria-label=${(t = this.ariaLabel) != null ? t : c("loading")}></div>
     `;
   }
 };
-n.tagName = "dap-ds-skeleton", n.styles = c(f);
+n.tagName = "dap-ds-skeleton", n.styles = y(d);
 let i = n;
 a([
   r({ type: String, reflect: !0 })

package/dist/components/skeleton/skeleton.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.component.js","sources":["../../../src/components/skeleton/skeleton.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './skeleton.scss?inline'\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular'\nexport type SkeletonAnimation = 'wave' | 'pulse' | 'custom'\n\n/**\n * `dap-ds-skeleton`\n * @summary A skeleton loader component for displaying placeholder content while loading.\n * @element dap-ds-skeleton\n * @title - Skeleton\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-skeleton></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"circular\"></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"rectangular\" width=\"200px\" height=\"100px\"></dap-ds-skeleton>\n * <dap-ds-skeleton animation=\"custom\" custom-keyframes=\"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"></dap-ds-skeleton>\n * ```\n *\n * @csspart base - The main skeleton container.\n *\n * @cssprop --dds-skeleton-base-color - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active\n * @cssprop --dds-skeleton-color - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent))\n * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation (default: 1.5s)\n * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons (default: var(--dds-radius-small))\n * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant (default: var(--dds-spacing-100))\n * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)\n */\nexport default class DapDSSkeleton extends DdsElement {\n  static tagName = 'dap-ds-skeleton'\n\n  /**\n   * The variant of the skeleton.\n   * @type {\"text\" | \"circular\" | \"rectangular\"}\n   */\n  @property({ type: String, reflect: true }) variant: SkeletonVariant = 'text'\n\n  /**\n   * The width of the skeleton. Can be any valid CSS width value.\n   */\n  @property({ type: String }) width?: string\n\n  /**\n   * The height of the skeleton. Can be any valid CSS height value.\n   */\n  @property({ type: String }) height?: string\n\n  /**\n   * Whether to animate the skeleton.\n   */\n  @property({ type: Boolean, reflect: true }) noAnimation = false\n\n  /**\n   * The animation type for the skeleton.\n   * @type {\"wave\" | \"pulse\" | \"custom\"}\n   */\n  @property({ type: String, reflect: true }) animation: SkeletonAnimation =\n    'wave'\n\n  /**\n   * Custom keyframes for the animation when animation=\"custom\".\n   * Should be a valid CSS keyframes string without the @keyframes wrapper.\n   * @example \"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"\n   */\n  @property({ type: String, attribute: 'custom-keyframes' })\n  customKeyframes?: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _userCustomStyles?: string\n\n  private _generateKeyframesCSS(): string | undefined {\n    if (this.animation === 'custom' && this.customKeyframes) {\n      return `\n        @keyframes custom-skeleton-animation {\n          ${this.customKeyframes}\n        }\n        .skeleton--custom::before {\n          animation: custom-skeleton-animation var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;\n        }\n      `\n    }\n    return undefined\n  }\n\n  private _updateMergedStyles() {\n    const keyframesCSS = this._generateKeyframesCSS()\n    const parts: string[] = []\n\n    if (keyframesCSS) {\n      parts.push(keyframesCSS)\n    }\n\n    if (this._userCustomStyles) {\n      parts.push(this._userCustomStyles)\n    }\n\n    const mergedStyles = parts.length > 0 ? parts.join('\\n') : undefined\n\n    // Only update if different to avoid infinite loops\n    if (mergedStyles !== this.customStyles) {\n      // Use requestUpdate to properly trigger Lit's update cycle\n      const oldValue = this.customStyles\n      ;(this as any).customStyles = mergedStyles\n      this.requestUpdate('customStyles', oldValue)\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Track user-provided customStyles (separate from generated keyframes)\n    if (changedProperties.has('customStyles')) {\n      const currentStyles = this.customStyles || ''\n      const keyframesCSS = this._generateKeyframesCSS()\n\n      if (keyframesCSS && currentStyles.includes(keyframesCSS)) {\n        // Extract user's styles by removing our generated CSS\n        this._userCustomStyles =\n          currentStyles.replace(keyframesCSS, '').trim() || undefined\n      } else {\n        // No keyframes CSS, so all styles are user-provided\n        this._userCustomStyles = currentStyles || undefined\n      }\n    }\n\n    // Update merged styles when animation-related properties change\n    if (\n      changedProperties.has('animation') ||\n      changedProperties.has('customKeyframes')\n    ) {\n      this._updateMergedStyles()\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // Initialize user custom styles\n    this._userCustomStyles = this.customStyles || undefined\n    // Generate and set merged styles\n    this._updateMergedStyles()\n  }\n\n  render() {\n    if (this.width) {\n      this.style.setProperty('--skeleton-width', this.width)\n    } else {\n      this.style.removeProperty('--skeleton-width')\n    }\n\n    if (this.height) {\n      this.style.setProperty('--skeleton-height', this.height)\n    } else {\n      this.style.removeProperty('--skeleton-height')\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${clsx('skeleton', {\n          [`skeleton--${this.variant}`]: this.variant,\n          'skeleton--animate': !this.noAnimation,\n          [`skeleton--${this.animation}`]: !this.noAnimation && this.animation,\n        })}\"\n        role=\"status\"\n        aria-label=${this.ariaLabel ?? t('loading')}></div>\n    `\n  }\n}\n"],"names":["_DapDSSkeleton","DdsElement","keyframesCSS","parts","mergedStyles","oldValue","changedProperties","currentStyles","_changedProperties","html","clsx","_a","t","unsafeCSS","styles","DapDSSkeleton","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"skeleton.component.js","sources":["../../../src/components/skeleton/skeleton.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './skeleton.scss?inline'\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular'\nexport type SkeletonAnimation = 'wave' | 'pulse' | 'custom'\n\n/**\n * `dap-ds-skeleton`\n * @summary A skeleton loader component for displaying placeholder content while loading.\n * @element dap-ds-skeleton\n * @title - Skeleton\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-skeleton></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"circular\"></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"rectangular\" width=\"200px\" height=\"100px\"></dap-ds-skeleton>\n * <dap-ds-skeleton animation=\"custom\" custom-keyframes=\"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"></dap-ds-skeleton>\n * ```\n *\n * @csspart base - The main skeleton container.\n *\n * @cssprop --dds-skeleton-base-color - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active\n * @cssprop --dds-skeleton-color - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent))\n * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation (default: 1.5s)\n * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons (default: var(--dds-radius-small))\n * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant (default: var(--dds-spacing-100))\n * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)\n */\nexport default class DapDSSkeleton extends DdsElement {\n  static tagName = 'dap-ds-skeleton'\n\n  /**\n   * The variant of the skeleton.\n   * @type {\"text\" | \"circular\" | \"rectangular\"}\n   */\n  @property({ type: String, reflect: true }) variant: SkeletonVariant = 'text'\n\n  /**\n   * The width of the skeleton. Can be any valid CSS width value.\n   */\n  @property({ type: String }) width?: string\n\n  /**\n   * The height of the skeleton. Can be any valid CSS height value.\n   */\n  @property({ type: String }) height?: string\n\n  /**\n   * Whether to animate the skeleton.\n   */\n  @property({ type: Boolean, reflect: true }) noAnimation = false\n\n  /**\n   * The animation type for the skeleton.\n   * @type {\"wave\" | \"pulse\" | \"custom\"}\n   */\n  @property({ type: String, reflect: true }) animation: SkeletonAnimation =\n    'wave'\n\n  /**\n   * Custom keyframes for the animation when animation=\"custom\".\n   * Should be a valid CSS keyframes string without the @keyframes wrapper.\n   * @example \"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"\n   */\n  @property({ type: String, attribute: 'custom-keyframes' })\n  customKeyframes?: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _userCustomStyles?: string\n\n  private _generateKeyframesCSS(): string | undefined {\n    if (this.animation === 'custom' && this.customKeyframes) {\n      return `\n        @keyframes custom-skeleton-animation {\n          ${this.customKeyframes}\n        }\n        .skeleton--custom::before {\n          animation: custom-skeleton-animation var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;\n        }\n      `\n    }\n    return undefined\n  }\n\n  private _updateMergedStyles() {\n    const keyframesCSS = this._generateKeyframesCSS()\n    const parts: string[] = []\n\n    if (keyframesCSS) {\n      parts.push(keyframesCSS)\n    }\n\n    if (this._userCustomStyles) {\n      parts.push(this._userCustomStyles)\n    }\n\n    const mergedStyles = parts.length > 0 ? parts.join('\\n') : undefined\n\n    // Only update if different to avoid infinite loops\n    if (mergedStyles !== this.customStyles) {\n      // Use requestUpdate to properly trigger Lit's update cycle\n      const oldValue = this.customStyles\n      ;(this as any).customStyles = mergedStyles\n      this.requestUpdate('customStyles', oldValue)\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Track user-provided customStyles (separate from generated keyframes)\n    if (changedProperties.has('customStyles')) {\n      const currentStyles = this.customStyles || ''\n      const keyframesCSS = this._generateKeyframesCSS()\n\n      if (keyframesCSS && currentStyles.includes(keyframesCSS)) {\n        // Extract user's styles by removing our generated CSS\n        this._userCustomStyles =\n          currentStyles.replace(keyframesCSS, '').trim() || undefined\n      } else {\n        // No keyframes CSS, so all styles are user-provided\n        this._userCustomStyles = currentStyles || undefined\n      }\n    }\n\n    // Update merged styles when animation-related properties change\n    if (\n      changedProperties.has('animation') ||\n      changedProperties.has('customKeyframes')\n    ) {\n      this._updateMergedStyles()\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // Initialize user custom styles\n    this._userCustomStyles = this.customStyles || undefined\n    // Generate and set merged styles\n    this._updateMergedStyles()\n  }\n\n  render() {\n    // `this.style` is undefined in the Lit SSR element shim; skip host-style\n    // mutation on the server (it is applied on the client during hydration).\n    if (this.style) {\n      if (this.width) {\n        this.style.setProperty('--skeleton-width', this.width)\n      } else {\n        this.style.removeProperty('--skeleton-width')\n      }\n\n      if (this.height) {\n        this.style.setProperty('--skeleton-height', this.height)\n      } else {\n        this.style.removeProperty('--skeleton-height')\n      }\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${clsx('skeleton', {\n          [`skeleton--${this.variant}`]: this.variant,\n          'skeleton--animate': !this.noAnimation,\n          [`skeleton--${this.animation}`]: !this.noAnimation && this.animation,\n        })}\"\n        role=\"status\"\n        aria-label=${this.ariaLabel ?? t('loading')}></div>\n    `\n  }\n}\n"],"names":["_DapDSSkeleton","DdsElement","keyframesCSS","parts","mergedStyles","oldValue","changedProperties","currentStyles","_changedProperties","html","clsx","_a","t","unsafeCSS","styles","DapDSSkeleton","__decorateClass","property"],"mappings":"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"}

package/dist/components/skip-link/skip-link.component.js

@@ -1,30 +1,27 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as h } from "../../node_modules/lit-html/static.js";
-import { DdsElement as d } from "../../internal/dds-hu-element.js";
-import f from "../link/link.component.js";
-import c from "./skip-link.scss.js";
-import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as d } from "lit";
+import { property as r } from "lit/decorators.js";
+import { html as m } from "lit/static-html.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import c from "../link/link.component.js";
+import k from "./skip-link.scss.js";
 var u = Object.defineProperty, i = (o, p, a, y) => {
   for (var t = void 0, n = o.length - 1, l; n >= 0; n--)
     (l = o[n]) && (t = l(p, a, t) || t);
   return t && u(p, a, t), t;
 };
-const e = class e extends d {
+const e = class e extends f {
   constructor() {
     super(...arguments), this.href = "#", this.size = "sm", this.noUnderline = !1;
   }
   render() {
-    return h`
+    return m`
       <dap-ds-link
         ?noUnderLine=${this.noUnderline}
         part="base"
         variant="brand"
         href=${this.href}
-        class=${m(
+        class=${h(
       "skip-link",
       `skip-link--${this.size}`,
       `skip-link--${this.placement}`
@@ -34,7 +31,7 @@ const e = class e extends d {
         </span>
         <span
           part="high-contrast"
-          class=${m(
+          class=${h(
       "skip-link__high-contrast",
       `skip-link__high-contrast--${this.size}`
     )}></span>
@@ -43,8 +40,8 @@ const e = class e extends d {
   }
 };
 e.tagName = "dap-ds-skip-link", e.dependencies = {
-  "dap-ds-link": f
-}, e.styles = k(c);
+  "dap-ds-link": c
+}, e.styles = d(k);
 let s = e;
 i([
   r({ reflect: !0 })

package/dist/components/skip-link/skip-link.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"skip-link.component.js","sources":["../../../src/components/skip-link/skip-link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonSize, Placement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSLink from '../link/link.component'\nimport styles from './skip-link.scss?inline'\n\n/**\n * `dap-ds-skip-link`\n * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.\n * @element dap-ds-skip-link\n * @title - Skip link\n *\n * @slot - The content of the skip link.\n *\n * @csspart base - The main skip link container.\n * @csspart text - The text container of the skip link.\n * @csspart high-contrast - The high contrast outline container.\n *\n * @cssproperty --dds-skip-link-border-color - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-skip-link-border-width - Border width for the high contrast outline (default: var(--dds-border-width-large))\n * @cssproperty --dds-skip-link-border-width-active - Border width for the active state (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-skip-link-border-radius - Border radius of the skip link (default: var(--dds-radius-small))\n * @cssproperty --dds-skip-link-padding-sm - Padding for small size variant (default: var(--dds-spacing-200))\n * @cssproperty --dds-skip-link-padding-lg - Padding for large size variant (default: var(--dds-spacing-400))\n * @cssproperty --dds-skip-link-text-underline-offset - Underline offset for the text (default: 3px)\n * @cssproperty --dds-skip-link-z-index - Z-index of the skip link (default: var(--dds-z-index-100))\n */\nexport default class DapDSSkipLink extends DdsElement {\n  static tagName = 'dap-ds-skip-link'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  /** The placement of the skip link.\n   * @type {'left' | 'center'}\n   */\n  @property({ reflect: true }) placement: Placement\n\n  /** The href of the skip link */\n  @property() href: string = '#'\n\n  /** The size of the skip link\n   * @type {'sm' | 'lg'}\n   */\n  @property() size: CommonSize = 'sm'\n\n  /** Whether the skip link should have an underline */\n  @property({ type: Boolean }) noUnderline = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <dap-ds-link\n        ?noUnderLine=${this.noUnderline}\n        part=\"base\"\n        variant=\"brand\"\n        href=${this.href}\n        class=${clsx(\n          'skip-link',\n          `skip-link--${this.size}`,\n          `skip-link--${this.placement}`,\n        )}>\n        <span part=\"text\" class=\"skip-link__text\">\n          <slot></slot>\n        </span>\n        <span\n          part=\"high-contrast\"\n          class=${clsx(\n            'skip-link__high-contrast',\n            `skip-link__high-contrast--${this.size}`,\n          )}></span>\n      </dap-ds-link>\n    `\n  }\n}\n"],"names":["_DapDSSkipLink","DdsElement","html","clsx","DapDSLink","unsafeCSS","styles","DapDSSkipLink","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAa6B,KAAA,OAAA,KAKI,KAAA,OAAA,MAGY,KAAA,cAAA;AAAA,EAAA;AAAA,EAI3C,SAAS;AACA,WAAAC;AAAAA;AAAAA,uBAEY,KAAK,WAAW;AAAA;AAAA;AAAA,eAGxB,KAAK,IAAI;AAAA,gBACRC;AAAA,MACN;AAAA,MACA,cAAc,KAAK,IAAI;AAAA,MACvB,cAAc,KAAK,SAAS;AAAA,IAAA,CAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMSA;AAAA,MACN;AAAA,MACA,6BAA6B,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA;AAAA;AAAA,EAAA;AAIX;AAhDEH,EAAO,UAAU,oBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeI;AACjB,GAkBgBJ,EAAA,SAASK,EAAUC,CAAM;AAvB3C,IAAqBC,IAArBP;AAU+BQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;AAGjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,MAAA;AAKAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAlBSF,EAkBP,WAAA,MAAA;AAGiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRF,EAqBU,WAAA,aAAA;"}
+{"version":3,"file":"skip-link.component.js","sources":["../../../src/components/skip-link/skip-link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonSize, Placement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSLink from '../link/link.component'\nimport styles from './skip-link.scss?inline'\n\n/**\n * `dap-ds-skip-link`\n * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.\n * @element dap-ds-skip-link\n * @title - Skip link\n *\n * @slot - The content of the skip link.\n *\n * @csspart base - The main skip link container.\n * @csspart text - The text container of the skip link.\n * @csspart high-contrast - The high contrast outline container.\n *\n * @cssproperty --dds-skip-link-border-color - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-skip-link-border-width - Border width for the high contrast outline (default: var(--dds-border-width-large))\n * @cssproperty --dds-skip-link-border-width-active - Border width for the active state (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-skip-link-border-radius - Border radius of the skip link (default: var(--dds-radius-small))\n * @cssproperty --dds-skip-link-padding-sm - Padding for small size variant (default: var(--dds-spacing-200))\n * @cssproperty --dds-skip-link-padding-lg - Padding for large size variant (default: var(--dds-spacing-400))\n * @cssproperty --dds-skip-link-text-underline-offset - Underline offset for the text (default: 3px)\n * @cssproperty --dds-skip-link-z-index - Z-index of the skip link (default: var(--dds-z-index-100))\n */\nexport default class DapDSSkipLink extends DdsElement {\n  static tagName = 'dap-ds-skip-link'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  /** The placement of the skip link.\n   * @type {'left' | 'center'}\n   */\n  @property({ reflect: true }) placement: Placement\n\n  /** The href of the skip link */\n  @property() href: string = '#'\n\n  /** The size of the skip link\n   * @type {'sm' | 'lg'}\n   */\n  @property() size: CommonSize = 'sm'\n\n  /** Whether the skip link should have an underline */\n  @property({ type: Boolean }) noUnderline = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <dap-ds-link\n        ?noUnderLine=${this.noUnderline}\n        part=\"base\"\n        variant=\"brand\"\n        href=${this.href}\n        class=${clsx(\n          'skip-link',\n          `skip-link--${this.size}`,\n          `skip-link--${this.placement}`,\n        )}>\n        <span part=\"text\" class=\"skip-link__text\">\n          <slot></slot>\n        </span>\n        <span\n          part=\"high-contrast\"\n          class=${clsx(\n            'skip-link__high-contrast',\n            `skip-link__high-contrast--${this.size}`,\n          )}></span>\n      </dap-ds-link>\n    `\n  }\n}\n"],"names":["_DapDSSkipLink","DdsElement","html","clsx","DapDSLink","unsafeCSS","styles","DapDSSkipLink","__decorateClass","property"],"mappings":";;;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAa6B,KAAA,OAAA,KAKI,KAAA,OAAA,MAGY,KAAA,cAAA;AAAA,EAAA;AAAA,EAI3C,SAAS;AACA,WAAAC;AAAA;AAAA,uBAEY,KAAK,WAAW;AAAA;AAAA;AAAA,eAGxB,KAAK,IAAI;AAAA,gBACRC;AAAA,MACN;AAAA,MACA,cAAc,KAAK,IAAI;AAAA,MACvB,cAAc,KAAK,SAAS;AAAA,IAAA,CAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMSA;AAAA,MACN;AAAA,MACA,6BAA6B,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA;AAAA;AAAA,EAAA;AAIX;AAhDEH,EAAO,UAAU,oBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeI;AACjB,GAkBgBJ,EAAA,SAASK,EAAUC,CAAM;AAvB3C,IAAqBC,IAArBP;AAU+BQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;AAGjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,MAAA;AAKAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAlBSF,EAkBP,WAAA,MAAA;AAGiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRF,EAqBU,WAAA,aAAA;"}

package/dist/components/snackbar/snackbar-message.component.d.ts

@@ -20,7 +20,9 @@ import { default as DapDSStack } from '../stack/stack.component';
  * @csspart base - Main snackbar container.
  * @csspart text - The text part of the snackbar.
  * @csspart closebutton - The close button part of the component.
- * @csspart icon - The icon part of the close button.
+ * @csspart close-icon - The icon of the close button.
+ * @csspart actions - The actions container of the snackbar.
+ * @csspart actions-base - The base of the actions container.
  *
  * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))
  * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))

package/dist/components/snackbar/snackbar-message.component.js

@@ -1,13 +1,9 @@
-import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as h } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
-import { styleMap as b } from "../../node_modules/lit-html/directives/style-map.js";
-import { html as o } from "../../node_modules/lit-html/static.js";
-import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m, nothing as p } from "lit";
+import { property as o, state as b } from "lit/decorators.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import { styleMap as y } from "lit/directives/style-map.js";
+import { html as e } from "lit/static-html.js";
 import { DdsElement as k } from "../../internal/dds-hu-element.js";
 import g from "../button/button.component.js";
 import $ from "../icon/icon.component.js";
@@ -15,32 +11,31 @@ import _ from "../icon-button/icon-button.component.js";
 import v from "../link/link.component.js";
 import T from "../stack/stack.component.js";
 import x from "./snackbar-message.scss.js";
-import { unsafeCSS as B } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var C = Object.defineProperty, r = (f, t, c, l) => {
-  for (var e = void 0, d = f.length - 1, m; d >= 0; d--)
-    (m = f[d]) && (e = m(t, c, e) || e);
-  return e && C(t, c, e), e;
+var B = Object.defineProperty, i = (u, t, c, l) => {
+  for (var r = void 0, d = u.length - 1, f; d >= 0; d--)
+    (f = u[d]) && (r = f(t, c, r) || r);
+  return r && B(t, c, r), r;
 };
 const n = class n extends k {
   constructor() {
     super(...arguments), this.actions = [], this.message = "", this.closeButton = "true", this.alertType = "default", this.position = "bottom-right", this.closeButtonTestId = "snackbar-close-button", this.isClosing = !1;
   }
   getActions() {
-    return this.actions && this.actions.length > 0 ? o`<dap-ds-stack
+    return this.actions && this.actions.length > 0 ? e`<dap-ds-stack
         part="actions"
         exportparts="base:actions-base"
         class="snackbar__actions"
         direction="row">
         ${this.actions.map((t, c) => {
       var l;
-      return t && typeof t.func == "function" ? o`<dap-ds-button
+      return t && typeof t.func == "function" ? e`<dap-ds-button
               variant=${(l = t.variant) != null ? l : "primary"}
               data-testid=${`snackbar-action-${c}`}
               @click=${() => {
         t.func && t.func();
       }}
               >${a(t.text)}</dap-ds-button
-            >` : o`<dap-ds-link
+            >` : e`<dap-ds-link
               class="snackbar__link"
               href=${a(t.href)}
               target="${a(t.target)}"
@@ -63,7 +58,7 @@ const n = class n extends k {
         t = "error-warning-fill";
         break;
     }
-    return t.length > 0 ? o`<dap-ds-icon
+    return t.length > 0 ? e`<dap-ds-icon
           name=${t}
           size="lg"
           class="snackbar__alert-icon"></dap-ds-icon>` : p;
@@ -75,31 +70,31 @@ const n = class n extends k {
   }
   render() {
     var t;
-    return o`<div
+    return e`<div
       part="base"
-      class=${u(
+      class=${h(
       "snackbar",
       `snackbar--${this.alertType}`,
       `snackbar--position-${this.position}`,
       { "snackbar--closing": this.isClosing }
     )}
-      style=${b((t = this.customStyle) != null ? t : {})}>
+      style=${y((t = this.customStyle) != null ? t : {})}>
       <div class="snackbar__main">
         <div class="snackbar__left-group">
           ${this.getAlertTypeIcon()}
           <div class="snackbar__content">
-            ${this.message ? o`<span part="text" class="snackbar__text"
+            ${this.message ? e`<span part="text" class="snackbar__text"
                   >${this.message}</span
-                >` : o`<slot></slot>`}
-            ${this.actions ? o` ${this.getActions()}` : p}
+                >` : e`<slot></slot>`}
+            ${this.actions ? e` ${this.getActions()}` : p}
           </div>
         </div>
-        ${this.closeButton === "true" ? o`<dap-ds-icon-button
+        ${this.closeButton === "true" ? e`<dap-ds-icon-button
               @click=${() => this._close(this.id)}
               part="closebutton"
               data-testid=${this.closeButtonTestId}
               class="snackbar__close"
-              aria-label=${y("close")}>
+              aria-label=${this.localize.t("close")}>
               <dap-ds-icon
                 part="close-icon"
                 class="snackbar__close-icon"
@@ -115,31 +110,31 @@ n.tagName = "dap-ds-snackbar-message", n.dependencies = {
   "dap-ds-link": v,
   "dap-ds-icon": $,
   "dap-ds-icon-button": _
-}, n.styles = B(x);
+}, n.styles = m(x);
 let s = n;
-r([
-  i({ type: Array })
+i([
+  o({ type: Array })
 ], s.prototype, "actions");
-r([
-  i({ type: String })
+i([
+  o({ type: String })
 ], s.prototype, "message");
-r([
-  i({ type: String, reflect: !0 })
+i([
+  o({ type: String, reflect: !0 })
 ], s.prototype, "closeButton");
-r([
-  i({ type: String })
+i([
+  o({ type: String })
 ], s.prototype, "alertType");
-r([
-  i({ type: Object })
+i([
+  o({ type: Object })
 ], s.prototype, "customStyle");
-r([
-  i({ type: String })
+i([
+  o({ type: String })
 ], s.prototype, "position");
-r([
-  i()
+i([
+  o()
 ], s.prototype, "closeButtonTestId");
-r([
-  h()
+i([
+  b()
 ], s.prototype, "isClosing");
 export {
   s as default

package/dist/components/snackbar/snackbar-message.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar-message.component.js","sources":["../../../src/components/snackbar/snackbar-message.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\nimport { translate } from 'lit-i18n'\n\nimport { ActionType, AlertType, SnackbarPosition } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './snackbar-message.scss?inline'\n\n/**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart icon - The icon part of the close button.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\nexport default class DapDSSnackbarMessage extends DdsElement {\n  static tagName = 'dap-ds-snackbar-message'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-button': DapDSButton,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** The actions of the snackbar item. */\n  @property({ type: Array }) actions?: ActionType[] = []\n  /** The message of the snackbar item. */\n  @property({ type: String }) message = ''\n  /** Whether the snackbar has a close button. */\n  @property({ type: String, reflect: true }) closeButton = 'true'\n  /** The message type of the snackbar item. */\n  @property({ type: String }) alertType: AlertType = 'default'\n  /** The custom style of the snackbar item. */\n  @property({ type: Object }) customStyle?: Record<string, string>\n  /** The position of the snackbar container for directional animations. */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n  /** `data-testid` for the snackbar close button. */\n  @property() closeButtonTestId = 'snackbar-close-button'\n\n  @state() private isClosing = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getActions(): TemplateResult | typeof nothing {\n    if (this.actions && this.actions.length > 0) {\n      return html`<dap-ds-stack\n        part=\"actions\"\n        exportparts=\"base:actions-base\"\n        class=\"snackbar__actions\"\n        direction=\"row\">\n        ${this.actions.map((actionItem: ActionType, index: number) => {\n          if (actionItem && typeof actionItem.func === 'function') {\n            return html`<dap-ds-button\n              variant=${actionItem.variant ?? 'primary'}\n              data-testid=${`snackbar-action-${index}`}\n              @click=${() => {\n                if (actionItem.func) {\n                  actionItem.func()\n                }\n              }}\n              >${ifDefined(actionItem.text)}</dap-ds-button\n            >`\n          } else {\n            return html`<dap-ds-link\n              class=\"snackbar__link\"\n              href=${ifDefined(actionItem.href)}\n              target=\"${ifDefined(actionItem.target)}\"\n              rel=${ifDefined(actionItem.target ? actionItem.rel : undefined)}\n              >${ifDefined(actionItem.text)}</dap-ds-link\n            >`\n          }\n        })}\n      </dap-ds-stack>`\n    }\n    return nothing\n  }\n\n  private getAlertTypeIcon(): TemplateResult | typeof nothing {\n    let iconName = ''\n    switch (this.alertType) {\n      case 'information':\n        iconName = 'information-2-fill'\n        break\n      case 'successful':\n        iconName = 'checkbox-circle-fill'\n        break\n      case 'error':\n        iconName = 'error-warning-fill'\n        break\n      default:\n    }\n    return iconName.length > 0\n      ? html`<dap-ds-icon\n          name=${iconName}\n          size=\"lg\"\n          class=\"snackbar__alert-icon\"></dap-ds-icon>`\n      : nothing\n  }\n\n  private _close(id: string) {\n    if (id) {\n      this.isClosing = true\n      // Wait for the closing animation to complete before emitting the close event\n      setTimeout(() => {\n        this.emit('dds-close', { id })\n      }, 300) // Match the animation duration\n    }\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${clsx(\n        'snackbar',\n        `snackbar--${this.alertType}`,\n        `snackbar--position-${this.position}`,\n        { 'snackbar--closing': this.isClosing },\n      )}\n      style=${styleMap(this.customStyle ?? {})}>\n      <div class=\"snackbar__main\">\n        <div class=\"snackbar__left-group\">\n          ${this.getAlertTypeIcon()}\n          <div class=\"snackbar__content\">\n            ${this.message\n              ? html`<span part=\"text\" class=\"snackbar__text\"\n                  >${this.message}</span\n                >`\n              : html`<slot></slot>`}\n            ${this.actions ? html` ${this.getActions()}` : nothing}\n          </div>\n        </div>\n        ${this.closeButton === 'true'\n          ? html`<dap-ds-icon-button\n              @click=${() => this._close(this.id)}\n              part=\"closebutton\"\n              data-testid=${this.closeButtonTestId}\n              class=\"snackbar__close\"\n              aria-label=${translate('close')}>\n              <dap-ds-icon\n                part=\"close-icon\"\n                class=\"snackbar__close-icon\"\n                name=\"close-line\"></dap-ds-icon>\n            </dap-ds-icon-button>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSSnackbarMessage","DdsElement","html","actionItem","index","_a","ifDefined","nothing","iconName","id","clsx","styleMap","translate","DapDSStack","DapDSButton","DapDSLink","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSSnackbarMessage","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"snackbar-message.component.js","sources":["../../../src/components/snackbar/snackbar-message.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\n\nimport { ActionType, AlertType, SnackbarPosition } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './snackbar-message.scss?inline'\n\n/**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart close-icon - The icon of the close button.\n * @csspart actions - The actions container of the snackbar.\n * @csspart actions-base - The base of the actions container.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\nexport default class DapDSSnackbarMessage extends DdsElement {\n  static tagName = 'dap-ds-snackbar-message'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-button': DapDSButton,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** The actions of the snackbar item. */\n  @property({ type: Array }) actions?: ActionType[] = []\n  /** The message of the snackbar item. */\n  @property({ type: String }) message = ''\n  /** Whether the snackbar has a close button. */\n  @property({ type: String, reflect: true }) closeButton = 'true'\n  /** The message type of the snackbar item. */\n  @property({ type: String }) alertType: AlertType = 'default'\n  /** The custom style of the snackbar item. */\n  @property({ type: Object }) customStyle?: Record<string, string>\n  /** The position of the snackbar container for directional animations. */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n  /** `data-testid` for the snackbar close button. */\n  @property() closeButtonTestId = 'snackbar-close-button'\n\n  @state() private isClosing = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getActions(): TemplateResult | typeof nothing {\n    if (this.actions && this.actions.length > 0) {\n      return html`<dap-ds-stack\n        part=\"actions\"\n        exportparts=\"base:actions-base\"\n        class=\"snackbar__actions\"\n        direction=\"row\">\n        ${this.actions.map((actionItem: ActionType, index: number) => {\n          if (actionItem && typeof actionItem.func === 'function') {\n            return html`<dap-ds-button\n              variant=${actionItem.variant ?? 'primary'}\n              data-testid=${`snackbar-action-${index}`}\n              @click=${() => {\n                if (actionItem.func) {\n                  actionItem.func()\n                }\n              }}\n              >${ifDefined(actionItem.text)}</dap-ds-button\n            >`\n          } else {\n            return html`<dap-ds-link\n              class=\"snackbar__link\"\n              href=${ifDefined(actionItem.href)}\n              target=\"${ifDefined(actionItem.target)}\"\n              rel=${ifDefined(actionItem.target ? actionItem.rel : undefined)}\n              >${ifDefined(actionItem.text)}</dap-ds-link\n            >`\n          }\n        })}\n      </dap-ds-stack>`\n    }\n    return nothing\n  }\n\n  private getAlertTypeIcon(): TemplateResult | typeof nothing {\n    let iconName = ''\n    switch (this.alertType) {\n      case 'information':\n        iconName = 'information-2-fill'\n        break\n      case 'successful':\n        iconName = 'checkbox-circle-fill'\n        break\n      case 'error':\n        iconName = 'error-warning-fill'\n        break\n      default:\n    }\n    return iconName.length > 0\n      ? html`<dap-ds-icon\n          name=${iconName}\n          size=\"lg\"\n          class=\"snackbar__alert-icon\"></dap-ds-icon>`\n      : nothing\n  }\n\n  private _close(id: string) {\n    if (id) {\n      this.isClosing = true\n      // Wait for the closing animation to complete before emitting the close event\n      setTimeout(() => {\n        this.emit('dds-close', { id })\n      }, 300) // Match the animation duration\n    }\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${clsx(\n        'snackbar',\n        `snackbar--${this.alertType}`,\n        `snackbar--position-${this.position}`,\n        { 'snackbar--closing': this.isClosing },\n      )}\n      style=${styleMap(this.customStyle ?? {})}>\n      <div class=\"snackbar__main\">\n        <div class=\"snackbar__left-group\">\n          ${this.getAlertTypeIcon()}\n          <div class=\"snackbar__content\">\n            ${this.message\n              ? html`<span part=\"text\" class=\"snackbar__text\"\n                  >${this.message}</span\n                >`\n              : html`<slot></slot>`}\n            ${this.actions ? html` ${this.getActions()}` : nothing}\n          </div>\n        </div>\n        ${this.closeButton === 'true'\n          ? html`<dap-ds-icon-button\n              @click=${() => this._close(this.id)}\n              part=\"closebutton\"\n              data-testid=${this.closeButtonTestId}\n              class=\"snackbar__close\"\n              aria-label=${this.localize.t('close')}>\n              <dap-ds-icon\n                part=\"close-icon\"\n                class=\"snackbar__close-icon\"\n                name=\"close-line\"></dap-ds-icon>\n            </dap-ds-icon-button>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSSnackbarMessage","DdsElement","html","actionItem","index","_a","ifDefined","nothing","iconName","id","clsx","styleMap","DapDSStack","DapDSButton","DapDSLink","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSSnackbarMessage","__decorateClass","property","state"],"mappings":"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"}

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

@@ -7,7 +7,6 @@ import { default as DapDSSnackbarMessage } from './snackbar-message.component';
  * @element dap-ds-snackbar
  * @title - Snackbar
  *
- * @csspart host - The host element
  * @csspart message - The message part of the snackbar
  * @csspart message-base - The base part of the message
  * @csspart message-text - The text part of the message

package/dist/components/snackbar/snackbar.component.js

@@ -11,36 +11,30 @@ var m = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writab
   return t;
 }, c = (t, e) => v(t, k(e));
 import { clsx as C } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as w } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
-import { repeat as T } from "../../node_modules/lit-html/directives/repeat.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import "../../localization/localization.js";
-import { DdsElement as A } from "../../internal/dds-hu-element.js";
-import x from "./snackbar.scss.js";
-import $ from "./snackbar-message.component.js";
-import { unsafeCSS as S } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as L } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var N = Object.defineProperty, l = (t, e, s, o) => {
+import { unsafeCSS as T } from "lit";
+import { property as h, state as w } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { repeat as A } from "lit/directives/repeat.js";
+import { html as f } from "lit/static-html.js";
+import { DdsElement as x } from "../../internal/dds-hu-element.js";
+import $ from "./snackbar.scss.js";
+import S from "./snackbar-message.component.js";
+var L = Object.defineProperty, l = (t, e, s, a) => {
   for (var i = void 0, n = t.length - 1, u; n >= 0; n--)
     (u = t[n]) && (i = u(e, s, i) || i);
-  return i && N(e, s, i), i;
+  return i && L(e, s, i), i;
 };
 const g = "dds-snackbar-announcer";
 typeof window != "undefined" && (window.showDapSnackbar = (t, e) => {
-  a.show(t, e);
+  o.show(t, e);
 }, window.closeAllDapSnackbars = () => {
-  a.closeAll();
+  o.closeAll();
 });
-const d = class d extends A {
+const d = class d extends x {
   constructor() {
     super(...arguments), this.maxItems = 4, this.position = "bottom-right", this.duration = 6e3, this.announceMessages = !0, this.messages = [], this.idCounter = 0, this.timeouts = /* @__PURE__ */ new Map(), this.handleShowSnackbarEvent = (e) => {
-      const { message: s, options: o } = e.detail;
-      this.addMessage(s, o);
+      const { message: s, options: a } = e.detail;
+      this.addMessage(s, a);
     }, this.handleCloseAllEvent = () => {
       this.closeAll();
     }, this.handleKeyDown = (e) => {
@@ -119,13 +113,13 @@ const d = class d extends A {
       console.warn("DapDSSnackbar: Message must be a non-empty string");
       return;
     }
-    const o = this.generateId();
+    const a = this.generateId();
     this.messages.length >= this.maxItems && this.sliceMessage();
     const i = r({
-      id: o,
+      id: a,
       message: e.trim()
     }, s && { options: s });
-    this.messages = [...this.messages, i], this.elapseMessages(o, s == null ? void 0 : s.duration, s == null ? void 0 : s.persistent), this.announceMessages && this.announceToScreenReader(e);
+    this.messages = [...this.messages, i], this.elapseMessages(a, s == null ? void 0 : s.duration, s == null ? void 0 : s.persistent), this.announceMessages && this.announceToScreenReader(e);
   }
   sliceMessage() {
     this.messages && (this.messages = this.messages.slice(1));
@@ -135,8 +129,8 @@ const d = class d extends A {
       (s) => s.id !== e
     ), this.clearTimeout(e));
   }
-  elapseMessages(e, s, o) {
-    if (o)
+  elapseMessages(e, s, a) {
+    if (a)
       return;
     const i = s != null ? s : this.duration, n = setTimeout(() => {
       this.removeMessage(e);
@@ -182,9 +176,9 @@ const d = class d extends A {
       clip: "rect(0 0 0 0)",
       whiteSpace: "nowrap"
     }), document.body.appendChild(s)), s.textContent = "";
-    const o = s;
+    const a = s;
     setTimeout(() => {
-      o.textContent = e;
+      a.textContent = e;
     }, 100);
   }
   _closeMessage(e) {
@@ -195,12 +189,12 @@ const d = class d extends A {
     return f`<div
       class=${C("snackbar", `snackbar--${this.position}`)}
       role="region"
-      aria-label=${L("snackbar.notifications")}>
-      ${T(
+      aria-label=${this.localize.t("snackbar.notifications")}>
+      ${A(
       this.messages,
       (e) => e.id,
       (e) => {
-        var s, o, i, n;
+        var s, a, i, n;
         return f`
           <dap-ds-snackbar-message
             part="message"
@@ -209,7 +203,7 @@ const d = class d extends A {
             id=${e.id}
             message=${e.message}
             alertType=${b((s = e == null ? void 0 : e.options) == null ? void 0 : s.alertType)}
-            .actions=${(o = e == null ? void 0 : e.options) == null ? void 0 : o.actions}
+            .actions=${(a = e == null ? void 0 : e.options) == null ? void 0 : a.actions}
             closeButton=${b((i = e == null ? void 0 : e.options) == null ? void 0 : i.closeButton)}
             .customStyle=${(n = e == null ? void 0 : e.options) == null ? void 0 : n.customStyle}
             position=${this.position}></dap-ds-snackbar-message>
@@ -220,28 +214,28 @@ const d = class d extends A {
   }
 };
 d.tagName = "dap-ds-snackbar", d.dependencies = {
-  "dap-ds-snackbar-message": $
-}, d.styles = S(x);
-let a = d;
+  "dap-ds-snackbar-message": S
+}, d.styles = T($);
+let o = d;
 l([
   h({ type: Number })
-], a.prototype, "maxItems");
+], o.prototype, "maxItems");
 l([
   h({ type: String })
-], a.prototype, "position");
+], o.prototype, "position");
 l([
   h({ type: Number })
-], a.prototype, "duration");
+], o.prototype, "duration");
 l([
   h({ type: Boolean })
-], a.prototype, "announceMessages");
+], o.prototype, "announceMessages");
 l([
   w()
-], a.prototype, "messages");
+], o.prototype, "messages");
 l([
   w()
-], a.prototype, "idCounter");
+], o.prototype, "idCounter");
 export {
-  a as default
+  o as default
 };
 //# sourceMappingURL=snackbar.component.js.map