dap-design-system 0.62.3 → 0.63.0

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

@@ -1 +1 @@
-{"version":3,"file":"badge.component.js","sources":["../../../src/components/badge/badge.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './badge.scss?inline'\n\nconst BadgeBaseWithSized = SizedMixin(DdsElement)\n\nexport type BadgeType =\n  | 'neutral'\n  | 'brand'\n  | 'info'\n  | 'positive'\n  | 'warning'\n  | 'negative'\n\nexport type BadgeSize = 'sm' | 'lg'\n\n/**\n * `dap-ds-badge`\n * @summary A badge is a small status descriptor for UI elements.\n * @element dap-ds-badge\n * @title - Badge\n *\n * @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the badge.\n * @slot icon - The icon of the badge.\n *\n * @csspart base - The main container of the badge.\n * @csspart icon - The icon of the badge.\n * @csspart content - The content of the badge.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-badge-border-width - The width of the badge's border (default: var(--dds-border-width-base))\n * @cssproperty --dds-badge-border-style - The style of the badge's border (default: solid)\n * @cssproperty --dds-badge-border-radius - The border radius of the badge (default: var(--dds-radius-base))\n * @cssproperty --dds-badge-font-weight - The font weight of the badge text (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-badge-line-height - The line height of the badge text (default: 1.2)\n * @cssproperty --dds-badge-transition - The transition property for the badge (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-badge-padding-sm - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-badge-padding-lg - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-badge-font-size-sm - The font size of the small badge (default: var(--dds-font-xs))\n * @cssproperty --dds-badge-font-size-lg - The font size of the large badge (default: var(--dds-font-sm))\n *\n * @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-badge-neutral-background - The background color of the neutral badge (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-badge-neutral-color - The text color of the neutral badge (default: var(--dds-text-neutral-subtle))\n *\n * @cssproperty --dds-badge-brand-border-color - The border color of the brand badge (default: var(--dds-border-brand-base))\n * @cssproperty --dds-badge-brand-background - The background color of the brand badge (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-badge-brand-color - The text color of the brand badge (default: var(--dds-text-brand-subtle))\n *\n * @cssproperty --dds-badge-info-border-color - The border color of the info badge (default: var(--dds-border-informative-base))\n * @cssproperty --dds-badge-info-background - The background color of the info badge (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-badge-info-color - The text color of the info badge (default: var(--dds-text-informative-subtle))\n *\n * @cssproperty --dds-badge-positive-border-color - The border color of the positive badge (default: var(--dds-border-positive-base))\n * @cssproperty --dds-badge-positive-background - The background color of the positive badge (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-badge-positive-color - The text color of the positive badge (default: var(--dds-text-positive-subtle))\n *\n * @cssproperty --dds-badge-warning-border-color - The border color of the warning badge (default: var(--dds-border-warning-subtle))\n * @cssproperty --dds-badge-warning-background - The background color of the warning badge (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-badge-warning-color - The text color of the warning badge (default: var(--dds-text-warning-subtle))\n *\n * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base))\n * @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle))\n *\n */\nexport default class DapDSBadge extends BadgeBaseWithSized {\n  static tagName = 'dap-ds-badge'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-stack': DapDSStack,\n  }\n\n  /** The type of the badge\n   * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }\n   */\n  @property() type: BadgeType = 'neutral'\n\n  /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */\n  private get badgeSize(): BadgeSize {\n    const s = this.effectiveSize\n    return s === 'lg' || s === 'md' ? 'lg' : 'sm'\n  }\n\n  /** The icon of the badge, this is a name of a built in icon */\n  @property() icon?: string\n\n  /** Whether the badge represents dynamic content that should announce changes */\n  @property({ type: Boolean }) live = false\n\n  private _hasSlottedIcon = false\n  private _cachedIconSize = 12\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.setAccessibilityAttributes()\n\n    this._cachedIconSize = this.getIconSize(this.badgeSize)\n    this.setupSlotListeners()\n    this.updateIconSlot()\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('size') || _changedProperties.has('sizeMap')) {\n      this._cachedIconSize = this.getIconSize(this.badgeSize)\n      this.updateIconSlot()\n    }\n\n    if (_changedProperties.has('live')) {\n      this.setAccessibilityAttributes()\n    }\n\n    if (_changedProperties.has('icon')) {\n      this.validateIcon()\n    }\n  }\n\n  private setAccessibilityAttributes(): void {\n    if (this.live) {\n      this.setAttribute('role', 'status')\n      this.setAttribute('aria-live', 'polite')\n    } else {\n      this.removeAttribute('role')\n      this.removeAttribute('aria-live')\n    }\n  }\n\n  private validateIcon(): void {\n    if (this.icon && typeof this.icon === 'string' && this.icon.trim() === '') {\n      console.warn('Badge: Empty icon name provided')\n    }\n  }\n\n  private setupSlotListeners(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) return\n\n      iconSlot.addEventListener('slotchange', () => {\n        this.updateIconSlot()\n        this.requestUpdate()\n      })\n    } catch (error) {\n      console.warn('Failed to setup slot listeners:', error)\n    }\n  }\n\n  private updateIconSlot(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) {\n        this._hasSlottedIcon = false\n        return\n      }\n\n      const assignedElements = iconSlot.assignedElements()\n      this._hasSlottedIcon = assignedElements.length > 0\n\n      if (assignedElements.length > 0) {\n        assignedElements[0].setAttribute(\n          'staticSize',\n          this._cachedIconSize.toString(),\n        )\n      }\n    } catch (error) {\n      console.warn('Failed to update icon slot:', error)\n      this._hasSlottedIcon = false\n    }\n  }\n\n  private getIconSize(size: BadgeSize): number {\n    return size === 'sm' ? 12 : 16\n  }\n\n  private renderIcon() {\n    if (this.icon) {\n      return html`\n        <dap-ds-icon\n          part=\"icon\"\n          exportparts=\"icon, base:icon-base\"\n          name=\"${this.icon}\"\n          staticSize=${this._cachedIconSize}>\n        </dap-ds-icon>\n      `\n    }\n\n    return html`<slot name=\"icon\" part=\"icon\"></slot>`\n  }\n\n  render() {\n    const hasIcon = this.icon || this._hasSlottedIcon\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'badge',\n          `badge--${this.type}`,\n          `badge--${this.badgeSize}`,\n          hasIcon && 'badge--has-icon',\n        )}>\n        <dap-ds-stack direction=\"row\" spacing=\"100\">\n          ${hasIcon ? this.renderIcon() : nothing}\n          <slot part=\"content\"></slot>\n        </dap-ds-stack>\n      </div>\n    `\n  }\n}\n"],"names":["BadgeBaseWithSized","SizedMixin","DdsElement","_DapDSBadge","s","_changedProperties","iconSlot","error","assignedElements","size","html","hasIcon","clsx","nothing","DapDSIcon","DapDSStack","unsafeCSS","styles","DapDSBadge","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"badge.component.js","sources":["../../../src/components/badge/badge.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './badge.scss?inline'\n\nconst BadgeBaseWithSized = SizedMixin(DdsElement)\n\nexport type BadgeType =\n  | 'neutral'\n  | 'brand'\n  | 'info'\n  | 'positive'\n  | 'warning'\n  | 'negative'\n\nexport type BadgeSize = 'sm' | 'lg'\n\n/**\n * `dap-ds-badge`\n * @summary A badge is a small status descriptor for UI elements.\n * @element dap-ds-badge\n * @title - Badge\n *\n * @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the badge.\n * @slot icon - The icon of the badge.\n *\n * @csspart base - The main container of the badge.\n * @csspart icon - The icon of the badge.\n * @csspart content - The content of the badge.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-badge-border-width - The width of the badge's border (default: var(--dds-border-width-base))\n * @cssproperty --dds-badge-border-style - The style of the badge's border (default: solid)\n * @cssproperty --dds-badge-border-radius - The border radius of the badge (default: var(--dds-radius-base))\n * @cssproperty --dds-badge-font-weight - The font weight of the badge text (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-badge-line-height - The line height of the badge text (default: 1.2)\n * @cssproperty --dds-badge-transition - The transition property for the badge (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-badge-padding-sm - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-badge-padding-lg - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-badge-font-size-sm - The font size of the small badge (default: var(--dds-font-xs))\n * @cssproperty --dds-badge-font-size-lg - The font size of the large badge (default: var(--dds-font-sm))\n *\n * @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-badge-neutral-background - The background color of the neutral badge (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-badge-neutral-color - The text color of the neutral badge (default: var(--dds-text-neutral-subtle))\n *\n * @cssproperty --dds-badge-brand-border-color - The border color of the brand badge (default: var(--dds-border-brand-base))\n * @cssproperty --dds-badge-brand-background - The background color of the brand badge (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-badge-brand-color - The text color of the brand badge (default: var(--dds-text-brand-subtle))\n *\n * @cssproperty --dds-badge-info-border-color - The border color of the info badge (default: var(--dds-border-informative-base))\n * @cssproperty --dds-badge-info-background - The background color of the info badge (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-badge-info-color - The text color of the info badge (default: var(--dds-text-informative-subtle))\n *\n * @cssproperty --dds-badge-positive-border-color - The border color of the positive badge (default: var(--dds-border-positive-base))\n * @cssproperty --dds-badge-positive-background - The background color of the positive badge (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-badge-positive-color - The text color of the positive badge (default: var(--dds-text-positive-subtle))\n *\n * @cssproperty --dds-badge-warning-border-color - The border color of the warning badge (default: var(--dds-border-warning-subtle))\n * @cssproperty --dds-badge-warning-background - The background color of the warning badge (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-badge-warning-color - The text color of the warning badge (default: var(--dds-text-warning-subtle))\n *\n * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base))\n * @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle))\n *\n */\nexport default class DapDSBadge extends BadgeBaseWithSized {\n  static tagName = 'dap-ds-badge'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-stack': DapDSStack,\n  }\n\n  /** The type of the badge\n   * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }\n   */\n  @property() type: BadgeType = 'neutral'\n\n  /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */\n  private get badgeSize(): BadgeSize {\n    const s = this.effectiveSize\n    return s === 'lg' || s === 'md' ? 'lg' : 'sm'\n  }\n\n  /** The icon of the badge, this is a name of a built in icon */\n  @property() icon?: string\n\n  /** Whether the badge represents dynamic content that should announce changes */\n  @property({ type: Boolean }) live = false\n\n  private _hasSlottedIcon = false\n  private _cachedIconSize = 12\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.setAccessibilityAttributes()\n\n    this._cachedIconSize = this.getIconSize(this.badgeSize)\n    this.setupSlotListeners()\n    this.updateIconSlot()\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('size') || _changedProperties.has('sizeMap')) {\n      this._cachedIconSize = this.getIconSize(this.badgeSize)\n      this.updateIconSlot()\n    }\n\n    if (_changedProperties.has('live')) {\n      this.setAccessibilityAttributes()\n    }\n\n    if (_changedProperties.has('icon')) {\n      this.validateIcon()\n    }\n  }\n\n  private setAccessibilityAttributes(): void {\n    if (this.live) {\n      this.setAttribute('role', 'status')\n      this.setAttribute('aria-live', 'polite')\n    } else {\n      this.removeAttribute('role')\n      this.removeAttribute('aria-live')\n    }\n  }\n\n  private validateIcon(): void {\n    if (this.icon && typeof this.icon === 'string' && this.icon.trim() === '') {\n      console.warn('Badge: Empty icon name provided')\n    }\n  }\n\n  private setupSlotListeners(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) return\n\n      iconSlot.addEventListener('slotchange', () => {\n        this.updateIconSlot()\n        this.requestUpdate()\n      })\n    } catch (error) {\n      console.warn('Failed to setup slot listeners:', error)\n    }\n  }\n\n  private updateIconSlot(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) {\n        this._hasSlottedIcon = false\n        return\n      }\n\n      const assignedElements = iconSlot.assignedElements()\n      this._hasSlottedIcon = assignedElements.length > 0\n\n      if (assignedElements.length > 0) {\n        assignedElements[0].setAttribute(\n          'staticSize',\n          this._cachedIconSize.toString(),\n        )\n      }\n    } catch (error) {\n      console.warn('Failed to update icon slot:', error)\n      this._hasSlottedIcon = false\n    }\n  }\n\n  private getIconSize(size: BadgeSize): number {\n    return size === 'sm' ? 12 : 16\n  }\n\n  private renderIcon() {\n    if (this.icon) {\n      return html`\n        <dap-ds-icon\n          part=\"icon\"\n          exportparts=\"icon, base:icon-base\"\n          name=\"${this.icon}\"\n          staticSize=${this._cachedIconSize}>\n        </dap-ds-icon>\n      `\n    }\n\n    return html`<slot name=\"icon\" part=\"icon\"></slot>`\n  }\n\n  render() {\n    const hasIcon = this.icon || this._hasSlottedIcon\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'badge',\n          `badge--${this.type}`,\n          `badge--${this.badgeSize}`,\n          hasIcon && 'badge--has-icon',\n        )}>\n        <dap-ds-stack direction=\"row\" spacing=\"100\">\n          ${hasIcon ? this.renderIcon() : nothing}\n          <slot part=\"content\"></slot>\n        </dap-ds-stack>\n      </div>\n    `\n  }\n}\n"],"names":["BadgeBaseWithSized","SizedMixin","DdsElement","_DapDSBadge","s","_changedProperties","iconSlot","error","assignedElements","size","html","hasIcon","clsx","nothing","DapDSIcon","DapDSStack","unsafeCSS","styles","DapDSBadge","__decorateClass","property"],"mappings":"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"}

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

@@ -1,25 +1,19 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as b } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as r } from "../../node_modules/lit-html/static.js";
-import { translate as u } 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 b } from "lit";
+import { queryAssignedElements as f, query as u, property as a } from "lit/decorators.js";
+import { html as r } from "lit/static-html.js";
 import { DdsElement as v } from "../../internal/dds-hu-element.js";
 import y from "../card/card.component.js";
 import g from "../card/card-content.component.js";
 import _ from "../icon/icon.component.js";
 import C from "../icon-button/icon-button.component.js";
 import S from "./banner.scss.js";
