dap-design-system 0.62.4 → 0.63.0

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

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

package/dist/components/avatar/avatar.component.js

@@ -1,23 +1,19 @@
-import { clsx as o } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as m } 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 { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as l } from "../../node_modules/lit-html/static.js";
-import { DdsElement as g } from "../../internal/dds-hu-element.js";
-import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
-import u from "../icons/user/user-user-line/user-user-line.component.js";
-import $ from "../spinner/spinner.component.js";
-import I from "./avatar.scss.js";
-import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, i = (p, e, a, z) => {
-  for (var n = void 0, d = p.length - 1, c; d >= 0; d--)
-    (c = p[d]) && (n = c(e, a, n) || n);
-  return n && y(e, a, n), n;
+import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as g, nothing as m } from "lit";
+import { property as r, state as f } from "lit/decorators.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { html as o } from "lit/static-html.js";
+import { DdsElement as v } from "../../internal/dds-hu-element.js";
+import { SizedMixin as u } from "../../internal/mixin/sizedMixin.js";
+import $ from "../icons/user/user-user-line/user-user-line.component.js";
+import I from "../spinner/spinner.component.js";
+import b from "./avatar.scss.js";
+var y = Object.defineProperty, i = (c, t, a, z) => {
+  for (var n = void 0, d = c.length - 1, p; d >= 0; d--)
+    (p = c[d]) && (n = p(t, a, n) || n);
+  return n && y(t, a, n), n;
 };
