dap-design-system 0.60.2 → 0.61.0

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

@@ -1,5 +1,7 @@
 import { AvatarShape, AvatarVariant } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as UserUserLine } from '../icons/user/user-user-line/user-user-line.component';
+import { default as DapDSSpinner } from '../spinner/spinner.component';
 declare const AvatarBaseWithSized: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -52,6 +54,11 @@ declare const AvatarBaseWithSized: typeof DdsElement & {
  * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  */
 export default class DapDSAvatar extends AvatarBaseWithSized {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon-user-line': typeof UserUserLine;
+        'dap-ds-spinner': typeof DapDSSpinner;
+    };
     /** The shape of the avatar
      * @default circle
      * @type { 'circle' | 'rounded' | 'square' }

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

@@ -0,0 +1,200 @@
+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;
+};
+const _ = v(g), 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");
+    }, this.handleImageError = () => {
+      this.isImageLoading = !1, this.hasImageError = !0, this.emit("dds-error");
+    }, this.handleClick = () => {
+      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);
+  }
+  mapSizeToSpinnerSize(e) {
+    switch (e) {
+      case "xxs":
+        return "xs";
+      case "xs":
+        return "sm";
+      case "sm":
+        return "md";
+      case "md":
+        return "lg";
+      case "lg":
+        return "xl";
+      default:
+        return "lg";
+    }
+  }
+  renderImage() {
+    return !this.src || this.hasImageError ? m : l`
+      <img
+        class=${o("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)}
+        src=${this.src}
+        loading="lazy"
+        @load=${this.handleImageLoad}
+        @error=${this.handleImageError} />
+    `;
+  }
+  renderInitials() {
+    const e = this.generateInitials(this.initials);
+    return e ? l`
+      <div
+        class=${o(
+      "avatar__initials",
+      `avatar__initials--${this.effectiveSize}`
+    )}
+        part="initials"
+        aria-label=${s(this.label || `Avatar for ${this.initials}`)}>
+        ${e}
+      </div>
+    ` : null;
+  }
+  renderIcon() {
+    return l`
+      <div
+        class=${o("avatar__icon", `avatar__icon--${this.effectiveSize}`)}
+        part="icon"
+        aria-label=${s(this.label || "Avatar icon")}>
+        <slot name="icon"></slot>
+      </div>
+    `;
+  }
+  renderFallback() {
+    return l`
+      <div
+        class=${o(
+      "avatar__fallback",
+      `avatar__fallback--${this.effectiveSize}`
+    )}
+        part="fallback"
+        aria-label=${s(this.label || "Avatar")}>
+        <slot name="fallback">
+          <dap-ds-icon-user-line></dap-ds-icon-user-line>
+        </slot>
+      </div>
+    `;
+  }
+  renderLoading() {
+    return !this.loading || !this.isImageLoading ? m : l`
+      <div
+        class=${o(
+      "avatar__loading",
+      `avatar__loading--${this.effectiveSize}`
+    )}
+        part="loading"
+        aria-label=${s(this.label || "Loading avatar")}>
+        <dap-ds-spinner
+          size=${this.mapSizeToSpinnerSize(this.effectiveSize)}
+          variant="brand"></dap-ds-spinner>
+      </div>
+    `;
+  }
+  renderContent() {
+    if (this.loading && this.isImageLoading && this.variant === "image")
+      return this.renderLoading();
+    switch (this.variant) {
+      case "image":
+        return this.src && !this.hasImageError ? this.renderImage() : this.initials ? this.renderInitials() : this.renderFallback();
+      case "initials":
+        return this.renderInitials() || this.renderFallback();
+      case "icon":
+        return this.renderIcon();
+      default:
+        return this.renderFallback();
+    }
+  }
+  render() {
+    const e = o(
+      "avatar",
+      `avatar--${this.effectiveSize}`,
+      `avatar--${this.shape}`,
+      `avatar--${this.variant}`,
+      {
+        "avatar--interactive": this.interactive,
+        "avatar--loading": this.loading && this.isImageLoading,
+        "avatar--error": this.hasImageError
+      }
+    );
+    return l`
+      <div
+        class=${e}
+        part="base"
+        role=${s(this.interactive ? "button" : void 0)}
+        tabindex=${s(this.interactive ? 0 : void 0)}
+        @keydown=${(a) => {
+      this.interactive && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.handleClick());
+    }}>
+        ${this.renderContent()}
+      </div>
+    `;
+  }
+};
+h.tagName = "dap-ds-avatar", h.dependencies = {
+  "dap-ds-icon-user-line": u,
+  "dap-ds-spinner": $
+}, h.styles = b(I);
+let t = h;
+i([
+  r({ reflect: !0 })
+], t.prototype, "shape");
+i([
+  r({ reflect: !0 })
+], t.prototype, "variant");
+i([
+  r()
+], t.prototype, "src");
+i([
+  r()
+], t.prototype, "alt");
+i([
+  r()
+], t.prototype, "initials");
+i([
+  r()
+], t.prototype, "label");
+i([
+  r({ type: Boolean })
+], t.prototype, "loading");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "interactive");
+i([
+  r({ type: Number })
+], t.prototype, "width");
+i([
+  r({ type: Number })
+], t.prototype, "height");
+i([
+  f()
+], t.prototype, "hasImageError");
+i([
+  f()
+], t.prototype, "isImageLoading");
+export {
+  t as default
+};
+//# sourceMappingURL=avatar.component.js.map

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

@@ -0,0 +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":"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"}

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSAvatar } from './avatar.component.js';
-export * from './avatar.component.js';
+import { default as DapDSAvatar } from './avatar.component';
+export * from './avatar.component';
 export default DapDSAvatar;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/avatar/avatar.js

@@ -0,0 +1,6 @@
+import a from "./avatar.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.ts"],"sourcesContent":["import DapDSAvatar from './avatar.component'\n\nexport * from './avatar.component'\nexport default DapDSAvatar\n\nDapDSAvatar.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-avatar': DapDSAvatar\n  }\n}\n"],"names":["DapDSAvatar"],"mappings":";AAKAA,EAAY,OAAO;"}

package/dist/components/avatar/avatar.scss.js

@@ -0,0 +1,5 @@
+const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-avatar-border-radius: 50%;--dds-avatar-background-color: var(--dds-neutral-200);--dds-avatar-border-width: 0;--dds-avatar-border-color: transparent;--dds-avatar-border-style: solid;--dds-avatar-transition: all .2s ease-in-out;--dds-avatar-text-color: var(--dds-text-neutral-strong);--dds-avatar-font-weight: var(--dds-font-weight-bold);--dds-avatar-lg-size: var(--dds-avatar-size-lg);--dds-avatar-md-size: var(--dds-avatar-size-md);--dds-avatar-sm-size: var(--dds-avatar-size-sm);--dds-avatar-xs-size: var(--dds-avatar-size-xs);--dds-avatar-xxs-size: var(--dds-avatar-size-xxs);--dds-avatar-font-size-lg: var(--dds-font-2xl);--dds-avatar-font-size-md: var(--dds-font-lg);--dds-avatar-font-size-sm: var(--dds-font-base);--dds-avatar-font-size-xs: var(--dds-font-sm);--dds-avatar-font-size-xxs: var(--dds-font-xs);--dds-avatar-hover-transform: scale(1.05);--dds-avatar-active-transform: scale(.95);--dds-avatar-focus-ring: 0 0 0 2px var(--dds-focus-outer-ring);--dds-avatar-loading-background: var(--dds-neutral-100);--dds-avatar-error-background: var(--dds-negative-100);--dds-avatar-error-color: var(--dds-negative-600);display:inline-flex}.avatar{display:inline-flex;position:relative;align-items:center;justify-content:center;overflow:hidden;transition:var(--dds-avatar-transition);border:var(--dds-avatar-border-width) var(--dds-avatar-border-style) var(--dds-avatar-border-color);border-radius:var(--dds-avatar-border-radius);background:var(--dds-avatar-background-color);vertical-align:middle}.avatar--lg{width:var(--dds-avatar-lg-size);height:var(--dds-avatar-lg-size)}.avatar--md{width:var(--dds-avatar-md-size);height:var(--dds-avatar-md-size)}.avatar--sm{width:var(--dds-avatar-sm-size);height:var(--dds-avatar-sm-size)}.avatar--xs{width:var(--dds-avatar-xs-size);height:var(--dds-avatar-xs-size)}.avatar--xxs{width:var(--dds-avatar-xxs-size);height:var(--dds-avatar-xxs-size)}.avatar--circle{--dds-avatar-border-radius: 50%}.avatar--rounded{--dds-avatar-border-radius: var(--dds-radius-large)}.avatar--square{--dds-avatar-border-radius: var(--dds-radius-small)}.avatar--interactive{cursor:pointer;user-select:none}.avatar--interactive:hover{transform:var(--dds-avatar-hover-transform)}.avatar--interactive:active{transform:var(--dds-avatar-active-transform)}.avatar--interactive:focus{outline:none;box-shadow:var(--dds-avatar-focus-ring)}.avatar--interactive:focus-visible{outline:none;box-shadow:var(--dds-avatar-focus-ring)}.avatar--loading{background:var(--dds-avatar-loading-background)}.avatar--error{background:var(--dds-avatar-error-background);color:var(--dds-avatar-error-color)}.avatar__img{display:block;width:100%;height:100%;transition:var(--dds-avatar-transition);object-fit:cover}.avatar__img--lg,.avatar__img--md,.avatar__img--sm,.avatar__img--xs,.avatar__img--xxs{width:100%;height:100%}.avatar__initials,.avatar__icon,.avatar__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--dds-avatar-text-color);font-weight:var(--dds-avatar-font-weight);line-height:1;user-select:none}.avatar__initials svg,.avatar__icon svg,.avatar__fallback svg{width:60%;height:60%;fill:currentcolor}.avatar__initials{letter-spacing:.025em;text-transform:uppercase}.avatar__initials--lg{font-size:var(--dds-avatar-font-size-lg)}.avatar__initials--md{font-size:var(--dds-avatar-font-size-md)}.avatar__initials--sm{font-size:var(--dds-avatar-font-size-sm)}.avatar__initials--xs{font-size:var(--dds-avatar-font-size-xs)}.avatar__initials--xxs{font-size:var(--dds-avatar-font-size-xxs)}.avatar__icon svg{width:50%;height:50%}.avatar__icon--lg svg{width:40px;height:40px}.avatar__icon--md svg{width:32px;height:32px}.avatar__icon--sm svg{width:24px;height:24px}.avatar__icon--xs svg{width:16px;height:16px}.avatar__icon--xxs svg{width:12px;height:12px}.avatar__fallback svg{opacity:.6}.avatar__loading{display:flex;position:absolute;z-index:1;top:0;left:0;align-items:center;justify-content:center;width:100%;height:100%;background:var(--dds-avatar-loading-background)}.avatar__loading-spinner{width:50%;height:50%;animation:avatar-spin 1s linear infinite;border:2px solid var(--dds-neutral-300);border-top:2px solid var(--dds-brand-600);border-radius:50%}@keyframes avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-contrast: high){.avatar{--dds-avatar-border-width: 2px;--dds-avatar-border-color: var(--dds-border-neutral-strong)}}@media (prefers-reduced-motion: reduce){.avatar,.avatar__img,.avatar__loading-spinner{transition:none;animation:none}.avatar--interactive:hover,.avatar--interactive:active{transform:none}}";
+export {
+  a as default
+};
+//# sourceMappingURL=avatar.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/avatar-group/avatar-group.component.d.ts

@@ -36,6 +36,7 @@ export type AvatarGroupLayout = 'stack' | 'grid';
  * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
  */
 export default class DapDSAvatarGroup extends AvatarGroupBaseWithSized {
+    static tagName: string;
     private avatars;
     constructor();
     /** Layout type for the avatar group

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

@@ -0,0 +1,135 @@
+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 "../../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";
+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);
+  return r && z(t, e, r), r;
+};
+const $ = y(u), d = class d extends $ {
+  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 });
+    }, this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      this.styleSlottedAvatars();
+    });
+  }
+  firstUpdated() {
+    var e;
+    this.styleSlottedAvatars();
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t && t.addEventListener("slotchange", () => {
+      this.styleSlottedAvatars(), this.requestUpdate();
+    });
+  }
+  updated(t) {
+    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", {
+      count: t
+    });
+    return h`
+      <div
+        part="overflow"
+        class=${n(
+      "avatar-group__overflow",
+      `avatar-group__overflow--${this.effectiveSize}`,
+      {
+        "avatar-group__overflow--interactive": this.interactiveOverflow
+      }
+    )}
+        role=${v(this.interactiveOverflow ? "button" : void 0)}
+        tabindex=${v(this.interactiveOverflow ? 0 : void 0)}
+        aria-label=${r}
+        @click=${this.handleOverflowClick}
+        @keydown=${(s) => {
+      this.interactiveOverflow && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.handleOverflowClick(s));
+    }}>
+        ${i}
+      </div>
+    `;
+  }
+  styleSlottedAvatars() {
+    this.avatars.forEach((t, e) => {
+      t.setAttribute("size", this.effectiveSize);
+      const i = {
+        lg: "--dds-avatar-lg-size",
+        md: "--dds-avatar-md-size",
+        sm: "--dds-avatar-sm-size",
+        xs: "--dds-avatar-xs-size",
+        xxs: "--dds-avatar-xxs-size"
+      }, r = `--dds-avatar-group-size-${this.effectiveSize}`, s = i[this.effectiveSize];
+      t.style.setProperty(s, `var(${r})`), this.layout === "stack" ? (t.style.setProperty(
+        "--dds-avatar-border-width",
+        "var(--dds-avatar-group-border-width)"
+      ), t.style.setProperty(
+        "--dds-avatar-border-color",
+        "var(--dds-avatar-group-border-color)"
+      ), t.style.zIndex = String(this.avatars.length - e), e > 0 ? t.style.marginLeft = "var(--dds-avatar-group-overlap)" : t.style.marginLeft = "") : (t.style.marginLeft = "", t.style.zIndex = ""), e >= this.max ? t.style.display = "none" : t.style.display = "";
+    });
+  }
+  render() {
+    const t = this.avatars.length, e = Math.max(0, t - this.max), i = n(
+      "avatar-group",
+      `avatar-group--${this.layout}`,
+      `avatar-group--${this.effectiveSize}`
+    );
+    return h`
+      <div
+        part="base"
+        class=${i}
+        role="group"
+        aria-label=${v(
+      this.label || `Group of ${t} avatar${t !== 1 ? "s" : ""}`
+    )}>
+        <div part="avatars" class="avatar-group__avatars">
+          <slot></slot>
+        </div>
+        ${this.renderOverflowIndicator(e, t)}
+      </div>
+    `;
+  }
+};
+d.tagName = "dap-ds-avatar-group", d.styles = g(w);
+let a = d;
+o([
+  m({ flatten: !0 })
+], a.prototype, "avatars");
+o([
+  l({ reflect: !0 })
+], a.prototype, "layout");
+o([
+  l({ type: Number })
+], a.prototype, "max");
+o([
+  l({ type: Boolean, attribute: "show-total" })
+], a.prototype, "showTotal");
+o([
+  l({ type: Boolean, attribute: "interactive-overflow" })
+], a.prototype, "interactiveOverflow");
+o([
+  l()
+], a.prototype, "label");
+o([
+  l({ attribute: "overflow-label" })
+], a.prototype, "overflowLabel");
+export {
+  a as default
+};
+//# sourceMappingURL=avatar-group.component.js.map

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

@@ -0,0 +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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"}

package/dist/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSAvatarGroup } from './avatar-group.component';
+export * from './avatar-group.component';
+export default DapDSAvatarGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-avatar-group': DapDSAvatarGroup;
+    }
+}

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

@@ -0,0 +1,6 @@
+import a from "./avatar-group.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=avatar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar-group/avatar-group.ts"],"sourcesContent":["import DapDSAvatarGroup from './avatar-group.component'\n\nexport * from './avatar-group.component'\nexport default DapDSAvatarGroup\n\nDapDSAvatarGroup.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-avatar-group': DapDSAvatarGroup\n  }\n}\n"],"names":["DapDSAvatarGroup"],"mappings":";AAKAA,EAAiB,OAAO;"}

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

@@ -0,0 +1,5 @@
+const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;--dds-avatar-group-gap: 0;--dds-avatar-group-overlap: -8px;--dds-avatar-group-border-width: var(--dds-border-width-base);--dds-avatar-group-border-color: var(--dds-border-neutral-divider);--dds-avatar-group-hover-bg: var(--dds-neutral-400);--dds-avatar-group-overflow-bg: var(--dds-neutral-300);--dds-avatar-group-overflow-color: var(--dds-neutral-700);--dds-avatar-group-overflow-border: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color);--dds-avatar-group-size-lg: var(--dds-spacing-2000);--dds-avatar-group-size-md: var(--dds-spacing-1600);--dds-avatar-group-size-sm: var(--dds-spacing-1200);--dds-avatar-group-size-xs: var(--dds-spacing-800);--dds-avatar-group-size-xxs: var(--dds-spacing-400)}.avatar-group{display:inline-flex;align-items:center}.avatar-group__avatars{display:flex;align-items:center}.avatar-group__overflow{display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;border:var(--dds-avatar-group-overflow-border);border-radius:50%;background:var(--dds-avatar-group-overflow-bg);color:var(--dds-avatar-group-overflow-color);font-size:var(--dds-font-sm);font-weight:var(--dds-font-weight-bold);line-height:1;user-select:none}.avatar-group__overflow--interactive{cursor:pointer}.avatar-group__overflow--interactive:hover{transform:scale(1.05);background:var(--dds-avatar-group-hover-bg)}.avatar-group__overflow--interactive:active{transform:scale(.95)}.avatar-group__overflow--interactive:focus{outline:none;box-shadow:0 0 0 2px var(--dds-focus-outer-ring)}.avatar-group__overflow--lg{width:var(--dds-avatar-group-size-lg);height:var(--dds-avatar-group-size-lg);font-size:var(--dds-font-lg)}.avatar-group__overflow--md{width:var(--dds-avatar-group-size-md);height:var(--dds-avatar-group-size-md);font-size:var(--dds-font-base)}.avatar-group__overflow--sm{width:var(--dds-avatar-group-size-sm);height:var(--dds-avatar-group-size-sm);font-size:var(--dds-font-sm)}.avatar-group__overflow--xs{width:var(--dds-avatar-group-size-xs);height:var(--dds-avatar-group-size-xs);font-size:var(--dds-font-xs)}.avatar-group__overflow--xxs{width:var(--dds-avatar-group-size-xxs);height:var(--dds-avatar-group-size-xxs);font-size:var(--dds-font-xs)}.avatar-group--stack .avatar-group__avatars{gap:0}.avatar-group--stack .avatar-group__overflow{margin-left:var(--dds-avatar-group-overlap)}.avatar-group--grid .avatar-group__avatars{gap:var(--dds-avatar-group-gap)}.avatar-group--grid .avatar-group__overflow{margin-left:var(--dds-avatar-group-gap)}@media (prefers-contrast: high){.avatar-group{--dds-avatar-group-border-width: var(--dds-border-width-base);--dds-avatar-group-overflow-border: var(--dds-border-width-base) solid var(--dds-border-neutral-strong)}}@media (prefers-reduced-motion: reduce){.avatar-group__overflow{transition:none}.avatar-group__overflow--interactive:hover,.avatar-group__overflow--interactive:active{transform:none}}";
+export {
+  a as default
+};
+//# sourceMappingURL=avatar-group.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,5 +1,7 @@
 import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSStack } from '../stack/stack.component';
 declare const BadgeBaseWithSized: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -61,6 +63,11 @@ export type BadgeSize = 'sm' | 'lg';
  *
  */
 export default class DapDSBadge extends BadgeBaseWithSized {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-stack': typeof DapDSStack;
+    };
     /** The type of the badge
      * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
      */