-import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var x = Object.defineProperty, e = (p, i, n, c) => {
-  for (var t = void 0, l = p.length - 1, d; l >= 0; l--)
-    (d = p[l]) && (t = d(i, n, t) || t);
-  return t && x(i, n, t), t;
+var $ = Object.defineProperty, e = (d, i, n, c) => {
+  for (var t = void 0, l = d.length - 1, p; l >= 0; l--)
+    (p = d[l]) && (t = p(i, n, t) || t);
+  return t && $(i, n, t), t;
 };
-const E = {
+const x = {
   brand: "information-2-fill",
   info: "information-fill",
   positive: "checkbox-circle-fill",
@@ -42,14 +36,14 @@ const E = {
   }
   render() {
     var n;
-    const i = E[this.variant];
-    return this.opened === "false" ? f : r`
+    const i = x[this.variant];
+    return this.opened === "false" ? b : r`
       <dap-ds-card size="lg">
         <dap-ds-card-content
-          class=${m(`banner--${this.variant}`)}
+          class=${h(`banner--${this.variant}`)}
           part="card-base"
           spacing="none">
-          <div class=${m("banner", `banner--${this.variant}`)} part="base">
+          <div class=${h("banner", `banner--${this.variant}`)} part="base">
             <div class="banner__icon-container">
               ${this.icon || i ? r`<slot part="icon" name="icon">
                     <dap-ds-icon
@@ -81,9 +75,9 @@ const E = {
                     icon="close-line"
                     part="closebutton"
                     @click="${this.onCloseClick}"
-                    aria-label=${(n = this.closeButtonLabel) != null ? n : u("close")}>
+                    aria-label=${(n = this.closeButtonLabel) != null ? n : this.localize.t("close")}>
                   </dap-ds-icon-button>
-                ` : f}
+                ` : b}
           </div>
         </dap-ds-card-content>
       </dap-ds-card>
@@ -95,13 +89,13 @@ s.tagName = "dap-ds-banner", s.dependencies = {
   "dap-ds-card-content": g,
   "dap-ds-icon": _,
   "dap-ds-icon-button": C
-}, s.styles = $(S);
+}, s.styles = m(S);
 let o = s;
 e([
-  b({ slot: "actions" })
+  f({ slot: "actions" })
 ], o.prototype, "actionSlot");
 e([
-  h(".banner__actions")
+  u(".banner__actions")
 ], o.prototype, "actionContainer");
 e([
   a()

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'\nimport { translate } from 'lit-i18n'\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 ?? translate('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","translate","DapDSCard","DapDSCardContent","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSBanner","__decorateClass","queryAssignedElements","query","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,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;AAAAA;AAAAA;AAAAA,kBAGOC,EAAK,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,uBAG1BA,EAAK,UAAU,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA,gBAEhD,KAAK,QAAQH,IACXE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,8BAMY,KAAK,QAAQF,CAAI;AAAA;AAAA,8BAG7BE,wCAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAU/C,KAAK,YACHA;AAAAA;AAAAA;AAAAA;AAAAA,kCAIkB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAO1B,KAAK,YAAY;AAAA,kCACdL,IAAA,KAAK,qBAAL,OAAAA,IAAyBO,EAAU,OAAO,CAAC;AAAA;AAAA,oBAG5DH,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvB;AAvHEP,EAAO,UAAU,iBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeW;AAAA,EACf,uBAAuBC;AAAA,EACvB,eAAeC;AAAA,EACf,sBAAsBC;AACxB,GA4BgBd,EAAA,SAASe,EAAUC,CAAM;AApC3C,IAAqBC,IAArBjB;AAW8CkB,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)
@@ -33,6 +33,7 @@ export default class DapDSBreadcrumb extends DdsElement {
     ariaLabelledBy?: string;
     private _cachedItems;
     private _debounceTimeout?;
+    protected firstUpdated(): void;
     private cloneSeparator;
     private handleSlotChange;
     private _updateBreadcrumbItems;

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -1,23 +1,23 @@
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as c } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
-import b from "../breadcrumb-item/breadcrumb-item.component.js";
+import { unsafeCSS as c, html as f } from "lit";
+import { query as m, property as n } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { DdsElement as b } from "../../internal/dds-hu-element.js";
+import g from "../breadcrumb-item/breadcrumb-item.component.js";
 import y from "./breadcrumb.scss.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, o = (p, r, l, t) => {
-  for (var e = void 0, a = p.length - 1, d; a >= 0; a--)
-    (d = p[a]) && (e = d(r, l, e) || e);
-  return e && v(r, l, e), e;
+var v = Object.defineProperty, i = (d, e, l, t) => {
+  for (var a = void 0, r = d.length - 1, p; r >= 0; r--)
+    (p = d[r]) && (a = p(e, l, a) || a);
+  return a && v(e, l, a), a;
 };
-const i = class i extends f {
+const o = class o extends b {
   constructor() {
     super(...arguments), this.variant = "normal", this.mobile = !1, this._cachedItems = [];
   }
+  firstUpdated() {
+    var e;
+    (e = this.defaultSlot) != null && e.assignedElements({ flatten: !0 }).length && this._updateBreadcrumbItems();
+  }
   cloneSeparator() {
     return this.separatorSlot.assignedElements({
       flatten: !0
@@ -29,27 +29,27 @@ const i = class i extends f {
     }, 16);
   }
   _updateBreadcrumbItems() {
-    const r = Array.from(
+    const e = Array.from(
       this.defaultSlot.assignedElements({ flatten: !0 })
     ).filter(
-      (t) => t instanceof b
+      (t) => t instanceof g
     );
-    (r.length !== this._cachedItems.length || r.some((t, e) => t !== this._cachedItems[e])) && (this._cachedItems = r, r.forEach((t, e) => {
-      const a = e === r.length - 1;
-      if (this.mobile && e !== 0 && !a) {
+    (e.length !== this._cachedItems.length || e.some((t, a) => t !== this._cachedItems[a])) && (this._cachedItems = e, e.forEach((t, a) => {
+      const r = a === e.length - 1;
+      if (this.mobile && a !== 0 && !r) {
         t.style.display = "none";
         return;
       } else
         t.style.display = "";
-      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, a ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", a), t.inheritedSeparator = a ? void 0 : this.cloneSeparator();
+      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, r ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", r), t.inheritedSeparator = r ? void 0 : this.cloneSeparator();
     }));
   }
   render() {
-    return c`
+    return f`
       <nav
         part="base"
-        aria-label="${m(this.ariaLabel) || ""}"
-        aria-labelledby="${m(this.ariaLabelledBy) || ""}"
+        aria-label="${h(this.ariaLabel) || ""}"
+        aria-labelledby="${h(this.ariaLabelledBy) || ""}"
         class="${u("breadcrumb")}">
         <ol class="breadcrumb__list" part="list">
           <slot @slotchange="${this.handleSlotChange}"></slot>
@@ -61,21 +61,21 @@ const i = class i extends f {
     `;
   }
 };
-i.tagName = "dap-ds-breadcrumb", i.styles = g(y);
-let s = i;
-o([
-  h("slot")
+o.tagName = "dap-ds-breadcrumb", o.styles = c(y);
+let s = o;
+i([
+  m("slot")
 ], s.prototype, "defaultSlot");
-o([
-  h('slot[name="separator"]')
+i([
+  m('slot[name="separator"]')
 ], s.prototype, "separatorSlot");
-o([
+i([
   n({ type: String })
 ], s.prototype, "variant");
-o([
+i([
   n({ type: Boolean })
 ], s.prototype, "mobile");
-o([
+i([
   n({ type: String, attribute: "aria-labelledby" })
 ], s.prototype, "ariaLabelledBy");
 export {

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  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","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,EAGvC,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;AAAAA;AAAAA;AAAAA,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;AAvGEV,EAAO,UAAU,qBAEDA,EAAA,SAASW,EAAUC,CAAM;AAH3C,IAAqBC,IAArBb;AAKiBc,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/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { LinkTarget } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element.js';
 import { default as DapDSIcon } from '../icon/icon.component';
@@ -62,6 +63,13 @@ export default class DapDSBreadcrumbItem extends DdsElement {
      */
     inheritedSeparator?: HTMLElement;
     static readonly styles: import('lit').CSSResult;
+    /**
+     * The inherited separator is a DOM node, so it is only rendered after the
+     * first update: the first render (and so an SSR hydration render) always
+     * shows the default icon, matching the server output. A separator handed
+     * down before that is picked up by this follow-up render.
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     private _shouldIncludeRel;
 }

package/dist/components/breadcrumb-item/breadcrumb-item.component.js

@@ -1,29 +1,34 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as o } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m, html as o } from "lit";
+import { property as r } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
 import c from "../icon/icon.component.js";
-import u from "../link/link.component.js";
-import b from "./breadcrumb-item.scss.js";
-import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, s = (p, i, l, g) => {
-  for (var r = void 0, n = p.length - 1, d; n >= 0; n--)
-    (d = p[n]) && (r = d(i, l, r) || r);
-  return r && y(i, l, r), r;
+import b from "../link/link.component.js";
+import v from "./breadcrumb-item.scss.js";
+var y = Object.defineProperty, s = (n, a, d, g) => {
+  for (var e = void 0, p = n.length - 1, l; p >= 0; p--)
+    (l = n[p]) && (e = l(a, d, e) || e);
+  return e && y(a, d, e), e;
 };
-const a = class a extends f {
+const i = class i extends u {
   constructor() {
     super(...arguments), this.rel = "noreferrer noopener", this.disabled = !1, this.variant = "normal";
   }
+  /**
+   * The inherited separator is a DOM node, so it is only rendered after the
+   * first update: the first render (and so an SSR hydration render) always
+   * shows the default icon, matching the server output. A separator handed
+   * down before that is picked up by this follow-up render.
+   */
+  firstUpdated(a) {
+    super.firstUpdated(a), this.inheritedSeparator && this.requestUpdate();
+  }
   render() {
-    var i;
     return o`
       <li
         part="base"
-        class=${m("breadcrumb-item", {
+        class=${f("breadcrumb-item", {
       "breadcrumb-item--inverted": this.variant === "inverted"
     })}>
         ${this.href ? o`
@@ -50,7 +55,7 @@ const a = class a extends f {
           aria-hidden="true"
           role="presentation">
           <slot name="separator">
-            ${(i = this.inheritedSeparator) != null ? i : o`<dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>`}
+            ${this.hasUpdated && this.inheritedSeparator || o`<dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>`}
           </slot>
         </span>
       </li>
@@ -60,28 +65,28 @@ const a = class a extends f {
     return this.href ? this.target !== void 0 || this.href.startsWith("http") : !1;
   }
 };
-a.tagName = "dap-ds-breadcrumb-item", a.dependencies = {
-  "dap-ds-link": u,
+i.tagName = "dap-ds-breadcrumb-item", i.dependencies = {
+  "dap-ds-link": b,
   "dap-ds-icon": c
-}, a.styles = v(b);
-let t = a;
+}, i.styles = m(v);
+let t = i;
 s([
-  e()
+  r()
 ], t.prototype, "href");
 s([
-  e()
+  r()
 ], t.prototype, "target");
 s([
-  e()
+  r()
 ], t.prototype, "rel");
 s([
-  e({ type: Boolean })
+  r({ type: Boolean })
 ], t.prototype, "disabled");
 s([
-  e({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "variant");
 s([
-  e({ attribute: !1 })
+  r({ attribute: !1 })
 ], t.prototype, "inheritedSeparator");
 export {
   t as default

package/dist/components/breadcrumb-item/breadcrumb-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.component.js","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSLink from '../link/link.component'\nimport styles from './breadcrumb-item.scss?inline'\n\n/**\n * `dap-ds-breadcrumb-item` custom element.\n * @element dap-ds-breadcrumb-item\n * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @title - Breadcrumb item\n * @group breadcrumb\n *\n * @slot - The content of the breadcrumb item.\n * @slot separator - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n *\n * @csspart base - The main breadcrumb item container. The li element.\n * @csspart link - The link of the breadcrumb item. The dds-link component.\n * @csspart link-base - The base part of the link part. The dds-link components base part.\n * @csspart item-nolink - The item of the breadcrumb item without a link. The span element.\n * @csspart separator - The separator of the breadcrumb item.\n *\n * @cssproperty --dds-breadcrumb-item-display - The display property of the breadcrumb item (default: inline-flex)\n * @cssproperty --dds-breadcrumb-item-flex-wrap - The flex-wrap property of the breadcrumb item (default: nowrap)\n * @cssproperty --dds-breadcrumb-item-align-items - The align-items property of the breadcrumb item (default: center)\n * @cssproperty --dds-breadcrumb-item-color - The text color of the breadcrumb item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-breadcrumb-item-transition - The transition property for the breadcrumb item (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-item-gap - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-padding - The padding of the breadcrumb item (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-font-size - The font size of the breadcrumb item (default: var(--dds-font-sm))\n * @cssproperty --dds-breadcrumb-item-font-weight - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-breadcrumb-item-font-weight-bold - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-breadcrumb-item-separator-color - The color of the separator (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-breadcrumb-item-link-color - The color of the link (default: var(--dds-link-neutral-enabled))\n * @cssproperty --dds-breadcrumb-item-inverted-color - The text color when inverted (default: var(--dds-text-neutral-inverted))\n * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted (default: var(--dds-text-neutral-inverted))\n */\nexport default class DapDSBreadcrumbItem extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb-item'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The URL of the breadcrumb item. */\n  @property() href?: string\n  /** The target of the breadcrumb item.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target?: LinkTarget\n  /** The rel of the breadcrumb item link. */\n  @property() rel = 'noreferrer noopener'\n  /** Whether the breadcrumb item is disabled. */\n  @property({ type: Boolean }) disabled = false\n  /** The variant of the breadcrumb item.\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String, reflect: true }) variant = 'normal'\n\n  /**\n   * The separator handed down by the parent `dap-ds-breadcrumb`, rendered as\n   * the fallback content of this item's `separator` slot. Set by the parent —\n   * not part of the public API, and deliberately property-only so nothing is\n   * written into the item's light DOM.\n   * @ignore\n   */\n  @property({ attribute: false }) inheritedSeparator?: HTMLElement\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        class=${clsx('breadcrumb-item', {\n          'breadcrumb-item--inverted': this.variant === 'inverted',\n        })}>\n        ${this.href\n          ? html`\n              <dap-ds-link\n                theme=\"brand\"\n                bold\n                part=\"link\"\n                exportparts=\"base:link-base\"\n                href=${this.href}\n                target=${ifDefined(this.target)}\n                rel=${ifDefined(\n                  this._shouldIncludeRel() ? this.rel : undefined,\n                )}\n                .disabled=${this.disabled}>\n                <slot></slot>\n              </dap-ds-link>\n            `\n          : html`<span part=\"item-nolink\" class=\"breadcrumb-item-nolink\">\n              <slot></slot>\n            </span>`}\n\n        <span\n          part=\"separator\"\n          class=\"breadcrumb-item__separator\"\n          aria-hidden=\"true\"\n          role=\"presentation\">\n          <slot name=\"separator\">\n            ${this.inheritedSeparator ??\n            html`<dap-ds-icon name=\"arrow-right-s-line\"></dap-ds-icon>`}\n          </slot>\n        </span>\n      </li>\n    `\n  }\n\n  private _shouldIncludeRel(): boolean {\n    if (!this.href) return false\n    // Include rel for external links or when target is specified\n    return this.target !== undefined || this.href.startsWith('http')\n  }\n}\n"],"names":["_DapDSBreadcrumbItem","DdsElement","html","clsx","ifDefined","_a","DapDSLink","DapDSIcon","unsafeCSS","styles","DapDSBreadcrumbItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAeoB,KAAA,MAAA,uBAEsB,KAAA,WAAA,IAIa,KAAA,UAAA;AAAA,EAAA;AAAA,EAarD,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,mBAAmB;AAAA,MAC9B,6BAA6B,KAAK,YAAY;AAAA,IAAA,CAC/C,CAAC;AAAA,UACA,KAAK,OACHD;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,uBAMW,KAAK,IAAI;AAAA,yBACPE,EAAU,KAAK,MAAM,CAAC;AAAA,sBACzBA;AAAAA,MACJ,KAAK,kBAAA,IAAsB,KAAK,MAAM;AAAA,IACvC,CAAA;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAI7BF;AAAAA;AAAAA,oBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQNG,IAAA,KAAK,uBAAL,OAAAA,IACFH,wDAA2D;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAO7D,oBAA6B;AAC/B,WAAC,KAAK,OAEH,KAAK,WAAW,UAAa,KAAK,KAAK,WAAW,MAAM,IAFxC;AAAA,EAEwC;AAEnE;AA/EEF,EAAO,UAAU,0BAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeM;AAAA,EACf,eAAeC;AACjB,GA0BgBP,EAAA,SAASQ,EAAUC,CAAM;AAhC3C,IAAqBC,IAArBV;AAScW,EAAA;AAAA,EAAXC,EAAS;AAAA,GATSF,EASP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,QAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAfSF,EAeP,WAAA,KAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBRF,EAiBU,WAAA,UAAA;AAIcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GArBtBF,EAqBwB,WAAA,SAAA;AASXC,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAO,CAAA;AAAA,GA9BXF,EA8Ba,WAAA,oBAAA;"}
+{"version":3,"file":"breadcrumb-item.component.js","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValues, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSLink from '../link/link.component'\nimport styles from './breadcrumb-item.scss?inline'\n\n/**\n * `dap-ds-breadcrumb-item` custom element.\n * @element dap-ds-breadcrumb-item\n * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @title - Breadcrumb item\n * @group breadcrumb\n *\n * @slot - The content of the breadcrumb item.\n * @slot separator - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n *\n * @csspart base - The main breadcrumb item container. The li element.\n * @csspart link - The link of the breadcrumb item. The dds-link component.\n * @csspart link-base - The base part of the link part. The dds-link components base part.\n * @csspart item-nolink - The item of the breadcrumb item without a link. The span element.\n * @csspart separator - The separator of the breadcrumb item.\n *\n * @cssproperty --dds-breadcrumb-item-display - The display property of the breadcrumb item (default: inline-flex)\n * @cssproperty --dds-breadcrumb-item-flex-wrap - The flex-wrap property of the breadcrumb item (default: nowrap)\n * @cssproperty --dds-breadcrumb-item-align-items - The align-items property of the breadcrumb item (default: center)\n * @cssproperty --dds-breadcrumb-item-color - The text color of the breadcrumb item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-breadcrumb-item-transition - The transition property for the breadcrumb item (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-item-gap - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-padding - The padding of the breadcrumb item (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-font-size - The font size of the breadcrumb item (default: var(--dds-font-sm))\n * @cssproperty --dds-breadcrumb-item-font-weight - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-breadcrumb-item-font-weight-bold - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-breadcrumb-item-separator-color - The color of the separator (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-breadcrumb-item-link-color - The color of the link (default: var(--dds-link-neutral-enabled))\n * @cssproperty --dds-breadcrumb-item-inverted-color - The text color when inverted (default: var(--dds-text-neutral-inverted))\n * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted (default: var(--dds-text-neutral-inverted))\n */\nexport default class DapDSBreadcrumbItem extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb-item'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The URL of the breadcrumb item. */\n  @property() href?: string\n  /** The target of the breadcrumb item.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target?: LinkTarget\n  /** The rel of the breadcrumb item link. */\n  @property() rel = 'noreferrer noopener'\n  /** Whether the breadcrumb item is disabled. */\n  @property({ type: Boolean }) disabled = false\n  /** The variant of the breadcrumb item.\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String, reflect: true }) variant = 'normal'\n\n  /**\n   * The separator handed down by the parent `dap-ds-breadcrumb`, rendered as\n   * the fallback content of this item's `separator` slot. Set by the parent —\n   * not part of the public API, and deliberately property-only so nothing is\n   * written into the item's light DOM.\n   * @ignore\n   */\n  @property({ attribute: false }) inheritedSeparator?: HTMLElement\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * The inherited separator is a DOM node, so it is only rendered after the\n   * first update: the first render (and so an SSR hydration render) always\n   * shows the default icon, matching the server output. A separator handed\n   * down before that is picked up by this follow-up render.\n   */\n  protected firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties)\n    if (this.inheritedSeparator) {\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        class=${clsx('breadcrumb-item', {\n          'breadcrumb-item--inverted': this.variant === 'inverted',\n        })}>\n        ${this.href\n          ? html`\n              <dap-ds-link\n                theme=\"brand\"\n                bold\n                part=\"link\"\n                exportparts=\"base:link-base\"\n                href=${this.href}\n                target=${ifDefined(this.target)}\n                rel=${ifDefined(\n                  this._shouldIncludeRel() ? this.rel : undefined,\n                )}\n                .disabled=${this.disabled}>\n                <slot></slot>\n              </dap-ds-link>\n            `\n          : html`<span part=\"item-nolink\" class=\"breadcrumb-item-nolink\">\n              <slot></slot>\n            </span>`}\n\n        <span\n          part=\"separator\"\n          class=\"breadcrumb-item__separator\"\n          aria-hidden=\"true\"\n          role=\"presentation\">\n          <slot name=\"separator\">\n            ${(this.hasUpdated && this.inheritedSeparator) ||\n            html`<dap-ds-icon name=\"arrow-right-s-line\"></dap-ds-icon>`}\n          </slot>\n        </span>\n      </li>\n    `\n  }\n\n  private _shouldIncludeRel(): boolean {\n    if (!this.href) return false\n    // Include rel for external links or when target is specified\n    return this.target !== undefined || this.href.startsWith('http')\n  }\n}\n"],"names":["_DapDSBreadcrumbItem","DdsElement","changedProperties","html","clsx","ifDefined","DapDSLink","DapDSIcon","unsafeCSS","styles","DapDSBreadcrumbItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA2CA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAeoB,KAAA,MAAA,uBAEsB,KAAA,WAAA,IAIa,KAAA,UAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmB3C,aAAaC,GAAyC;AAC9D,UAAM,aAAaA,CAAiB,GAChC,KAAK,sBACP,KAAK,cAAc;AAAA,EACrB;AAAA,EAGF,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,mBAAmB;AAAA,MAC9B,6BAA6B,KAAK,YAAY;AAAA,IAAA,CAC/C,CAAC;AAAA,UACA,KAAK,OACHD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMW,KAAK,IAAI;AAAA,yBACPE,EAAU,KAAK,MAAM,CAAC;AAAA,sBACzBA;AAAA,MACJ,KAAK,kBAAA,IAAsB,KAAK,MAAM;AAAA,IACvC,CAAA;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAI7BF;AAAA;AAAA,oBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQL,KAAK,cAAc,KAAK,sBAC3BA,wDAA2D;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAO7D,oBAA6B;AAC/B,WAAC,KAAK,OAEH,KAAK,WAAW,UAAa,KAAK,KAAK,WAAW,MAAM,IAFxC;AAAA,EAEwC;AAEnE;AA5FEH,EAAO,UAAU,0BAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeM;AAAA,EACf,eAAeC;AACjB,GA0BgBP,EAAA,SAASQ,EAAUC,CAAM;AAhC3C,IAAqBC,IAArBV;AAScW,EAAA;AAAA,EAAXC,EAAS;AAAA,GATSF,EASP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,QAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAfSF,EAeP,WAAA,KAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBRF,EAiBU,WAAA,UAAA;AAIcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GArBtBF,EAqBwB,WAAA,SAAA;AASXC,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAO,CAAA;AAAA,GA9BXF,EA8Ba,WAAA,oBAAA;"}