-const _ = v(g), h = class h extends _ {
+const _ = u(v), h = class h extends _ {
   constructor() {
     super(), this.shape = "circle", this.variant = "image", this.loading = !1, this.interactive = !1, this.hasImageError = !1, this.isImageLoading = !0, this.handleImageLoad = () => {
       this.isImageLoading = !1, this.hasImageError = !1, this.emit("dds-load");
@@ -27,11 +23,11 @@ const _ = v(g), h = class h extends _ {
       this.interactive && this.click();
     }, this.size = "md";
   }
-  generateInitials(e) {
-    return !e || !e.trim() ? "" : e.trim().split(" ").filter((a) => a.length > 0).map((a) => a.charAt(0)).join("").toUpperCase().slice(0, 2);
+  generateInitials(t) {
+    return !t || !t.trim() ? "" : t.trim().split(" ").filter((a) => a.length > 0).map((a) => a.charAt(0)).join("").toUpperCase().slice(0, 2);
   }
-  mapSizeToSpinnerSize(e) {
-    switch (e) {
+  mapSizeToSpinnerSize(t) {
+    switch (t) {
       case "xxs":
         return "xs";
       case "xs":
@@ -47,9 +43,9 @@ const _ = v(g), h = class h extends _ {
     }
   }
   renderImage() {
-    return !this.src || this.hasImageError ? m : l`
+    return !this.src || this.hasImageError ? m : o`
       <img
-        class=${o("avatar__img", `avatar__img--${this.effectiveSize}`)}
+        class=${l("avatar__img", `avatar__img--${this.effectiveSize}`)}
         style=${this.width && this.height ? `width: ${this.width}px; height: ${this.height}px;` : ""}
         part="img"
         alt=${s(this.alt)}
@@ -60,23 +56,23 @@ const _ = v(g), h = class h extends _ {
     `;
   }
   renderInitials() {
-    const e = this.generateInitials(this.initials);
-    return e ? l`
+    const t = this.generateInitials(this.initials);
+    return t ? o`
       <div
-        class=${o(
+        class=${l(
       "avatar__initials",
       `avatar__initials--${this.effectiveSize}`
     )}
         part="initials"
         aria-label=${s(this.label || `Avatar for ${this.initials}`)}>
-        ${e}
+        ${t}
       </div>
     ` : null;
   }
   renderIcon() {
-    return l`
+    return o`
       <div
-        class=${o("avatar__icon", `avatar__icon--${this.effectiveSize}`)}
+        class=${l("avatar__icon", `avatar__icon--${this.effectiveSize}`)}
         part="icon"
         aria-label=${s(this.label || "Avatar icon")}>
         <slot name="icon"></slot>
@@ -84,9 +80,9 @@ const _ = v(g), h = class h extends _ {
     `;
   }
   renderFallback() {
-    return l`
+    return o`
       <div
-        class=${o(
+        class=${l(
       "avatar__fallback",
       `avatar__fallback--${this.effectiveSize}`
     )}
@@ -99,9 +95,9 @@ const _ = v(g), h = class h extends _ {
     `;
   }
   renderLoading() {
-    return !this.loading || !this.isImageLoading ? m : l`
+    return !this.loading || !this.isImageLoading ? m : o`
       <div
-        class=${o(
+        class=${l(
       "avatar__loading",
       `avatar__loading--${this.effectiveSize}`
     )}
@@ -128,7 +124,7 @@ const _ = v(g), h = class h extends _ {
     }
   }
   render() {
-    const e = o(
+    const t = l(
       "avatar",
       `avatar--${this.effectiveSize}`,
       `avatar--${this.shape}`,
@@ -139,9 +135,9 @@ const _ = v(g), h = class h extends _ {
         "avatar--error": this.hasImageError
       }
     );
-    return l`
+    return o`
       <div
-        class=${e}
+        class=${t}
         part="base"
         role=${s(this.interactive ? "button" : void 0)}
         tabindex=${s(this.interactive ? 0 : void 0)}
@@ -154,47 +150,47 @@ const _ = v(g), h = class h extends _ {
   }
 };
 h.tagName = "dap-ds-avatar", h.dependencies = {
-  "dap-ds-icon-user-line": u,
-  "dap-ds-spinner": $
-}, h.styles = b(I);
-let t = h;
+  "dap-ds-icon-user-line": $,
+  "dap-ds-spinner": I
+}, h.styles = g(b);
+let e = h;
 i([
   r({ reflect: !0 })
-], t.prototype, "shape");
+], e.prototype, "shape");
 i([
   r({ reflect: !0 })
-], t.prototype, "variant");
+], e.prototype, "variant");
 i([
   r()
-], t.prototype, "src");
+], e.prototype, "src");
 i([
   r()
-], t.prototype, "alt");
+], e.prototype, "alt");
 i([
   r()
-], t.prototype, "initials");
+], e.prototype, "initials");
 i([
   r()
-], t.prototype, "label");
+], e.prototype, "label");
 i([
   r({ type: Boolean })
-], t.prototype, "loading");
+], e.prototype, "loading");
 i([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "interactive");
+], e.prototype, "interactive");
 i([
   r({ type: Number })
-], t.prototype, "width");
+], e.prototype, "width");
 i([
   r({ type: Number })
-], t.prototype, "height");
+], e.prototype, "height");
 i([
   f()
-], t.prototype, "hasImageError");
+], e.prototype, "hasImageError");
 i([
   f()
-], t.prototype, "isImageLoading");
+], e.prototype, "isImageLoading");
 export {
-  t as default
+  e as default
 };
 //# sourceMappingURL=avatar.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.component.js","sources":["../../../src/components/avatar/avatar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { AvatarShape, AvatarVariant, Size } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport UserUserLine from '../icons/user/user-user-line/user-user-line.component'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport styles from './avatar.scss?inline'\n\nconst AvatarBaseWithSized = SizedMixin(DdsElement)\n\n/**\n * `dap-ds-avatar`\n * @summary Avatar component can be used to display user profile images, initials, or icons.\n * @element dap-ds-avatar\n * @title - Avatar\n *\n * @slot icon - The icon to display when variant is 'icon'.\n * @slot fallback - Custom fallback content when image fails to load.\n *\n * @event dds-load - Fired when the image loads successfully.\n * @event dds-error - Fired when the image fails to load.\n *\n * @csspart base - The main avatar container.\n * @csspart img - The avatar image.\n * @csspart initials - The initials container.\n * @csspart icon - The icon container.\n * @csspart fallback - The fallback content container.\n * @csspart loading - The loading indicator.\n *\n * @cssproperty --dds-avatar-border-radius - The border radius of the avatar (default: 50%)\n * @cssproperty --dds-avatar-background-color - The background color of the avatar (default: var(--dds-neutral-200))\n * @cssproperty --dds-avatar-border-width - The border width of the avatar (default: 0)\n * @cssproperty --dds-avatar-border-color - The color of the avatar's border (default: transparent)\n * @cssproperty --dds-avatar-border-style - The style of the avatar's border (default: solid)\n * @cssproperty --dds-avatar-transition - The transition property for the avatar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-avatar-text-color - The text color for initials (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-avatar-font-weight - The font weight for initials (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-avatar-lg-size - Size for large avatars (default: var(--dds-avatar-size-lg))\n * @cssproperty --dds-avatar-md-size - Size for medium avatars (default: var(--dds-avatar-size-md))\n * @cssproperty --dds-avatar-sm-size - Size for small avatars (default: var(--dds-avatar-size-sm))\n * @cssproperty --dds-avatar-xs-size - Size for extra small avatars (default: var(--dds-avatar-size-xs))\n * @cssproperty --dds-avatar-xxs-size - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs))\n * @cssproperty --dds-avatar-font-size-lg - Font size for large avatars (default: var(--dds-font-2xl))\n * @cssproperty --dds-avatar-font-size-md - Font size for medium avatars (default: var(--dds-font-lg))\n * @cssproperty --dds-avatar-font-size-sm - Font size for small avatars (default: var(--dds-font-base))\n * @cssproperty --dds-avatar-font-size-xs - Font size for extra small avatars (default: var(--dds-font-sm))\n * @cssproperty --dds-avatar-font-size-xxs - Font size for extra extra small avatars (default: var(--dds-font-xs))\n * @cssproperty --dds-avatar-hover-transform - Transform applied on hover for interactive avatars (default: scale(1.05))\n * @cssproperty --dds-avatar-active-transform - Transform applied when active for interactive avatars (default: scale(0.95))\n * @cssproperty --dds-avatar-focus-ring - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring))\n * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100))\n * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100))\n * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600))\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the avatar. Default is `md`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n */\nexport default class DapDSAvatar extends AvatarBaseWithSized {\n  static tagName = 'dap-ds-avatar'\n\n  static dependencies = {\n    'dap-ds-icon-user-line': UserUserLine,\n    'dap-ds-spinner': DapDSSpinner,\n  }\n\n  /** The shape of the avatar\n   * @default circle\n   * @type { 'circle' | 'rounded' | 'square' }\n   * @example\n   * ```html\n   * <dap-ds-avatar shape=\"circle\">\n   * <dap-ds-avatar shape=\"rounded\">\n   * <dap-ds-avatar shape=\"square\">\n   * ```\n   */\n  @property({ reflect: true }) shape: AvatarShape = 'circle'\n  /** The variant type of the avatar\n   * @default image\n   * @type { 'image' | 'initials' | 'icon' }\n   * @example\n   * ```html\n   * <dap-ds-avatar variant=\"image\">\n   * <dap-ds-avatar variant=\"initials\">\n   * <dap-ds-avatar variant=\"icon\">\n   * ```\n   */\n  @property({ reflect: true }) variant: AvatarVariant = 'image'\n  /** The source of the avatar image */\n  @property() src: string\n  /** The alt text of the avatar */\n  @property() alt: string\n  /** The initials to display when variant is 'initials' */\n  @property() initials: string\n  /** Accessible label for the avatar */\n  @property() label: string\n  /** Loading state indicator */\n  @property({ type: Boolean }) loading = false\n  /** Whether the avatar is interactive (clickable) */\n  @property({ type: Boolean, reflect: true }) interactive = false\n  /** The width of the avatar. This will override the size */\n  @property({ type: Number }) width: number\n  /** The height of the avatar. This will override the size */\n  @property({ type: Number }) height: number\n\n  @state() private hasImageError = false\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n  @state() private isImageLoading = true\n\n  static readonly styles = unsafeCSS(styles)\n\n  private handleImageLoad = () => {\n    this.isImageLoading = false\n    this.hasImageError = false\n    this.emit('dds-load')\n  }\n\n  private handleImageError = () => {\n    this.isImageLoading = false\n    this.hasImageError = true\n    this.emit('dds-error')\n  }\n\n  private handleClick = () => {\n    if (this.interactive) {\n      this.click()\n    }\n  }\n\n  private generateInitials(initials?: string): string {\n    if (!initials || !initials.trim()) return ''\n    return initials\n      .trim()\n      .split(' ')\n      .filter(word => word.length > 0)\n      .map(word => word.charAt(0))\n      .join('')\n      .toUpperCase()\n      .slice(0, 2)\n  }\n\n  private mapSizeToSpinnerSize(\n    size: Size,\n  ): 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' {\n    switch (size) {\n      case 'xxs':\n        return 'xs'\n      case 'xs':\n        return 'sm'\n      case 'sm':\n        return 'md'\n      case 'md':\n        return 'lg'\n      case 'lg':\n        return 'xl'\n      default:\n        return 'lg'\n    }\n  }\n\n  private renderImage() {\n    if (!this.src || this.hasImageError) return nothing\n\n    return html`\n      <img\n        class=${clsx('avatar__img', `avatar__img--${this.effectiveSize}`)}\n        style=${this.width && this.height\n          ? `width: ${this.width}px; height: ${this.height}px;`\n          : ''}\n        part=\"img\"\n        alt=${ifDefined(this.alt)}\n        src=${this.src}\n        loading=\"lazy\"\n        @load=${this.handleImageLoad}\n        @error=${this.handleImageError} />\n    `\n  }\n\n  private renderInitials() {\n    const displayInitials = this.generateInitials(this.initials)\n    if (!displayInitials) return null\n\n    return html`\n      <div\n        class=${clsx(\n          'avatar__initials',\n          `avatar__initials--${this.effectiveSize}`,\n        )}\n        part=\"initials\"\n        aria-label=${ifDefined(this.label || `Avatar for ${this.initials}`)}>\n        ${displayInitials}\n      </div>\n    `\n  }\n\n  private renderIcon() {\n    return html`\n      <div\n        class=${clsx('avatar__icon', `avatar__icon--${this.effectiveSize}`)}\n        part=\"icon\"\n        aria-label=${ifDefined(this.label || 'Avatar icon')}>\n        <slot name=\"icon\"></slot>\n      </div>\n    `\n  }\n\n  private renderFallback() {\n    return html`\n      <div\n        class=${clsx(\n          'avatar__fallback',\n          `avatar__fallback--${this.effectiveSize}`,\n        )}\n        part=\"fallback\"\n        aria-label=${ifDefined(this.label || 'Avatar')}>\n        <slot name=\"fallback\">\n          <dap-ds-icon-user-line></dap-ds-icon-user-line>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderLoading() {\n    if (!this.loading || !this.isImageLoading) return nothing\n\n    return html`\n      <div\n        class=${clsx(\n          'avatar__loading',\n          `avatar__loading--${this.effectiveSize}`,\n        )}\n        part=\"loading\"\n        aria-label=${ifDefined(this.label || 'Loading avatar')}>\n        <dap-ds-spinner\n          size=${this.mapSizeToSpinnerSize(this.effectiveSize)}\n          variant=\"brand\"></dap-ds-spinner>\n      </div>\n    `\n  }\n\n  private renderContent() {\n    if (this.loading && this.isImageLoading && this.variant === 'image') {\n      return this.renderLoading()\n    }\n\n    switch (this.variant) {\n      case 'image':\n        if (this.src && !this.hasImageError) {\n          return this.renderImage()\n        } else if (this.initials) {\n          return this.renderInitials()\n        } else {\n          return this.renderFallback()\n        }\n      case 'initials':\n        return this.renderInitials() || this.renderFallback()\n      case 'icon':\n        return this.renderIcon()\n      default:\n        return this.renderFallback()\n    }\n  }\n\n  render() {\n    const baseClasses = clsx(\n      'avatar',\n      `avatar--${this.effectiveSize}`,\n      `avatar--${this.shape}`,\n      `avatar--${this.variant}`,\n      {\n        'avatar--interactive': this.interactive,\n        'avatar--loading': this.loading && this.isImageLoading,\n        'avatar--error': this.hasImageError,\n      },\n    )\n\n    return html`\n      <div\n        class=${baseClasses}\n        part=\"base\"\n        role=${ifDefined(this.interactive ? 'button' : undefined)}\n        tabindex=${ifDefined(this.interactive ? 0 : undefined)}\n        @keydown=${(e: KeyboardEvent) => {\n          if (this.interactive && (e.key === 'Enter' || e.key === ' ')) {\n            e.preventDefault()\n            this.handleClick()\n          }\n        }}>\n        ${this.renderContent()}\n      </div>\n    `\n  }\n}\n"],"names":["AvatarBaseWithSized","SizedMixin","DdsElement","_DapDSAvatar","initials","word","size","nothing","html","clsx","ifDefined","displayInitials","baseClasses","e","UserUserLine","DapDSSpinner","unsafeCSS","styles","DapDSAvatar","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,MAAMA,IAAsBC,EAAWC,CAAU,GAiD5BC,IAArB,MAAqBA,UAAoBH,EAAoB;AAAA,EAiD3D,cAAc;AACN,UAAA,GAhC0C,KAAA,QAAA,UAWI,KAAA,UAAA,SAUf,KAAA,UAAA,IAEmB,KAAA,cAAA,IAMjD,KAAQ,gBAAgB,IAMxB,KAAQ,iBAAiB,IAIlC,KAAQ,kBAAkB,MAAM;AAC9B,WAAK,iBAAiB,IACtB,KAAK,gBAAgB,IACrB,KAAK,KAAK,UAAU;AAAA,IACtB,GAEA,KAAQ,mBAAmB,MAAM;AAC/B,WAAK,iBAAiB,IACtB,KAAK,gBAAgB,IACrB,KAAK,KAAK,WAAW;AAAA,IACvB,GAEA,KAAQ,cAAc,MAAM;AAC1B,MAAI,KAAK,eACP,KAAK,MAAM;AAAA,IAEf,GAtBE,KAAK,OAAO;AAAA,EAAA;AAAA,EAwBN,iBAAiBI,GAA2B;AAClD,WAAI,CAACA,KAAY,CAACA,EAAS,KAAA,IAAe,KACnCA,EACJ,OACA,MAAM,GAAG,EACT,OAAO,CAAQC,MAAAA,EAAK,SAAS,CAAC,EAC9B,IAAI,OAAQA,EAAK,OAAO,CAAC,CAAC,EAC1B,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC;AAAA,EAAA;AAAA,EAGP,qBACNC,GAC0C;AAC1C,YAAQA,GAAM;AAAA,MACZ,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAAA,EAGM,cAAc;AACpB,WAAI,CAAC,KAAK,OAAO,KAAK,gBAAsBC,IAErCC;AAAAA;AAAAA,gBAEKC,EAAK,eAAe,gBAAgB,KAAK,aAAa,EAAE,CAAC;AAAA,gBACzD,KAAK,SAAS,KAAK,SACvB,UAAU,KAAK,KAAK,eAAe,KAAK,MAAM,QAC9C,EAAE;AAAA;AAAA,cAEAC,EAAU,KAAK,GAAG,CAAC;AAAA,cACnB,KAAK,GAAG;AAAA;AAAA,gBAEN,KAAK,eAAe;AAAA,iBACnB,KAAK,gBAAgB;AAAA;AAAA,EAAA;AAAA,EAI5B,iBAAiB;AACvB,UAAMC,IAAkB,KAAK,iBAAiB,KAAK,QAAQ;AACvD,WAACA,IAEEH;AAAAA;AAAAA,gBAEKC;AAAA,MACN;AAAA,MACA,qBAAqB,KAAK,aAAa;AAAA,IACxC,CAAA;AAAA;AAAA,qBAEYC,EAAU,KAAK,SAAS,cAAc,KAAK,QAAQ,EAAE,CAAC;AAAA,UACjEC,CAAe;AAAA;AAAA,QAVQ;AAAA,EAUR;AAAA,EAKf,aAAa;AACZ,WAAAH;AAAAA;AAAAA,gBAEKC,EAAK,gBAAgB,iBAAiB,KAAK,aAAa,EAAE,CAAC;AAAA;AAAA,qBAEtDC,EAAU,KAAK,SAAS,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMjD,iBAAiB;AAChB,WAAAF;AAAAA;AAAAA,gBAEKC;AAAA,MACN;AAAA,MACA,qBAAqB,KAAK,aAAa;AAAA,IACxC,CAAA;AAAA;AAAA,qBAEYC,EAAU,KAAK,SAAS,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAQ5C,gBAAgB;AACtB,WAAI,CAAC,KAAK,WAAW,CAAC,KAAK,iBAAuBH,IAE3CC;AAAAA;AAAAA,gBAEKC;AAAA,MACN;AAAA,MACA,oBAAoB,KAAK,aAAa;AAAA,IACvC,CAAA;AAAA;AAAA,qBAEYC,EAAU,KAAK,SAAS,gBAAgB,CAAC;AAAA;AAAA,iBAE7C,KAAK,qBAAqB,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMpD,gBAAgB;AACtB,QAAI,KAAK,WAAW,KAAK,kBAAkB,KAAK,YAAY;AAC1D,aAAO,KAAK,cAAc;AAG5B,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,eAAI,KAAK,OAAO,CAAC,KAAK,gBACb,KAAK,YAAY,IACf,KAAK,WACP,KAAK,eAAe,IAEpB,KAAK,eAAe;AAAA,MAE/B,KAAK;AACH,eAAO,KAAK,oBAAoB,KAAK,eAAe;AAAA,MACtD,KAAK;AACH,eAAO,KAAK,WAAW;AAAA,MACzB;AACE,eAAO,KAAK,eAAe;AAAA,IAAA;AAAA,EAC/B;AAAA,EAGF,SAAS;AACP,UAAME,IAAcH;AAAA,MAClB;AAAA,MACA,WAAW,KAAK,aAAa;AAAA,MAC7B,WAAW,KAAK,KAAK;AAAA,MACrB,WAAW,KAAK,OAAO;AAAA,MACvB;AAAA,QACE,uBAAuB,KAAK;AAAA,QAC5B,mBAAmB,KAAK,WAAW,KAAK;AAAA,QACxC,iBAAiB,KAAK;AAAA,MAAA;AAAA,IAE1B;AAEO,WAAAD;AAAAA;AAAAA,gBAEKI,CAAW;AAAA;AAAA,eAEZF,EAAU,KAAK,cAAc,WAAW,MAAS,CAAC;AAAA,mBAC9CA,EAAU,KAAK,cAAc,IAAI,MAAS,CAAC;AAAA,mBAC3C,CAACG,MAAqB;AAC/B,MAAI,KAAK,gBAAgBA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACtDA,EAAE,eAAe,GACjB,KAAK,YAAY;AAAA,IACnB,CACD;AAAA,UACC,KAAK,cAAe,CAAA;AAAA;AAAA;AAAA,EAAA;AAI9B;AA7OEV,EAAO,UAAU,iBAEjBA,EAAO,eAAe;AAAA,EACpB,yBAAyBW;AAAA,EACzB,kBAAkBC;AACpB,GAiDgBZ,EAAA,SAASa,EAAUC,CAAM;AAvD3C,IAAqBC,IAArBf;AAkB+BgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAlBRF,EAkBU,WAAA,OAAA;AAWAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GA7BRF,EA6BU,WAAA,SAAA;AAEjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GA/BSF,EA+BP,WAAA,KAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAjCSF,EAiCP,WAAA,KAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAnCSF,EAmCP,WAAA,UAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GArCSF,EAqCP,WAAA,OAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAvCRF,EAuCU,WAAA,SAAA;AAEeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAzCvBF,EAyCyB,WAAA,aAAA;AAEhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA3CPF,EA2CS,WAAA,OAAA;AAEAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA7CPF,EA6CS,WAAA,QAAA;AAEXC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GA/CYH,EA+CF,WAAA,eAAA;AAMAC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GArDYH,EAqDF,WAAA,gBAAA;"}
+{"version":3,"file":"avatar.component.js","sources":["../../../src/components/avatar/avatar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { AvatarShape, AvatarVariant, Size } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport UserUserLine from '../icons/user/user-user-line/user-user-line.component'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport styles from './avatar.scss?inline'\n\nconst AvatarBaseWithSized = SizedMixin(DdsElement)\n\n/**\n * `dap-ds-avatar`\n * @summary Avatar component can be used to display user profile images, initials, or icons.\n * @element dap-ds-avatar\n * @title - Avatar\n *\n * @slot icon - The icon to display when variant is 'icon'.\n * @slot fallback - Custom fallback content when image fails to load.\n *\n * @event dds-load - Fired when the image loads successfully.\n * @event dds-error - Fired when the image fails to load.\n *\n * @csspart base - The main avatar container.\n * @csspart img - The avatar image.\n * @csspart initials - The initials container.\n * @csspart icon - The icon container.\n * @csspart fallback - The fallback content container.\n * @csspart loading - The loading indicator.\n *\n * @cssproperty --dds-avatar-border-radius - The border radius of the avatar (default: 50%)\n * @cssproperty --dds-avatar-background-color - The background color of the avatar (default: var(--dds-neutral-200))\n * @cssproperty --dds-avatar-border-width - The border width of the avatar (default: 0)\n * @cssproperty --dds-avatar-border-color - The color of the avatar's border (default: transparent)\n * @cssproperty --dds-avatar-border-style - The style of the avatar's border (default: solid)\n * @cssproperty --dds-avatar-transition - The transition property for the avatar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-avatar-text-color - The text color for initials (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-avatar-font-weight - The font weight for initials (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-avatar-lg-size - Size for large avatars (default: var(--dds-avatar-size-lg))\n * @cssproperty --dds-avatar-md-size - Size for medium avatars (default: var(--dds-avatar-size-md))\n * @cssproperty --dds-avatar-sm-size - Size for small avatars (default: var(--dds-avatar-size-sm))\n * @cssproperty --dds-avatar-xs-size - Size for extra small avatars (default: var(--dds-avatar-size-xs))\n * @cssproperty --dds-avatar-xxs-size - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs))\n * @cssproperty --dds-avatar-font-size-lg - Font size for large avatars (default: var(--dds-font-2xl))\n * @cssproperty --dds-avatar-font-size-md - Font size for medium avatars (default: var(--dds-font-lg))\n * @cssproperty --dds-avatar-font-size-sm - Font size for small avatars (default: var(--dds-font-base))\n * @cssproperty --dds-avatar-font-size-xs - Font size for extra small avatars (default: var(--dds-font-sm))\n * @cssproperty --dds-avatar-font-size-xxs - Font size for extra extra small avatars (default: var(--dds-font-xs))\n * @cssproperty --dds-avatar-hover-transform - Transform applied on hover for interactive avatars (default: scale(1.05))\n * @cssproperty --dds-avatar-active-transform - Transform applied when active for interactive avatars (default: scale(0.95))\n * @cssproperty --dds-avatar-focus-ring - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring))\n * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100))\n * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100))\n * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600))\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the avatar. Default is `md`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n */\nexport default class DapDSAvatar extends AvatarBaseWithSized {\n  static tagName = 'dap-ds-avatar'\n\n  static dependencies = {\n    'dap-ds-icon-user-line': UserUserLine,\n    'dap-ds-spinner': DapDSSpinner,\n  }\n\n  /** The shape of the avatar\n   * @default circle\n   * @type { 'circle' | 'rounded' | 'square' }\n   * @example\n   * ```html\n   * <dap-ds-avatar shape=\"circle\">\n   * <dap-ds-avatar shape=\"rounded\">\n   * <dap-ds-avatar shape=\"square\">\n   * ```\n   */\n  @property({ reflect: true }) shape: AvatarShape = 'circle'\n  /** The variant type of the avatar\n   * @default image\n   * @type { 'image' | 'initials' | 'icon' }\n   * @example\n   * ```html\n   * <dap-ds-avatar variant=\"image\">\n   * <dap-ds-avatar variant=\"initials\">\n   * <dap-ds-avatar variant=\"icon\">\n   * ```\n   */\n  @property({ reflect: true }) variant: AvatarVariant = 'image'\n  /** The source of the avatar image */\n  @property() src: string\n  /** The alt text of the avatar */\n  @property() alt: string\n  /** The initials to display when variant is 'initials' */\n  @property() initials: string\n  /** Accessible label for the avatar */\n  @property() label: string\n  /** Loading state indicator */\n  @property({ type: Boolean }) loading = false\n  /** Whether the avatar is interactive (clickable) */\n  @property({ type: Boolean, reflect: true }) interactive = false\n  /** The width of the avatar. This will override the size */\n  @property({ type: Number }) width: number\n  /** The height of the avatar. This will override the size */\n  @property({ type: Number }) height: number\n\n  @state() private hasImageError = false\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n  @state() private isImageLoading = true\n\n  static readonly styles = unsafeCSS(styles)\n\n  private handleImageLoad = () => {\n    this.isImageLoading = false\n    this.hasImageError = false\n    this.emit('dds-load')\n  }\n\n  private handleImageError = () => {\n    this.isImageLoading = false\n    this.hasImageError = true\n    this.emit('dds-error')\n  }\n\n  private handleClick = () => {\n    if (this.interactive) {\n      this.click()\n    }\n  }\n\n  private generateInitials(initials?: string): string {\n    if (!initials || !initials.trim()) return ''\n    return initials\n      .trim()\n      .split(' ')\n      .filter(word => word.length > 0)\n      .map(word => word.charAt(0))\n      .join('')\n      .toUpperCase()\n      .slice(0, 2)\n  }\n\n  private mapSizeToSpinnerSize(\n    size: Size,\n  ): 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' {\n    switch (size) {\n      case 'xxs':\n        return 'xs'\n      case 'xs':\n        return 'sm'\n      case 'sm':\n        return 'md'\n      case 'md':\n        return 'lg'\n      case 'lg':\n        return 'xl'\n      default:\n        return 'lg'\n    }\n  }\n\n  private renderImage() {\n    if (!this.src || this.hasImageError) return nothing\n\n    return html`\n      <img\n        class=${clsx('avatar__img', `avatar__img--${this.effectiveSize}`)}\n        style=${this.width && this.height\n          ? `width: ${this.width}px; height: ${this.height}px;`\n          : ''}\n        part=\"img\"\n        alt=${ifDefined(this.alt)}\n        src=${this.src}\n        loading=\"lazy\"\n        @load=${this.handleImageLoad}\n        @error=${this.handleImageError} />\n    `\n  }\n\n  private renderInitials() {\n    const displayInitials = this.generateInitials(this.initials)\n    if (!displayInitials) return null\n\n    return html`\n      <div\n        class=${clsx(\n          'avatar__initials',\n          `avatar__initials--${this.effectiveSize}`,\n        )}\n        part=\"initials\"\n        aria-label=${ifDefined(this.label || `Avatar for ${this.initials}`)}>\n        ${displayInitials}\n      </div>\n    `\n  }\n\n  private renderIcon() {\n    return html`\n      <div\n        class=${clsx('avatar__icon', `avatar__icon--${this.effectiveSize}`)}\n        part=\"icon\"\n        aria-label=${ifDefined(this.label || 'Avatar icon')}>\n        <slot name=\"icon\"></slot>\n      </div>\n    `\n  }\n\n  private renderFallback() {\n    return html`\n      <div\n        class=${clsx(\n          'avatar__fallback',\n          `avatar__fallback--${this.effectiveSize}`,\n        )}\n        part=\"fallback\"\n        aria-label=${ifDefined(this.label || 'Avatar')}>\n        <slot name=\"fallback\">\n          <dap-ds-icon-user-line></dap-ds-icon-user-line>\n        </slot>\n      </div>\n    `\n  }\n\n  private renderLoading() {\n    if (!this.loading || !this.isImageLoading) return nothing\n\n    return html`\n      <div\n        class=${clsx(\n          'avatar__loading',\n          `avatar__loading--${this.effectiveSize}`,\n        )}\n        part=\"loading\"\n        aria-label=${ifDefined(this.label || 'Loading avatar')}>\n        <dap-ds-spinner\n          size=${this.mapSizeToSpinnerSize(this.effectiveSize)}\n          variant=\"brand\"></dap-ds-spinner>\n      </div>\n    `\n  }\n\n  private renderContent() {\n    if (this.loading && this.isImageLoading && this.variant === 'image') {\n      return this.renderLoading()\n    }\n\n    switch (this.variant) {\n      case 'image':\n        if (this.src && !this.hasImageError) {\n          return this.renderImage()\n        } else if (this.initials) {\n          return this.renderInitials()\n        } else {\n          return this.renderFallback()\n        }\n      case 'initials':\n        return this.renderInitials() || this.renderFallback()\n      case 'icon':\n        return this.renderIcon()\n      default:\n        return this.renderFallback()\n    }\n  }\n\n  render() {\n    const baseClasses = clsx(\n      'avatar',\n      `avatar--${this.effectiveSize}`,\n      `avatar--${this.shape}`,\n      `avatar--${this.variant}`,\n      {\n        'avatar--interactive': this.interactive,\n        'avatar--loading': this.loading && this.isImageLoading,\n        'avatar--error': this.hasImageError,\n      },\n    )\n\n    return html`\n      <div\n        class=${baseClasses}\n        part=\"base\"\n        role=${ifDefined(this.interactive ? 'button' : undefined)}\n        tabindex=${ifDefined(this.interactive ? 0 : undefined)}\n        @keydown=${(e: KeyboardEvent) => {\n          if (this.interactive && (e.key === 'Enter' || e.key === ' ')) {\n            e.preventDefault()\n            this.handleClick()\n          }\n        }}>\n        ${this.renderContent()}\n      </div>\n    `\n  }\n}\n"],"names":["AvatarBaseWithSized","SizedMixin","DdsElement","_DapDSAvatar","initials","word","size","nothing","html","clsx","ifDefined","displayInitials","baseClasses","e","UserUserLine","DapDSSpinner","unsafeCSS","styles","DapDSAvatar","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/avatar-group/avatar-group.component.js

@@ -1,23 +1,19 @@
-import { clsx as n } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as m } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { ifDefined as v } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as h } from "../../node_modules/lit-html/static.js";
+import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as c, nothing as y } from "lit";
+import { queryAssignedElements as u, property as l } from "lit/decorators.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+import { html as h } from "lit/static-html.js";
 import "../../localization/localization.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
-import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
-import w from "./avatar-group.scss.js";
-import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import { SizedMixin as w } from "../../internal/mixin/sizedMixin.js";
+import b from "./avatar-group.scss.js";
+import { t as g } from "../../node_modules/i18next/dist/esm/i18next.js";
 var z = Object.defineProperty, o = (f, t, e, i) => {
-  for (var r = void 0, s = f.length - 1, p; s >= 0; s--)
-    (p = f[s]) && (r = p(t, e, r) || r);
+  for (var r = void 0, s = f.length - 1, n; s >= 0; s--)
+    (n = f[s]) && (r = n(t, e, r) || r);
   return r && z(t, e, r), r;
 };
-const $ = y(u), d = class d extends $ {
+const x = w(m), d = class d extends x {
   constructor() {
     super(), this.layout = "stack", this.max = 3, this.showTotal = !1, this.interactiveOverflow = !1, this.handleOverflowClick = (t) => {
       this.interactiveOverflow && this.emit("dds-overflow-click", { originalEvent: t });
@@ -40,14 +36,14 @@ const $ = y(u), d = class d extends $ {
     super.updated(t), (t.has("layout") || t.has("size") || t.has("sizeMap") || t.has("max")) && this.styleSlottedAvatars();
   }
   renderOverflowIndicator(t, e) {
-    if (t <= 0) return c;
-    const i = this.showTotal ? `+${e - this.max}` : `+${t}`, r = this.overflowLabel || b("avatar-group.overflow-label", {
+    if (t <= 0) return y;
+    const i = this.showTotal ? `+${e - this.max}` : `+${t}`, r = this.overflowLabel || g("avatar-group.overflow-label", {
       count: t
     });
     return h`
       <div
         part="overflow"
-        class=${n(
+        class=${p(
       "avatar-group__overflow",
       `avatar-group__overflow--${this.effectiveSize}`,
       {
@@ -85,7 +81,7 @@ const $ = y(u), d = class d extends $ {
     });
   }
   render() {
-    const t = this.avatars.length, e = Math.max(0, t - this.max), i = n(
+    const t = this.avatars.length, e = Math.max(0, t - this.max), i = p(
       "avatar-group",
       `avatar-group--${this.layout}`,
       `avatar-group--${this.effectiveSize}`
@@ -106,10 +102,10 @@ const $ = y(u), d = class d extends $ {
     `;
   }
 };
-d.tagName = "dap-ds-avatar-group", d.styles = g(w);
+d.tagName = "dap-ds-avatar-group", d.styles = c(b);
 let a = d;
 o([
-  m({ flatten: !0 })
+  u({ flatten: !0 })
 ], a.prototype, "avatars");
 o([
   l({ reflect: !0 })

package/dist/components/avatar-group/avatar-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.component.js","sources":["../../../src/components/avatar-group/avatar-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DapDSAvatar } from '@/dap-design-system'\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './avatar-group.scss?inline'\n\nconst AvatarGroupBaseWithSized = SizedMixin(DdsElement)\n\nexport type AvatarGroupLayout = 'stack' | 'grid'\n\n/**\n * `dap-ds-avatar-group`\n * @summary Avatar group component displays multiple avatars in an organized layout with overflow management.\n * @element dap-ds-avatar-group\n * @title - Avatar Group\n * @group avatar\n *\n * @slot - The avatars to display in the group.\n *\n * @event dds-overflow-click - Fired when the overflow indicator is clicked.\n *\n * @csspart base - The main container of the avatar group.\n * @csspart avatars - The container for the visible avatars.\n * @csspart overflow - The overflow indicator element.\n *\n * @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout (default: 0)\n * @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout (default: -8px)\n * @cssproperty --dds-avatar-group-border-width - Border width for avatars (default: var(--dds-border-width-base))\n * @cssproperty --dds-avatar-group-border-color - Border color for avatars (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator (default: var(--dds-neutral-300))\n * @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator (default: var(--dds-neutral-700))\n * @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color))\n * @cssproperty --dds-avatar-group-size-lg - Size for large avatars (default: var(--dds-spacing-2000))\n * @cssproperty --dds-avatar-group-size-md - Size for medium avatars (default: var(--dds-spacing-1600))\n * @cssproperty --dds-avatar-group-size-sm - Size for small avatars (default: var(--dds-spacing-1200))\n * @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars (default: var(--dds-spacing-800))\n * @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars (default: var(--dds-spacing-400))\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of avatars in the group. Default is `md`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSAvatarGroup extends AvatarGroupBaseWithSized {\n  static tagName = 'dap-ds-avatar-group'\n\n  @queryAssignedElements({ flatten: true })\n  private avatars!: NodeListOf<DapDSAvatar>\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n\n  /** Layout type for the avatar group\n   * @default stack\n   * @type { 'stack' | 'grid' }\n   * @example\n   * ```html\n   * <dap-ds-avatar-group layout=\"stack\">\n   * <dap-ds-avatar-group layout=\"grid\">\n   * ```\n   */\n  @property({ reflect: true }) layout: AvatarGroupLayout = 'stack'\n\n  /** Maximum number of avatars to show before showing overflow */\n  @property({ type: Number }) max: number = 3\n\n  /** Whether to show the total count in overflow indicator */\n  @property({ type: Boolean, attribute: 'show-total' }) showTotal: boolean =\n    false\n\n  /** Interactive overflow indicator */\n  @property({ type: Boolean, attribute: 'interactive-overflow' })\n  interactiveOverflow: boolean = false\n\n  /** Accessible label for the avatar group */\n  @property() label: string\n\n  /** Accessible label for the overflow indicator */\n  @property({ attribute: 'overflow-label' }) overflowLabel: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateComplete.then(() => {\n      this.styleSlottedAvatars()\n    })\n  }\n\n  firstUpdated() {\n    this.styleSlottedAvatars()\n\n    const slot = this.shadowRoot?.querySelector('slot')\n    if (slot) {\n      slot.addEventListener('slotchange', () => {\n        this.styleSlottedAvatars()\n        this.requestUpdate()\n      })\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties)\n\n    if (\n      changedProperties.has('layout') ||\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('max')\n    ) {\n      this.styleSlottedAvatars()\n    }\n  }\n\n  private handleOverflowClick = (event: Event) => {\n    if (this.interactiveOverflow) {\n      this.emit('dds-overflow-click', { originalEvent: event })\n    }\n  }\n\n  private renderOverflowIndicator(hiddenCount: number, totalCount: number) {\n    if (hiddenCount <= 0) return nothing\n\n    const displayText = this.showTotal\n      ? `+${totalCount - this.max}`\n      : `+${hiddenCount}`\n    const ariaLabel =\n      this.overflowLabel ||\n      t('avatar-group.overflow-label', {\n        count: hiddenCount,\n      })\n\n    return html`\n      <div\n        part=\"overflow\"\n        class=${clsx(\n          'avatar-group__overflow',\n          `avatar-group__overflow--${this.effectiveSize}`,\n          {\n            'avatar-group__overflow--interactive': this.interactiveOverflow,\n          },\n        )}\n        role=${ifDefined(this.interactiveOverflow ? 'button' : undefined)}\n        tabindex=${ifDefined(this.interactiveOverflow ? 0 : undefined)}\n        aria-label=${ariaLabel}\n        @click=${this.handleOverflowClick}\n        @keydown=${(e: KeyboardEvent) => {\n          if (\n            this.interactiveOverflow &&\n            (e.key === 'Enter' || e.key === ' ')\n          ) {\n            e.preventDefault()\n            this.handleOverflowClick(e)\n          }\n        }}>\n        ${displayText}\n      </div>\n    `\n  }\n\n  private styleSlottedAvatars() {\n    this.avatars.forEach((avatar, index) => {\n      avatar.setAttribute('size', this.effectiveSize)\n\n      // Map avatar-group size CSS custom properties to avatar size properties\n      const sizePropertyMap: Record<string, string> = {\n        lg: '--dds-avatar-lg-size',\n        md: '--dds-avatar-md-size',\n        sm: '--dds-avatar-sm-size',\n        xs: '--dds-avatar-xs-size',\n        xxs: '--dds-avatar-xxs-size',\n      }\n      const groupSizeProperty = `--dds-avatar-group-size-${this.effectiveSize}`\n      const avatarSizeProperty = sizePropertyMap[this.effectiveSize]\n      avatar.style.setProperty(avatarSizeProperty, `var(${groupSizeProperty})`)\n\n      if (this.layout === 'stack') {\n        avatar.style.setProperty(\n          '--dds-avatar-border-width',\n          'var(--dds-avatar-group-border-width)',\n        )\n        avatar.style.setProperty(\n          '--dds-avatar-border-color',\n          'var(--dds-avatar-group-border-color)',\n        )\n        avatar.style.zIndex = String(this.avatars.length - index)\n\n        if (index > 0) {\n          avatar.style.marginLeft = 'var(--dds-avatar-group-overlap)'\n        } else {\n          avatar.style.marginLeft = ''\n        }\n      } else {\n        // Reset margins for grid layout\n        avatar.style.marginLeft = ''\n        avatar.style.zIndex = ''\n      }\n\n      if (index >= this.max) {\n        avatar.style.display = 'none'\n      } else {\n        avatar.style.display = ''\n      }\n    })\n  }\n\n  render() {\n    const totalCount = this.avatars.length\n    const hiddenCount = Math.max(0, totalCount - this.max)\n    const baseClasses = clsx(\n      'avatar-group',\n      `avatar-group--${this.layout}`,\n      `avatar-group--${this.effectiveSize}`,\n    )\n\n    return html`\n      <div\n        part=\"base\"\n        class=${baseClasses}\n        role=\"group\"\n        aria-label=${ifDefined(\n          this.label ||\n            `Group of ${totalCount} avatar${totalCount !== 1 ? 's' : ''}`,\n        )}>\n        <div part=\"avatars\" class=\"avatar-group__avatars\">\n          <slot></slot>\n        </div>\n        ${this.renderOverflowIndicator(hiddenCount, totalCount)}\n      </div>\n    `\n  }\n}\n"],"names":["AvatarGroupBaseWithSized","SizedMixin","DdsElement","_DapDSAvatarGroup","event","slot","_a","changedProperties","hiddenCount","totalCount","nothing","displayText","ariaLabel","t","html","clsx","ifDefined","e","avatar","index","sizePropertyMap","groupSizeProperty","avatarSizeProperty","baseClasses","unsafeCSS","styles","DapDSAvatarGroup","__decorateClass","queryAssignedElements","property"],"mappings":"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"}
+{"version":3,"file":"avatar-group.component.js","sources":["../../../src/components/avatar-group/avatar-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DapDSAvatar } from '@/dap-design-system'\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './avatar-group.scss?inline'\n\nconst AvatarGroupBaseWithSized = SizedMixin(DdsElement)\n\nexport type AvatarGroupLayout = 'stack' | 'grid'\n\n/**\n * `dap-ds-avatar-group`\n * @summary Avatar group component displays multiple avatars in an organized layout with overflow management.\n * @element dap-ds-avatar-group\n * @title - Avatar Group\n * @group avatar\n *\n * @slot - The avatars to display in the group.\n *\n * @event dds-overflow-click - Fired when the overflow indicator is clicked.\n *\n * @csspart base - The main container of the avatar group.\n * @csspart avatars - The container for the visible avatars.\n * @csspart overflow - The overflow indicator element.\n *\n * @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout (default: 0)\n * @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout (default: -8px)\n * @cssproperty --dds-avatar-group-border-width - Border width for avatars (default: var(--dds-border-width-base))\n * @cssproperty --dds-avatar-group-border-color - Border color for avatars (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator (default: var(--dds-neutral-300))\n * @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator (default: var(--dds-neutral-700))\n * @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color))\n * @cssproperty --dds-avatar-group-size-lg - Size for large avatars (default: var(--dds-spacing-2000))\n * @cssproperty --dds-avatar-group-size-md - Size for medium avatars (default: var(--dds-spacing-1600))\n * @cssproperty --dds-avatar-group-size-sm - Size for small avatars (default: var(--dds-spacing-1200))\n * @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars (default: var(--dds-spacing-800))\n * @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars (default: var(--dds-spacing-400))\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of avatars in the group. Default is `md`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSAvatarGroup extends AvatarGroupBaseWithSized {\n  static tagName = 'dap-ds-avatar-group'\n\n  @queryAssignedElements({ flatten: true })\n  private avatars!: NodeListOf<DapDSAvatar>\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n\n  /** Layout type for the avatar group\n   * @default stack\n   * @type { 'stack' | 'grid' }\n   * @example\n   * ```html\n   * <dap-ds-avatar-group layout=\"stack\">\n   * <dap-ds-avatar-group layout=\"grid\">\n   * ```\n   */\n  @property({ reflect: true }) layout: AvatarGroupLayout = 'stack'\n\n  /** Maximum number of avatars to show before showing overflow */\n  @property({ type: Number }) max: number = 3\n\n  /** Whether to show the total count in overflow indicator */\n  @property({ type: Boolean, attribute: 'show-total' }) showTotal: boolean =\n    false\n\n  /** Interactive overflow indicator */\n  @property({ type: Boolean, attribute: 'interactive-overflow' })\n  interactiveOverflow: boolean = false\n\n  /** Accessible label for the avatar group */\n  @property() label: string\n\n  /** Accessible label for the overflow indicator */\n  @property({ attribute: 'overflow-label' }) overflowLabel: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateComplete.then(() => {\n      this.styleSlottedAvatars()\n    })\n  }\n\n  firstUpdated() {\n    this.styleSlottedAvatars()\n\n    const slot = this.shadowRoot?.querySelector('slot')\n    if (slot) {\n      slot.addEventListener('slotchange', () => {\n        this.styleSlottedAvatars()\n        this.requestUpdate()\n      })\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties)\n\n    if (\n      changedProperties.has('layout') ||\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('max')\n    ) {\n      this.styleSlottedAvatars()\n    }\n  }\n\n  private handleOverflowClick = (event: Event) => {\n    if (this.interactiveOverflow) {\n      this.emit('dds-overflow-click', { originalEvent: event })\n    }\n  }\n\n  private renderOverflowIndicator(hiddenCount: number, totalCount: number) {\n    if (hiddenCount <= 0) return nothing\n\n    const displayText = this.showTotal\n      ? `+${totalCount - this.max}`\n      : `+${hiddenCount}`\n    const ariaLabel =\n      this.overflowLabel ||\n      t('avatar-group.overflow-label', {\n        count: hiddenCount,\n      })\n\n    return html`\n      <div\n        part=\"overflow\"\n        class=${clsx(\n          'avatar-group__overflow',\n          `avatar-group__overflow--${this.effectiveSize}`,\n          {\n            'avatar-group__overflow--interactive': this.interactiveOverflow,\n          },\n        )}\n        role=${ifDefined(this.interactiveOverflow ? 'button' : undefined)}\n        tabindex=${ifDefined(this.interactiveOverflow ? 0 : undefined)}\n        aria-label=${ariaLabel}\n        @click=${this.handleOverflowClick}\n        @keydown=${(e: KeyboardEvent) => {\n          if (\n            this.interactiveOverflow &&\n            (e.key === 'Enter' || e.key === ' ')\n          ) {\n            e.preventDefault()\n            this.handleOverflowClick(e)\n          }\n        }}>\n        ${displayText}\n      </div>\n    `\n  }\n\n  private styleSlottedAvatars() {\n    this.avatars.forEach((avatar, index) => {\n      avatar.setAttribute('size', this.effectiveSize)\n\n      // Map avatar-group size CSS custom properties to avatar size properties\n      const sizePropertyMap: Record<string, string> = {\n        lg: '--dds-avatar-lg-size',\n        md: '--dds-avatar-md-size',\n        sm: '--dds-avatar-sm-size',\n        xs: '--dds-avatar-xs-size',\n        xxs: '--dds-avatar-xxs-size',\n      }\n      const groupSizeProperty = `--dds-avatar-group-size-${this.effectiveSize}`\n      const avatarSizeProperty = sizePropertyMap[this.effectiveSize]\n      avatar.style.setProperty(avatarSizeProperty, `var(${groupSizeProperty})`)\n\n      if (this.layout === 'stack') {\n        avatar.style.setProperty(\n          '--dds-avatar-border-width',\n          'var(--dds-avatar-group-border-width)',\n        )\n        avatar.style.setProperty(\n          '--dds-avatar-border-color',\n          'var(--dds-avatar-group-border-color)',\n        )\n        avatar.style.zIndex = String(this.avatars.length - index)\n\n        if (index > 0) {\n          avatar.style.marginLeft = 'var(--dds-avatar-group-overlap)'\n        } else {\n          avatar.style.marginLeft = ''\n        }\n      } else {\n        // Reset margins for grid layout\n        avatar.style.marginLeft = ''\n        avatar.style.zIndex = ''\n      }\n\n      if (index >= this.max) {\n        avatar.style.display = 'none'\n      } else {\n        avatar.style.display = ''\n      }\n    })\n  }\n\n  render() {\n    const totalCount = this.avatars.length\n    const hiddenCount = Math.max(0, totalCount - this.max)\n    const baseClasses = clsx(\n      'avatar-group',\n      `avatar-group--${this.layout}`,\n      `avatar-group--${this.effectiveSize}`,\n    )\n\n    return html`\n      <div\n        part=\"base\"\n        class=${baseClasses}\n        role=\"group\"\n        aria-label=${ifDefined(\n          this.label ||\n            `Group of ${totalCount} avatar${totalCount !== 1 ? 's' : ''}`,\n        )}>\n        <div part=\"avatars\" class=\"avatar-group__avatars\">\n          <slot></slot>\n        </div>\n        ${this.renderOverflowIndicator(hiddenCount, totalCount)}\n      </div>\n    `\n  }\n}\n"],"names":["AvatarGroupBaseWithSized","SizedMixin","DdsElement","_DapDSAvatarGroup","event","slot","_a","changedProperties","hiddenCount","totalCount","nothing","displayText","ariaLabel","t","html","clsx","ifDefined","e","avatar","index","sizePropertyMap","groupSizeProperty","avatarSizeProperty","baseClasses","unsafeCSS","styles","DapDSAvatarGroup","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAMA,IAA2BC,EAAWC,CAAU,GAmCjCC,IAArB,MAAqBA,UAAyBH,EAAyB;AAAA,EAMrE,cAAc;AACN,UAAA,GAaiD,KAAA,SAAA,SAGf,KAAA,MAAA,GAIxC,KAAA,YAAA,IAI6B,KAAA,sBAAA,IA0CvB,KAAA,sBAAsB,CAACI,MAAiB;AAC9C,MAAI,KAAK,uBACP,KAAK,KAAK,sBAAsB,EAAE,eAAeA,GAAO;AAAA,IAE5D,GArEE,KAAK,OAAO;AAAA,EAAA;AAAA,EAiCd,oBAAoB;AAClB,UAAM,kBAAkB,GACnB,KAAA,eAAe,KAAK,MAAM;AAC7B,WAAK,oBAAoB;AAAA,IAAA,CAC1B;AAAA,EAAA;AAAA,EAGH,eAAe;;AACb,SAAK,oBAAoB;AAEzB,UAAMC,KAAOC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC5C,IAAID,KACGA,EAAA,iBAAiB,cAAc,MAAM;AACxC,WAAK,oBAAoB,GACzB,KAAK,cAAc;AAAA,IAAA,CACpB;AAAA,EACH;AAAA,EAGF,QAAQE,GAA2D;AACjE,UAAM,QAAQA,CAAiB,IAG7BA,EAAkB,IAAI,QAAQ,KAC9BA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,SAAS,KAC/BA,EAAkB,IAAI,KAAK,MAE3B,KAAK,oBAAoB;AAAA,EAC3B;AAAA,EASM,wBAAwBC,GAAqBC,GAAoB;AACnE,QAAAD,KAAe,EAAU,QAAAE;AAEvB,UAAAC,IAAc,KAAK,YACrB,IAAIF,IAAa,KAAK,GAAG,KACzB,IAAID,CAAW,IACbI,IACJ,KAAK,iBACLC,EAAE,+BAA+B;AAAA,MAC/B,OAAOL;AAAA,IAAA,CACR;AAEI,WAAAM;AAAA;AAAA;AAAA,gBAGKC;AAAA,MACN;AAAA,MACA,2BAA2B,KAAK,aAAa;AAAA,MAC7C;AAAA,QACE,uCAAuC,KAAK;AAAA,MAAA;AAAA,IAE/C,CAAA;AAAA,eACMC,EAAU,KAAK,sBAAsB,WAAW,MAAS,CAAC;AAAA,mBACtDA,EAAU,KAAK,sBAAsB,IAAI,MAAS,CAAC;AAAA,qBACjDJ,CAAS;AAAA,iBACb,KAAK,mBAAmB;AAAA,mBACtB,CAACK,MAAqB;AAC/B,MACE,KAAK,wBACJA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAEhCA,EAAE,eAAe,GACjB,KAAK,oBAAoBA,CAAC;AAAA,IAC5B,CACD;AAAA,UACCN,CAAW;AAAA;AAAA;AAAA,EAAA;AAAA,EAKX,sBAAsB;AAC5B,SAAK,QAAQ,QAAQ,CAACO,GAAQC,MAAU;AAC/B,MAAAD,EAAA,aAAa,QAAQ,KAAK,aAAa;AAG9C,YAAME,IAA0C;AAAA,QAC9C,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,KAAK;AAAA,MACP,GACMC,IAAoB,2BAA2B,KAAK,aAAa,IACjEC,IAAqBF,EAAgB,KAAK,aAAa;AAC7D,MAAAF,EAAO,MAAM,YAAYI,GAAoB,OAAOD,CAAiB,GAAG,GAEpE,KAAK,WAAW,WAClBH,EAAO,MAAM;AAAA,QACX;AAAA,QACA;AAAA,MACF,GACAA,EAAO,MAAM;AAAA,QACX;AAAA,QACA;AAAA,MACF,GACAA,EAAO,MAAM,SAAS,OAAO,KAAK,QAAQ,SAASC,CAAK,GAEpDA,IAAQ,IACVD,EAAO,MAAM,aAAa,oCAE1BA,EAAO,MAAM,aAAa,OAI5BA,EAAO,MAAM,aAAa,IAC1BA,EAAO,MAAM,SAAS,KAGpBC,KAAS,KAAK,MAChBD,EAAO,MAAM,UAAU,SAEvBA,EAAO,MAAM,UAAU;AAAA,IACzB,CACD;AAAA,EAAA;AAAA,EAGH,SAAS;AACD,UAAAT,IAAa,KAAK,QAAQ,QAC1BD,IAAc,KAAK,IAAI,GAAGC,IAAa,KAAK,GAAG,GAC/Cc,IAAcR;AAAA,MAClB;AAAA,MACA,iBAAiB,KAAK,MAAM;AAAA,MAC5B,iBAAiB,KAAK,aAAa;AAAA,IACrC;AAEO,WAAAD;AAAA;AAAA;AAAA,gBAGKS,CAAW;AAAA;AAAA,qBAENP;AAAA,MACX,KAAK,SACH,YAAYP,CAAU,UAAUA,MAAe,IAAI,MAAM,EAAE;AAAA,IAAA,CAC9D;AAAA;AAAA;AAAA;AAAA,UAIC,KAAK,wBAAwBD,GAAaC,CAAU,CAAC;AAAA;AAAA;AAAA,EAAA;AAI/D;AA7LEN,EAAO,UAAU,uBAsCDA,EAAA,SAASqB,EAAUC,CAAM;AAvC3C,IAAqBC,IAArBvB;AAIUwB,EAAA;AAAA,EADPC,EAAsB,EAAE,SAAS,GAAM,CAAA;AAAA,GAHrBF,EAIX,WAAA,SAAA;AAgBqBC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GApBRH,EAoBU,WAAA,QAAA;AAGDC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvBPH,EAuBS,WAAA,KAAA;AAG0BC,EAAA;AAAA,EAArDE,EAAS,EAAE,MAAM,SAAS,WAAW,aAAc,CAAA;AAAA,GA1BjCH,EA0BmC,WAAA,WAAA;AAKtDC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,uBAAwB,CAAA;AAAA,GA9B3CH,EA+BnB,WAAA,qBAAA;AAGYC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAlCSH,EAkCP,WAAA,OAAA;AAG+BC,EAAA;AAAA,EAA1CE,EAAS,EAAE,WAAW,iBAAkB,CAAA;AAAA,GArCtBH,EAqCwB,WAAA,eAAA;"}

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

@@ -1,21 +1,18 @@
 import { clsx as l } 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 a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as n } from "../../node_modules/lit-html/static.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import { unsafeCSS as p, nothing as u } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as r } from "lit/static-html.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
 import { SizedMixin as m } from "../../internal/mixin/sizedMixin.js";
-import f from "../icon/icon.component.js";
-import S from "../stack/stack.component.js";
-import b from "./badge.scss.js";
-import { unsafeCSS as I } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import S from "../icon/icon.component.js";
+import b from "../stack/stack.component.js";
+import I from "./badge.scss.js";
 var g = Object.defineProperty, c = (d, t, e, y) => {
-  for (var i = void 0, r = d.length - 1, h; r >= 0; r--)
-    (h = d[r]) && (i = h(t, e, i) || i);
+  for (var i = void 0, n = d.length - 1, h; n >= 0; n--)
+    (h = d[n]) && (i = h(t, e, i) || i);
   return i && g(t, e, i), i;
 };
-const v = m(u), s = class s extends v {
+const v = m(f), s = class s extends v {
   constructor() {
     super(...arguments), this.type = "neutral", this.live = !1, this._hasSlottedIcon = !1, this._cachedIconSize = 12;
   }
@@ -73,18 +70,18 @@ const v = m(u), s = class s extends v {
     return t === "sm" ? 12 : 16;
   }
   renderIcon() {
-    return this.icon ? n`
+    return this.icon ? r`
         <dap-ds-icon
           part="icon"
           exportparts="icon, base:icon-base"
           name="${this.icon}"
           staticSize=${this._cachedIconSize}>
         </dap-ds-icon>
-      ` : n`<slot name="icon" part="icon"></slot>`;
+      ` : r`<slot name="icon" part="icon"></slot>`;
   }
   render() {
     const t = this.icon || this._hasSlottedIcon;
-    return n`
+    return r`
       <div
         part="base"
         class=${l(
@@ -94,7 +91,7 @@ const v = m(u), s = class s extends v {
       t && "badge--has-icon"
     )}>
         <dap-ds-stack direction="row" spacing="100">
-          ${t ? this.renderIcon() : p}
+          ${t ? this.renderIcon() : u}
           <slot part="content"></slot>
         </dap-ds-stack>
       </div>
@@ -102,9 +99,9 @@ const v = m(u), s = class s extends v {
   }
 };
 s.tagName = "dap-ds-badge", s.dependencies = {
-  "dap-ds-icon": f,
-  "dap-ds-stack": S
-}, s.styles = I(b);
+  "dap-ds-icon": S,
+  "dap-ds-stack": b
+}, s.styles = p(I);
 let o = s;
 c([
   a()

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":";;;;;;;;;;;;;;AAWA,MAAMA,IAAqBC,EAAWC,CAAU,GAkE3BC,IAArB,MAAqBA,UAAmBH,EAAmB;AAAA,EAA3D,cAAA;AAAA,UAAA,GAAA,SAAA,GAWgC,KAAA,OAAA,WAYM,KAAA,OAAA,IAEpC,KAAQ,kBAAkB,IAC1B,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA,EAZ1B,IAAY,YAAuB;AACjC,UAAMI,IAAI,KAAK;AACf,WAAOA,MAAM,QAAQA,MAAM,OAAO,OAAO;AAAA,EAAA;AAAA,EAcjC,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GACrC,KAAK,2BAA2B,GAEhC,KAAK,kBAAkB,KAAK,YAAY,KAAK,SAAS,GACtD,KAAK,mBAAmB,GACxB,KAAK,eAAe;AAAA,EAAA;AAAA,EAGZ,QACRA,GACM;AACN,UAAM,QAAQA,CAAkB,IAE5BA,EAAmB,IAAI,MAAM,KAAKA,EAAmB,IAAI,SAAS,OACpE,KAAK,kBAAkB,KAAK,YAAY,KAAK,SAAS,GACtD,KAAK,eAAe,IAGlBA,EAAmB,IAAI,MAAM,KAC/B,KAAK,2BAA2B,GAG9BA,EAAmB,IAAI,MAAM,KAC/B,KAAK,aAAa;AAAA,EACpB;AAAA,EAGM,6BAAmC;AACzC,IAAI,KAAK,QACF,KAAA,aAAa,QAAQ,QAAQ,GAC7B,KAAA,aAAa,aAAa,QAAQ,MAEvC,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAGM,eAAqB;AACvB,IAAA,KAAK,QAAQ,OAAO,KAAK,QAAS,YAAY,KAAK,KAAK,KAAK,MAAM,MACrE,QAAQ,KAAK,iCAAiC;AAAA,EAChD;AAAA,EAGM,qBAA2B;AAC7B,QAAA;AACE,UAAA,CAAC,KAAK,WAAY;AAEhB,YAAAC,IAAW,KAAK,WAAW;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,CAACA,EAAU;AAEN,MAAAA,EAAA,iBAAiB,cAAc,MAAM;AAC5C,aAAK,eAAe,GACpB,KAAK,cAAc;AAAA,MAAA,CACpB;AAAA,aACMC,GAAO;AACN,cAAA,KAAK,mCAAmCA,CAAK;AAAA,IAAA;AAAA,EACvD;AAAA,EAGM,iBAAuB;AACzB,QAAA;AACE,UAAA,CAAC,KAAK,WAAY;AAEhB,YAAAD,IAAW,KAAK,WAAW;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,CAACA,GAAU;AACb,aAAK,kBAAkB;AACvB;AAAA,MAAA;AAGI,YAAAE,IAAmBF,EAAS,iBAAiB;AAC9C,WAAA,kBAAkBE,EAAiB,SAAS,GAE7CA,EAAiB,SAAS,KAC5BA,EAAiB,CAAC,EAAE;AAAA,QAClB;AAAA,QACA,KAAK,gBAAgB,SAAS;AAAA,MAChC;AAAA,aAEKD,GAAO;AACN,cAAA,KAAK,+BAA+BA,CAAK,GACjD,KAAK,kBAAkB;AAAA,IAAA;AAAA,EACzB;AAAA,EAGM,YAAYE,GAAyB;AACpC,WAAAA,MAAS,OAAO,KAAK;AAAA,EAAA;AAAA,EAGtB,aAAa;AACnB,WAAI,KAAK,OACAC;AAAA;AAAA;AAAA;AAAA,kBAIK,KAAK,IAAI;AAAA,uBACJ,KAAK,eAAe;AAAA;AAAA,UAKhCA;AAAA,EAAA;AAAA,EAGT,SAAS;AACD,UAAAC,IAAU,KAAK,QAAQ,KAAK;AAE3B,WAAAD;AAAA;AAAA;AAAA,gBAGKE;AAAA,MACN;AAAA,MACA,UAAU,KAAK,IAAI;AAAA,MACnB,UAAU,KAAK,SAAS;AAAA,MACxBD,KAAW;AAAA,IAAA,CACZ;AAAA;AAAA,YAEGA,IAAU,KAAK,WAAW,IAAIE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMjD;AAhKEV,EAAO,UAAU,gBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeW;AAAA,EACf,gBAAgBC;AAClB,GAsBgBZ,EAAA,SAASa,EAAUC,CAAM;AA5B3C,IAAqBC,IAArBf;AAWcgB,EAAA;AAAA,EAAXC,EAAS;AAAA,GAXSF,EAWP,WAAA,MAAA;AASAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GApBSF,EAoBP,WAAA,MAAA;AAGiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAvBRF,EAuBU,WAAA,MAAA;"}

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))