@lifecorner/angular-ui-kit 3.11.0 → 3.11.2

package/fesm2022/lifecorner-angular-ui-kit-avatar-group.mjs

@@ -85,6 +85,7 @@ var AvatarGroupComponent = class AvatarGroupComponent {
 				"alt",
 				"name",
 				"size",
+				"loading",
 				"status",
 				"color",
 				"ring",

package/fesm2022/lifecorner-angular-ui-kit-avatar-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-avatar-group.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { AvatarColor, AvatarComponent, AvatarSize } from '@lifecorner/angular-ui-kit/avatar';\n\nexport interface AvatarGroupItem {\n  /** Image source URL */\n  src?: string;\n  /** Alt text */\n  alt?: string;\n  /** Full name for initials fallback */\n  name?: string;\n  /** Background of the initials: `default` or a member colour `member-1` … `member-6` (see `lc-avatar`). */\n  color?: AvatarColor;\n}\n\n@Component({\n  selector: 'lc-avatar-group',\n  standalone: true,\n  imports: [AvatarComponent],\n  templateUrl: './avatar-group.component.html',\n  styleUrls: ['./avatar-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Avatar group component for displaying multiple user avatars.\n *\n * Features:\n * - Overlapping avatar display with configurable max visible count\n * - Overflow indicator showing remaining count\n * - Shared size variant across all avatars (xs, sm, md, lg)\n * - Automatic truncation based on max property\n * - Member colours per item (`color`), later avatars on top\n * - `ring`: each avatar gets a ring in the page colour instead of the surface\n *   border; with `overlap=\"4px\"` this is the \"Weite\" member row\n *\n * @example\n * ```html\n * <lc-avatar-group [avatars]=\"users\" [max]=\"5\" size=\"md\" />\n * <lc-avatar-group\n *   [avatars]=\"[{ name: 'Johanna Apfelbaum', color: 'member-1' }, { name: 'Tom Ek', color: 'member-2' }]\"\n *   [ring]=\"true\"\n *   overlap=\"4px\"\n * />\n * ```\n */\nexport class AvatarGroupComponent {\n  /** List of avatars to show */\n  avatars = input.required<AvatarGroupItem[]>();\n\n  /** Avatar size */\n  size = input<AvatarSize>('md');\n\n  /** Maximum visible avatars before showing overflow count */\n  max = input<number>(5);\n\n  /**\n   * Separate the avatars with a ring in the page colour\n   * (`--lc-avatar-ring-color`, default `--color-background`) instead of the\n   * 2 px surface border. Later avatars sit on top.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * How far each avatar overlaps the previous one, as a CSS length (e.g.\n   * `4px`). Empty keeps the size's default (6–12 px).\n   */\n  overlap = input<string>('');\n\n  protected visibleAvatars = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return all.slice(0, limit);\n  });\n\n  protected overflowCount = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return Math.max(0, all.length - limit);\n  });\n\n  protected groupClasses = computed(() => {\n    const classes = ['avatar-group', `avatar-group--${this.size()}`];\n    if (this.ring()) classes.push('avatar-group--ring');\n    return classes.join(' ');\n  });\n}\n","<div [class]=\"groupClasses()\" [style.--lc-avatar-group-overlap]=\"overlap() || null\">\n  @for (avatar of visibleAvatars(); track avatar.name ?? $index) {\n    <lc-avatar\n      class=\"avatar-group__item\"\n      [src]=\"avatar.src\"\n      [alt]=\"avatar.alt\"\n      [name]=\"avatar.name\"\n      [size]=\"size()\"\n      [color]=\"avatar.color ?? 'default'\"\n      [ring]=\"ring()\"\n    />\n  }\n  @if (overflowCount() > 0) {\n    <span class=\"avatar-group__overflow avatar-group__overflow--{{ size() }}\">\n      +{{ overflowCount() }}\n    </span>\n  }\n</div>\n"],"mappings":";;;AAiDA,IAAa,uBAAb,MAAa,qBAAoB;CAE/B,UAAU,MAAM,SAA6B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG7C,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,MAAM,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAOtB,OAAO,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAM5B,UAAU,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,iBAAiB,eAAc;EACvC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,IAAI,MAAM,GAAG,KAAK;CAC3B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,gBAAgB,eAAc;EACtC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,KAAK,IAAI,GAAG,IAAI,SAAS,KAAK;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,eAAe,eAAc;EACrC,MAAM,UAAU,CAAC,gBAAgB,iBAAiB,KAAK,KAAI,GAAI;EAC/D,IAAI,KAAK,KAAI,GAAI,QAAQ,KAAK,oBAAoB;EAClD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAvCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCjDjC;EAkBA,QAAA,CAAA,6xDAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDIY;GAAe,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA2Bd,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EA9BhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,eAAe;GAAC,iBAGT,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,6xDAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-avatar-group.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { AvatarColor, AvatarComponent, AvatarSize } from '@lifecorner/angular-ui-kit/avatar';\n\nexport interface AvatarGroupItem {\n  /** Image source URL */\n  src?: string;\n  /** Alt text */\n  alt?: string;\n  /** Full name for initials fallback */\n  name?: string;\n  /** Background of the initials: `default` or a member colour `member-1` … `member-6` (see `lc-avatar`). */\n  color?: AvatarColor;\n}\n\n@Component({\n  selector: 'lc-avatar-group',\n  standalone: true,\n  imports: [AvatarComponent],\n  templateUrl: './avatar-group.component.html',\n  styleUrls: ['./avatar-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Avatar group component for displaying multiple user avatars.\n *\n * Features:\n * - Overlapping avatar display with configurable max visible count\n * - Overflow indicator showing remaining count\n * - Shared size variant across all avatars (xs, sm, md, lg)\n * - Automatic truncation based on max property\n * - Member colours per item (`color`), later avatars on top\n * - `ring`: each avatar gets a ring in the page colour instead of the surface\n *   border; with `overlap=\"4px\"` this is the \"Weite\" member row\n *\n * @example\n * ```html\n * <lc-avatar-group [avatars]=\"users\" [max]=\"5\" size=\"md\" />\n * <lc-avatar-group\n *   [avatars]=\"[{ name: 'Johanna Apfelbaum', color: 'member-1' }, { name: 'Tom Ek', color: 'member-2' }]\"\n *   [ring]=\"true\"\n *   overlap=\"4px\"\n * />\n * ```\n */\nexport class AvatarGroupComponent {\n  /** List of avatars to show */\n  avatars = input.required<AvatarGroupItem[]>();\n\n  /** Avatar size */\n  size = input<AvatarSize>('md');\n\n  /** Maximum visible avatars before showing overflow count */\n  max = input<number>(5);\n\n  /**\n   * Separate the avatars with a ring in the page colour\n   * (`--lc-avatar-ring-color`, default `--color-background`) instead of the\n   * 2 px surface border. Later avatars sit on top.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * How far each avatar overlaps the previous one, as a CSS length (e.g.\n   * `4px`). Empty keeps the size's default (6–12 px).\n   */\n  overlap = input<string>('');\n\n  protected visibleAvatars = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return all.slice(0, limit);\n  });\n\n  protected overflowCount = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return Math.max(0, all.length - limit);\n  });\n\n  protected groupClasses = computed(() => {\n    const classes = ['avatar-group', `avatar-group--${this.size()}`];\n    if (this.ring()) classes.push('avatar-group--ring');\n    return classes.join(' ');\n  });\n}\n","<div [class]=\"groupClasses()\" [style.--lc-avatar-group-overlap]=\"overlap() || null\">\n  @for (avatar of visibleAvatars(); track avatar.name ?? $index) {\n    <lc-avatar\n      class=\"avatar-group__item\"\n      [src]=\"avatar.src\"\n      [alt]=\"avatar.alt\"\n      [name]=\"avatar.name\"\n      [size]=\"size()\"\n      [color]=\"avatar.color ?? 'default'\"\n      [ring]=\"ring()\"\n    />\n  }\n  @if (overflowCount() > 0) {\n    <span class=\"avatar-group__overflow avatar-group__overflow--{{ size() }}\">\n      +{{ overflowCount() }}\n    </span>\n  }\n</div>\n"],"mappings":";;;AAiDA,IAAa,uBAAb,MAAa,qBAAoB;CAE/B,UAAU,MAAM,SAA6B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG7C,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,MAAM,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAOtB,OAAO,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAM5B,UAAU,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,iBAAiB,eAAc;EACvC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,IAAI,MAAM,GAAG,KAAK;CAC3B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,gBAAgB,eAAc;EACtC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,KAAK,IAAI,GAAG,IAAI,SAAS,KAAK;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,eAAe,eAAc;EACrC,MAAM,UAAU,CAAC,gBAAgB,iBAAiB,KAAK,KAAI,GAAI;EAC/D,IAAI,KAAK,KAAI,GAAI,QAAQ,KAAK,oBAAoB;EAClD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAvCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCjDjC;EAkBA,QAAA,CAAA,6xDAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDIY;GAAe,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA2Bd,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EA9BhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,eAAe;GAAC,iBAGT,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,6xDAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-avatar.mjs

@@ -1,5 +1,12 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
+const AVATAR_PX = {
+	xs: 24,
+	sm: 32,
+	md: 40,
+	lg: 48,
+	xl: 64
+};
 const AVATAR_MEMBER_COLORS = [
 	"member-1",
 	"member-2",
@@ -13,6 +20,7 @@ var AvatarComponent = class AvatarComponent {
 	alt = input(...ngDevMode ? [void 0, { debugName: "alt" }] : /* istanbul ignore next */ []);
 	name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	loading = input("eager", ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	status = input(...ngDevMode ? [void 0, { debugName: "status" }] : /* istanbul ignore next */ []);
 	color = input("default", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 	ring = input(false, ...ngDevMode ? [{ debugName: "ring" }] : /* istanbul ignore next */ []);
@@ -39,6 +47,7 @@ var AvatarComponent = class AvatarComponent {
 	ariaLabel = computed(() => {
 		return this.alt() || this.name() || "Avatar";
 	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	imagePx = computed(() => AVATAR_PX[this.size()], ...ngDevMode ? [{ debugName: "imagePx" }] : /* istanbul ignore next */ []);
 	showImage = computed(() => {
 		return this.src() && !this.imageError();
 	}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
@@ -93,6 +102,13 @@ var AvatarComponent = class AvatarComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			status: {
 				classPropertyName: "status",
 				publicName: "status",
@@ -123,7 +139,7 @@ var AvatarComponent = class AvatarComponent {
 			}
 		},
 		ngImport: i0,
-		template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
+		template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <!-- `loading` before `src`: attribute bindings run in template order, after\n         every property binding, so `[attr.src]` keeps the source behind\n         `loading` (G-40; an engine may start the request when src is set). -->\n    <img\n      [alt]=\"alt() || name() || 'Avatar'\"\n      class=\"lc-avatar__image\"\n      [attr.width]=\"imagePx()\"\n      [attr.height]=\"imagePx()\"\n      [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\"\n      [attr.src]=\"src()!\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
 		styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-surface)}.lc-avatar__status--online{background-color:var(--color-success)}.lc-avatar__status--offline{background-color:var(--color-text-tertiary)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}.lc-avatar--member{color:var(--color-on-member, #ffffff);font-weight:var(--typography-font-weight-bold, 700);letter-spacing:.02em}.lc-avatar--member.lc-avatar--xs{font-size:.625rem}.lc-avatar--member.lc-avatar--sm{font-size:.75rem}.lc-avatar--member.lc-avatar--md{font-size:.875rem}.lc-avatar--member.lc-avatar--lg{font-size:1rem}.lc-avatar--member.lc-avatar--xl{font-size:1.25rem}.lc-avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-avatar--ring{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.lc-avatar--ring.lc-avatar--xs,.lc-avatar--ring.lc-avatar--sm{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -140,7 +156,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
+			template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <!-- `loading` before `src`: attribute bindings run in template order, after\n         every property binding, so `[attr.src]` keeps the source behind\n         `loading` (G-40; an engine may start the request when src is set). -->\n    <img\n      [alt]=\"alt() || name() || 'Avatar'\"\n      class=\"lc-avatar__image\"\n      [attr.width]=\"imagePx()\"\n      [attr.height]=\"imagePx()\"\n      [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\"\n      [attr.src]=\"src()!\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
 			styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-surface)}.lc-avatar__status--online{background-color:var(--color-success)}.lc-avatar__status--offline{background-color:var(--color-text-tertiary)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}.lc-avatar--member{color:var(--color-on-member, #ffffff);font-weight:var(--typography-font-weight-bold, 700);letter-spacing:.02em}.lc-avatar--member.lc-avatar--xs{font-size:.625rem}.lc-avatar--member.lc-avatar--sm{font-size:.75rem}.lc-avatar--member.lc-avatar--md{font-size:.875rem}.lc-avatar--member.lc-avatar--lg{font-size:1rem}.lc-avatar--member.lc-avatar--xl{font-size:1.25rem}.lc-avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-avatar--ring{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.lc-avatar--ring.lc-avatar--xs,.lc-avatar--ring.lc-avatar--sm{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"]
 		}]
 	}],
@@ -177,6 +193,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
 		status: [{
 			type: i0.Input,
 			args: [{

package/fesm2022/lifecorner-angular-ui-kit-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-avatar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed, linkedSignal } from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';\n\n/**\n * Background of the initials. `default` is the neutral kit avatar; `member-1`\n * … `member-6` are the member colours (`--color-member-1` … `-6`: teal, rust,\n * violet, sage, berry, slate) with white initials, each at least 4.5:1.\n * Assign them per person in a stable order (e.g. join order) and always show\n * the name or initials beside the colour — colour is never the only cue.\n */\nexport type AvatarColor =\n  | 'default'\n  | 'member-1'\n  | 'member-2'\n  | 'member-3'\n  | 'member-4'\n  | 'member-5'\n  | 'member-6';\n\n/** The six member colours in their order (`AvatarColor` without `default`). */\nexport const AVATAR_MEMBER_COLORS: readonly AvatarColor[] = [\n  'member-1',\n  'member-2',\n  'member-3',\n  'member-4',\n  'member-5',\n  'member-6',\n];\n\n/**\n * Avatar component for circular user representation.\n *\n * Features:\n * - Image display with fallback to initials\n * - Auto-generated initials from user name\n * - Status indicator (online, offline, busy, away)\n * - Multiple size variants (xs, sm, md, lg, xl)\n * - Member colours (`color`: `member-1` … `member-6`) with white initials\n * - `ring`: a gap in the page colour around the avatar, for stacks and for\n *   avatars on images or tints\n * - Accessible with alt text support\n *\n * @example\n * ```html\n * <lc-avatar src=\"https://example.com/avatar.jpg\" alt=\"John Doe\" />\n * <lc-avatar name=\"John Doe\" status=\"online\" size=\"lg\" />\n * <lc-avatar name=\"Tom Ek\" color=\"member-2\" [ring]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'lc-avatar',\n  standalone: true,\n  imports: [],\n  templateUrl: './avatar.component.html',\n  styleUrl: './avatar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n  /** Image source URL */\n  src = input<string>();\n\n  /** Alt text for the image */\n  alt = input<string>();\n\n  /** Full name for generating initials */\n  name = input<string>();\n\n  /** Size of the avatar */\n  size = input<AvatarSize>('md');\n\n  /** Status indicator */\n  status = input<AvatarStatus>();\n\n  /**\n   * Background of the initials: `default` (neutral) or a member colour\n   * `member-1` … `member-6` with white initials (LK-7).\n   */\n  color = input<AvatarColor>('default');\n\n  /**\n   * Draw a ring in the page colour around the avatar (3 px; 2 px for `xs` and\n   * `sm`), so stacked or overlapping avatars stay apart. The ring colour is\n   * `--lc-avatar-ring-color` (default `--color-background`); set it to the\n   * surface the avatar sits on.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * Hide the avatar from assistive technology (no `img` role, no label), for\n   * avatars inside a control that has its own accessible name — e.g. a menu\n   * button labelled \"Menu for Tom Ek\".\n   */\n  decorative = input<boolean>(false);\n\n  /**\n   * Computed initials from name\n   */\n  initials = computed(() => {\n    const fullName = this.name();\n    if (!fullName || fullName.trim() === '') {\n      return '?';\n    }\n\n    const parts = fullName\n      .trim()\n      .split(/\\s+/)\n      .filter((p) => p.length > 0);\n\n    if (parts.length === 0) {\n      return '?';\n    }\n\n    if (parts.length === 1) {\n      return parts[0]?.[0]?.toUpperCase() ?? '?';\n    }\n\n    // First and last name initials\n    const firstInitial = parts[0]?.[0];\n    const lastInitial = parts[parts.length - 1]?.[0];\n\n    if (firstInitial && lastInitial) {\n      return (firstInitial + lastInitial).toUpperCase();\n    }\n    return '?';\n  });\n\n  /**\n   * Computed CSS classes for the avatar\n   */\n  avatarClasses = computed(() => {\n    const classes = ['lc-avatar'];\n\n    classes.push(`lc-avatar--${this.size()}`);\n\n    if (this.status()) {\n      classes.push('lc-avatar--with-status');\n    }\n\n    if (this.color() !== 'default') {\n      classes.push('lc-avatar--member', `lc-avatar--${this.color()}`);\n    }\n\n    if (this.ring()) {\n      classes.push('lc-avatar--ring');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get aria-label for accessibility\n   */\n  ariaLabel = computed(() => {\n    return this.alt() || this.name() || 'Avatar';\n  });\n\n  /**\n   * Check if image should be displayed\n   */\n  showImage = computed(() => {\n    return this.src() && !this.imageError();\n  });\n\n  /**\n   * Track if image failed to load. Resets whenever `src` changes so a new\n   * image gets a fresh attempt instead of staying stuck on the initials.\n   */\n  protected imageError = linkedSignal<string | undefined, boolean>({\n    source: this.src,\n    computation: () => false,\n  });\n\n  /**\n   * Handle image load error\n   */\n  onImageError(): void {\n    this.imageError.set(true);\n  }\n}\n","<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n"],"mappings":";;AAsBA,MAAa,uBAA+C;CAC1D;CACA;CACA;CACA;CACA;CACA;AACD;AA8BD,IAAa,kBAAb,MAAa,gBAAe;CAE1B,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGrB,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGrB,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGtB,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,SAAS,MAAqB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAM9B,QAAQ,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQrC,OAAO,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAO5B,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAKlC,WAAW,eAAc;EACvB,MAAM,WAAW,KAAK,KAAI;EAC1B,IAAI,CAAC,YAAY,SAAS,KAAI,MAAO,IACnC,OAAO;EAGT,MAAM,QAAQ,SACX,KAAI,CAAE,CACN,MAAM,KAAK,CAAC,CACZ,QAAQ,MAAM,EAAE,SAAS,CAAC;EAE7B,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,IAAI,MAAM,WAAW,GACnB,OAAO,MAAM,EAAE,GAAG,EAAE,EAAE,YAAW,KAAM;EAIzC,MAAM,eAAe,MAAM,EAAE,GAAG;EAChC,MAAM,cAAc,MAAM,MAAM,SAAS,EAAE,GAAG;EAE9C,IAAI,gBAAgB,aAClB,QAAQ,eAAe,YAAA,CAAa,YAAW;EAEjD,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,gBAAgB,eAAc;EAC5B,MAAM,UAAU,CAAC,WAAW;EAE5B,QAAQ,KAAK,cAAc,KAAK,KAAI,GAAI;EAExC,IAAI,KAAK,OAAM,GACb,QAAQ,KAAK,wBAAwB;EAGvC,IAAI,KAAK,MAAK,MAAO,WACnB,QAAQ,KAAK,qBAAqB,cAAc,KAAK,MAAK,GAAI;EAGhE,IAAI,KAAK,KAAI,GACX,QAAQ,KAAK,iBAAiB;EAGhC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,YAAY,eAAc;EACxB,OAAO,KAAK,IAAG,KAAM,KAAK,KAAI,KAAM;CACtC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,YAAY,eAAc;EACxB,OAAO,KAAK,IAAG,KAAM,CAAC,KAAK,WAAU;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMQ,aAAa,aAAY;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EACjC,QAAQ,KAAK;EACb,mBAAmB;CAAK,CAAA;CAM1B,eAAY;EACV,KAAK,WAAW,IAAI,IAAI;CAC1B;CAxHW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC3D5B;EAwBA,QAAA,CAAA,kzFAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADmCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAR3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,kzFAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-avatar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed, linkedSignal } from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';\n\n/**\n * How the browser loads the image (3.11.2, G-40). The same union as\n * `CharacterLoading`, kept separate because entries don't import each other.\n * - `eager`: no attribute, the browser default.\n * - `lazy`: `loading=\"lazy\"`, for an avatar below the fold.\n */\nexport type AvatarLoading = 'eager' | 'lazy';\n\n/** The box of each size in px at 100 % text, written as the `<img>` `width`/`height` (G-40). */\nconst AVATAR_PX: Readonly<Record<AvatarSize, number>> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 };\n\n/**\n * Background of the initials. `default` is the neutral kit avatar; `member-1`\n * … `member-6` are the member colours (`--color-member-1` … `-6`: teal, rust,\n * violet, sage, berry, slate) with white initials, each at least 4.5:1.\n * Assign them per person in a stable order (e.g. join order) and always show\n * the name or initials beside the colour — colour is never the only cue.\n */\nexport type AvatarColor =\n  | 'default'\n  | 'member-1'\n  | 'member-2'\n  | 'member-3'\n  | 'member-4'\n  | 'member-5'\n  | 'member-6';\n\n/** The six member colours in their order (`AvatarColor` without `default`). */\nexport const AVATAR_MEMBER_COLORS: readonly AvatarColor[] = [\n  'member-1',\n  'member-2',\n  'member-3',\n  'member-4',\n  'member-5',\n  'member-6',\n];\n\n/**\n * Avatar component for circular user representation.\n *\n * Features:\n * - Image display with fallback to initials\n * - Auto-generated initials from user name\n * - Status indicator (online, offline, busy, away)\n * - Multiple size variants (xs, sm, md, lg, xl)\n * - Member colours (`color`: `member-1` … `member-6`) with white initials\n * - `ring`: a gap in the page colour around the avatar, for stacks and for\n *   avatars on images or tints\n * - Accessible with alt text support\n *\n * @example\n * ```html\n * <lc-avatar src=\"https://example.com/avatar.jpg\" alt=\"John Doe\" />\n * <lc-avatar name=\"John Doe\" status=\"online\" size=\"lg\" />\n * <lc-avatar name=\"Tom Ek\" color=\"member-2\" [ring]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'lc-avatar',\n  standalone: true,\n  imports: [],\n  templateUrl: './avatar.component.html',\n  styleUrl: './avatar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n  /** Image source URL */\n  src = input<string>();\n\n  /** Alt text for the image */\n  alt = input<string>();\n\n  /** Full name for generating initials */\n  name = input<string>();\n\n  /**\n   * Size of the avatar: xs 24, sm 32, md 40, lg 48, xl 64 px (1.5 … 4 rem).\n   * The `<img>` carries the size's px as `width`/`height`; CSS sizes the box,\n   * so at 200 % text the box grows and the attributes only give the 1:1 ratio.\n   * @default 'md'\n   */\n  size = input<AvatarSize>('md');\n\n  /**\n   * How the browser loads the image. `lazy`: for an avatar below the fold;\n   * writes `loading=\"lazy\"`. `eager` writes no attribute. The initials still\n   * replace an image that fails.\n   * @default 'eager'\n   */\n  loading = input<AvatarLoading>('eager');\n\n  /** Status indicator */\n  status = input<AvatarStatus>();\n\n  /**\n   * Background of the initials: `default` (neutral) or a member colour\n   * `member-1` … `member-6` with white initials (LK-7).\n   */\n  color = input<AvatarColor>('default');\n\n  /**\n   * Draw a ring in the page colour around the avatar (3 px; 2 px for `xs` and\n   * `sm`), so stacked or overlapping avatars stay apart. The ring colour is\n   * `--lc-avatar-ring-color` (default `--color-background`); set it to the\n   * surface the avatar sits on.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * Hide the avatar from assistive technology (no `img` role, no label), for\n   * avatars inside a control that has its own accessible name — e.g. a menu\n   * button labelled \"Menu for Tom Ek\".\n   */\n  decorative = input<boolean>(false);\n\n  /**\n   * Computed initials from name\n   */\n  initials = computed(() => {\n    const fullName = this.name();\n    if (!fullName || fullName.trim() === '') {\n      return '?';\n    }\n\n    const parts = fullName\n      .trim()\n      .split(/\\s+/)\n      .filter((p) => p.length > 0);\n\n    if (parts.length === 0) {\n      return '?';\n    }\n\n    if (parts.length === 1) {\n      return parts[0]?.[0]?.toUpperCase() ?? '?';\n    }\n\n    // First and last name initials\n    const firstInitial = parts[0]?.[0];\n    const lastInitial = parts[parts.length - 1]?.[0];\n\n    if (firstInitial && lastInitial) {\n      return (firstInitial + lastInitial).toUpperCase();\n    }\n    return '?';\n  });\n\n  /**\n   * Computed CSS classes for the avatar\n   */\n  avatarClasses = computed(() => {\n    const classes = ['lc-avatar'];\n\n    classes.push(`lc-avatar--${this.size()}`);\n\n    if (this.status()) {\n      classes.push('lc-avatar--with-status');\n    }\n\n    if (this.color() !== 'default') {\n      classes.push('lc-avatar--member', `lc-avatar--${this.color()}`);\n    }\n\n    if (this.ring()) {\n      classes.push('lc-avatar--ring');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get aria-label for accessibility\n   */\n  ariaLabel = computed(() => {\n    return this.alt() || this.name() || 'Avatar';\n  });\n\n  /** The size's px, written as the `<img>` `width` and `height` (G-40). */\n  protected readonly imagePx = computed(() => AVATAR_PX[this.size()]);\n\n  /**\n   * Check if image should be displayed\n   */\n  showImage = computed(() => {\n    return this.src() && !this.imageError();\n  });\n\n  /**\n   * Track if image failed to load. Resets whenever `src` changes so a new\n   * image gets a fresh attempt instead of staying stuck on the initials.\n   */\n  protected imageError = linkedSignal<string | undefined, boolean>({\n    source: this.src,\n    computation: () => false,\n  });\n\n  /**\n   * Handle image load error\n   */\n  onImageError(): void {\n    this.imageError.set(true);\n  }\n}\n","<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <!-- `loading` before `src`: attribute bindings run in template order, after\n         every property binding, so `[attr.src]` keeps the source behind\n         `loading` (G-40; an engine may start the request when src is set). -->\n    <img\n      [alt]=\"alt() || name() || 'Avatar'\"\n      class=\"lc-avatar__image\"\n      [attr.width]=\"imagePx()\"\n      [attr.height]=\"imagePx()\"\n      [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\"\n      [attr.src]=\"src()!\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n"],"mappings":";;AAcA,MAAM,YAAkD;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;AAAE;AAmBhG,MAAa,uBAA+C;CAC1D;CACA;CACA;CACA;CACA;CACA;AACD;AA8BD,IAAa,kBAAb,MAAa,gBAAe;CAE1B,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGrB,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGrB,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQtB,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQ9B,UAAU,MAAqB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,SAAS,MAAqB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAM9B,QAAQ,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQrC,OAAO,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAO5B,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAKlC,WAAW,eAAc;EACvB,MAAM,WAAW,KAAK,KAAI;EAC1B,IAAI,CAAC,YAAY,SAAS,KAAI,MAAO,IACnC,OAAO;EAGT,MAAM,QAAQ,SACX,KAAI,CAAE,CACN,MAAM,KAAK,CAAC,CACZ,QAAQ,MAAM,EAAE,SAAS,CAAC;EAE7B,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,IAAI,MAAM,WAAW,GACnB,OAAO,MAAM,EAAE,GAAG,EAAE,EAAE,YAAW,KAAM;EAIzC,MAAM,eAAe,MAAM,EAAE,GAAG;EAChC,MAAM,cAAc,MAAM,MAAM,SAAS,EAAE,GAAG;EAE9C,IAAI,gBAAgB,aAClB,QAAQ,eAAe,YAAA,CAAa,YAAW;EAEjD,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,gBAAgB,eAAc;EAC5B,MAAM,UAAU,CAAC,WAAW;EAE5B,QAAQ,KAAK,cAAc,KAAK,KAAI,GAAI;EAExC,IAAI,KAAK,OAAM,GACb,QAAQ,KAAK,wBAAwB;EAGvC,IAAI,KAAK,MAAK,MAAO,WACnB,QAAQ,KAAK,qBAAqB,cAAc,KAAK,MAAK,GAAI;EAGhE,IAAI,KAAK,KAAI,GACX,QAAQ,KAAK,iBAAiB;EAGhC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,YAAY,eAAc;EACxB,OAAO,KAAK,IAAG,KAAM,KAAK,KAAI,KAAM;CACtC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,UAAU,eAAe,UAAU,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKnE,YAAY,eAAc;EACxB,OAAO,KAAK,IAAG,KAAM,CAAC,KAAK,WAAU;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMQ,aAAa,aAAY;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EACjC,QAAQ,KAAK;EACb,mBAAmB;CAAK,CAAA;CAM1B,eAAY;EACV,KAAK,WAAW,IAAI,IAAI;CAC1B;CAxIW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCtE5B;EA8BA,QAAA,CAAA,kzFAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADwCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAR3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,kzFAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-button.mjs

@@ -151,7 +151,7 @@ var ButtonComponent = class ButtonComponent {
 		}],
 		ngImport: i0,
 		template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush()\n  }\"\n  (click)=\"handleClick()\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
-		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
+		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush()\n  }\"\n  (click)=\"handleClick()\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
-			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
+			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -377,7 +377,7 @@ var ButtonLinkComponent = class ButtonLinkComponent {
       select="[slot='icon-after']"
     />`,
 		isInline: true,
-		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
+		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -397,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[class]": "hostClasses()" },
-			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
+			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled){filter:brightness(.92)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled){filter:brightness(1.05)}.btn-warning:active:not(:disabled){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-button.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/button/button.component.ts","../../../../libs/angular-ui-kit/src/lib/button/button.component.html","../../../../libs/angular-ui-kit/src/lib/button/button-link.component.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ViewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'link'\n  | 'danger'\n  | 'warning'\n  | 'info';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n  selector: 'lc-button',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Button component for user actions and form submissions.\n *\n * Features:\n * - Multiple variants (primary, secondary, outline, ghost, danger, link)\n * - Size options (xs, sm, md, lg)\n * - Loading state with spinner\n * - Icon-only mode\n * - Full-width layout option\n * - Keyboard and focus handling\n * - Accessible with ARIA attributes\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions and the next-step-card's narrow actions.\n *\n * @example\n * ```html\n * <lc-button variant=\"primary\" size=\"md\">Save</lc-button>\n * ```\n */\nexport class ButtonComponent {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly disabled = input(false);\n  readonly loading = input(false);\n  readonly iconOnly = input(false);\n  readonly fullWidth = input(false);\n  readonly ariaLabel = input('');\n  readonly type = input<ButtonType>('button');\n\n  /**\n   * Native tooltip (title attribute) on the button.\n   */\n  readonly title = input('');\n\n  /**\n   * Reason shown as tooltip while the button is disabled (or loading).\n   * Takes precedence over `title` in that state. The tooltip also appears\n   * over the disabled button — the component guarantees the inner button\n   * never gets `pointer-events: none`.\n   */\n  readonly disabledReason = input('');\n\n  /**\n   * Render as an inline text button that inherits font size, weight and\n   * line-height from the surrounding text (for links inside copy, clickable\n   * row titles, linked counters). Pair with `variant=\"link\"`.\n   * @default false\n   */\n  readonly inline = input(false);\n\n  /**\n   * Drop the inline padding so a `variant=\"link\"` button sits flush with the\n   * content edge: the label starts at the edge, and the button keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the host or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  readonly clicked = output<void>();\n  readonly focused = output<void>();\n  readonly blurred = output<void>();\n\n  @ViewChild('buttonElement') buttonElement!: ElementRef<HTMLButtonElement>;\n\n  readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  /**\n   * Tooltip actually applied to the button: `disabledReason` while disabled,\n   * `title` otherwise.\n   */\n  readonly effectiveTitle = computed(() => {\n    if (this.isDisabled() && this.disabledReason()) {\n      return this.disabledReason();\n    }\n    return this.title() || null;\n  });\n\n  handleClick(): void {\n    if (!this.isDisabled()) {\n      this.clicked.emit();\n    }\n  }\n\n  handleFocus(): void {\n    this.focused.emit();\n  }\n\n  handleBlur(): void {\n    this.blurred.emit();\n  }\n\n  focus(): void {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  blur(): void {\n    this.buttonElement?.nativeElement.blur();\n  }\n}\n","<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush()\n  }\"\n  (click)=\"handleClick()\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport type { ButtonSize, ButtonVariant } from './button.component';\n\n/**\n * `lc-button` styling on a native link: `<a lcButton href=\"…\">`.\n *\n * Use it for navigation that looks like a button — calls to action, \"read\n * more\" links, a language switch. The host *is* the anchor, so every native\n * link attribute (`href`, `hreflang`, `lang`, `rel`, `target`, `download`,\n * `title`, `aria-*`) passes through untouched, and the component adds no event\n * listeners: after server-side rendering or prerendering the markup is a plain\n * `<a class=\"btn btn-primary btn-md\" href=\"…\">` that works without JavaScript.\n * `routerLink` can sit on the same anchor for in-app navigation.\n *\n * Same variants, sizes and modifiers as `lc-button` (it shares its stylesheet).\n * Use `size=\"lg\"` (48.5 px) where the link must meet the 44 px touch target. A link\n * cannot be disabled or busy — render plain text or an `lc-button` for those\n * states. An `iconOnly` link needs an `aria-label`.\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions and the next-step-card's narrow actions.\n *\n * @example\n * ```html\n * <a lcButton variant=\"primary\" size=\"lg\" href=\"/de/neuigkeiten\">Schau uns beim Bauen zu</a>\n * <a lcButton variant=\"ghost\" href=\"/en/security\" hreflang=\"en\" lang=\"en\">English</a>\n * <a lcButton variant=\"outline\" href=\"https://www.linkedin.com/in/…\" rel=\"me\">\n *   <lc-icon slot=\"icon-before\" name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n *   LinkedIn\n * </a>\n * ```\n */\n@Component({\n  // An attribute selector on purpose: the anchor must stay the element in the\n  // DOM so native link behaviour and attributes are untouched.\n  selector: 'a[lcButton]',\n  template: `<ng-content select=\"[slot='icon-before']\" /><ng-content /><ng-content\n      select=\"[slot='icon-after']\"\n    />`,\n  // The same stylesheet as lc-button: identical style text is registered once,\n  // whichever of the two renders first.\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ButtonLinkComponent {\n  /** Visual variant, as on `lc-button`. */\n  readonly variant = input<ButtonVariant>('primary');\n  /** Size, as on `lc-button`. `lg` (48.5 px high) meets the 44 px touch target. */\n  readonly size = input<ButtonSize>('md');\n  /** Stretch the link to the full width of its container. */\n  readonly fullWidth = input(false);\n  /** Square icon-only link. Give the anchor an `aria-label`. */\n  readonly iconOnly = input(false);\n  /**\n   * Flow with the surrounding text instead of forming a pill (inherits font\n   * size, weight and line-height). Pair with `variant=\"link\"`.\n   */\n  readonly inline = input(false);\n  /**\n   * Drop the inline padding so a `variant=\"link\"` link sits flush with the\n   * content edge: the label starts at the edge, and the link keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the link or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  /** Classes on the anchor; merged with the consumer's own `class`. */\n  protected readonly hostClasses = computed(() => {\n    const classes = ['btn', `btn-${this.variant()}`, `btn-${this.size()}`];\n    if (this.iconOnly()) classes.push('btn-icon-only');\n    if (this.fullWidth()) classes.push('btn-full-width');\n    if (this.inline()) classes.push('btn-inline');\n    if (this.flush()) classes.push('btn-flush');\n    return classes.join(' ');\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-button.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/button/button.component.ts","../../../../libs/angular-ui-kit/src/lib/button/button.component.html","../../../../libs/angular-ui-kit/src/lib/button/button-link.component.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ViewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'link'\n  | 'danger'\n  | 'warning'\n  | 'info';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n  selector: 'lc-button',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Button component for user actions and form submissions.\n *\n * Features:\n * - Multiple variants (primary, secondary, outline, ghost, danger, link)\n * - Size options (xs, sm, md, lg)\n * - Loading state with spinner\n * - Icon-only mode\n * - Full-width layout option\n * - Keyboard and focus handling\n * - Accessible with ARIA attributes\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions and the next-step-card's narrow actions.\n *\n * @example\n * ```html\n * <lc-button variant=\"primary\" size=\"md\">Save</lc-button>\n * ```\n */\nexport class ButtonComponent {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly disabled = input(false);\n  readonly loading = input(false);\n  readonly iconOnly = input(false);\n  readonly fullWidth = input(false);\n  readonly ariaLabel = input('');\n  readonly type = input<ButtonType>('button');\n\n  /**\n   * Native tooltip (title attribute) on the button.\n   */\n  readonly title = input('');\n\n  /**\n   * Reason shown as tooltip while the button is disabled (or loading).\n   * Takes precedence over `title` in that state. The tooltip also appears\n   * over the disabled button — the component guarantees the inner button\n   * never gets `pointer-events: none`.\n   */\n  readonly disabledReason = input('');\n\n  /**\n   * Render as an inline text button that inherits font size, weight and\n   * line-height from the surrounding text (for links inside copy, clickable\n   * row titles, linked counters). Pair with `variant=\"link\"`.\n   * @default false\n   */\n  readonly inline = input(false);\n\n  /**\n   * Drop the inline padding so a `variant=\"link\"` button sits flush with the\n   * content edge: the label starts at the edge, and the button keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the host or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  readonly clicked = output<void>();\n  readonly focused = output<void>();\n  readonly blurred = output<void>();\n\n  @ViewChild('buttonElement') buttonElement!: ElementRef<HTMLButtonElement>;\n\n  readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  /**\n   * Tooltip actually applied to the button: `disabledReason` while disabled,\n   * `title` otherwise.\n   */\n  readonly effectiveTitle = computed(() => {\n    if (this.isDisabled() && this.disabledReason()) {\n      return this.disabledReason();\n    }\n    return this.title() || null;\n  });\n\n  handleClick(): void {\n    if (!this.isDisabled()) {\n      this.clicked.emit();\n    }\n  }\n\n  handleFocus(): void {\n    this.focused.emit();\n  }\n\n  handleBlur(): void {\n    this.blurred.emit();\n  }\n\n  focus(): void {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  blur(): void {\n    this.buttonElement?.nativeElement.blur();\n  }\n}\n","<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush()\n  }\"\n  (click)=\"handleClick()\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport type { ButtonSize, ButtonVariant } from './button.component';\n\n/**\n * `lc-button` styling on a native link: `<a lcButton href=\"…\">`.\n *\n * Use it for navigation that looks like a button — calls to action, \"read\n * more\" links, a language switch. The host *is* the anchor, so every native\n * link attribute (`href`, `hreflang`, `lang`, `rel`, `target`, `download`,\n * `title`, `aria-*`) passes through untouched, and the component adds no event\n * listeners: after server-side rendering or prerendering the markup is a plain\n * `<a class=\"btn btn-primary btn-md\" href=\"…\">` that works without JavaScript.\n * `routerLink` can sit on the same anchor for in-app navigation.\n *\n * Same variants, sizes and modifiers as `lc-button` (it shares its stylesheet).\n * Use `size=\"lg\"` (48.5 px) where the link must meet the 44 px touch target. A link\n * cannot be disabled or busy — render plain text or an `lc-button` for those\n * states. An `iconOnly` link needs an `aria-label`.\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions and the next-step-card's narrow actions.\n *\n * @example\n * ```html\n * <a lcButton variant=\"primary\" size=\"lg\" href=\"/de/neuigkeiten\">Schau uns beim Bauen zu</a>\n * <a lcButton variant=\"ghost\" href=\"/en/security\" hreflang=\"en\" lang=\"en\">English</a>\n * <a lcButton variant=\"outline\" href=\"https://www.linkedin.com/in/…\" rel=\"me\">\n *   <lc-icon slot=\"icon-before\" name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n *   LinkedIn\n * </a>\n * ```\n */\n@Component({\n  // An attribute selector on purpose: the anchor must stay the element in the\n  // DOM so native link behaviour and attributes are untouched.\n  selector: 'a[lcButton]',\n  template: `<ng-content select=\"[slot='icon-before']\" /><ng-content /><ng-content\n      select=\"[slot='icon-after']\"\n    />`,\n  // The same stylesheet as lc-button: identical style text is registered once,\n  // whichever of the two renders first.\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ButtonLinkComponent {\n  /** Visual variant, as on `lc-button`. */\n  readonly variant = input<ButtonVariant>('primary');\n  /** Size, as on `lc-button`. `lg` (48.5 px high) meets the 44 px touch target. */\n  readonly size = input<ButtonSize>('md');\n  /** Stretch the link to the full width of its container. */\n  readonly fullWidth = input(false);\n  /** Square icon-only link. Give the anchor an `aria-label`. */\n  readonly iconOnly = input(false);\n  /**\n   * Flow with the surrounding text instead of forming a pill (inherits font\n   * size, weight and line-height). Pair with `variant=\"link\"`.\n   */\n  readonly inline = input(false);\n  /**\n   * Drop the inline padding so a `variant=\"link\"` link sits flush with the\n   * content edge: the label starts at the edge, and the link keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the link or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  /** Classes on the anchor; merged with the consumer's own `class`. */\n  protected readonly hostClasses = computed(() => {\n    const classes = ['btn', `btn-${this.variant()}`, `btn-${this.size()}`];\n    if (this.iconOnly()) classes.push('btn-icon-only');\n    if (this.fullWidth()) classes.push('btn-full-width');\n    if (this.inline()) classes.push('btn-inline');\n    if (this.flush()) classes.push('btn-flush');\n    return classes.join(' ');\n  });\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-character.mjs

@@ -16,6 +16,7 @@ var CharacterComponent = class CharacterComponent {
 	});
 	colorMode = input("auto", ...ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []);
 	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	loading = input("eager", ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	basePath = inject(LC_CHARACTER_BASE_PATH);
 	lightSrc = computed(() => `${this.basePath.replace(/\/$/, "")}/${this.pose()}-light.svg`, ...ngDevMode ? [{ debugName: "lightSrc" }] : /* istanbul ignore next */ []);
 	darkSrc = computed(() => `${this.basePath.replace(/\/$/, "")}/${this.pose()}-dark.svg`, ...ngDevMode ? [{ debugName: "darkSrc" }] : /* istanbul ignore next */ []);
@@ -62,6 +63,13 @@ var CharacterComponent = class CharacterComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: { properties: {
@@ -71,7 +79,7 @@ var CharacterComponent = class CharacterComponent {
 			"attr.aria-label": "ariaLabel() || null"
 		} },
 		ngImport: i0,
-		template: "@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n",
+		template: "@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n",
 		styles: [":host{--_lc-character-size: 64px;display:block;flex:none;width:var(--lc-character-size, var(--_lc-character-size));height:var(--lc-character-size, var(--_lc-character-size));aspect-ratio:1}:host(.lc-character--48){--_lc-character-size: 48px}:host(.lc-character--80){--_lc-character-size: 80px}:host(.lc-character--96){--_lc-character-size: 96px}:host(.lc-character--128){--_lc-character-size: 128px}.lc-character__img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.lc-character__img--dark{display:none}:host-context(:root.dark) .lc-character__img--light,:host-context(:root:not(.light):not(.system)) .lc-character__img--light{display:none}:host-context(:root.dark) .lc-character__img--dark,:host-context(:root:not(.light):not(.system)) .lc-character__img--dark{display:block}@media(prefers-color-scheme:dark){:host-context(:root.system:not(.light)) .lc-character__img--light{display:none}:host-context(:root.system:not(.light)) .lc-character__img--dark{display:block}}@media(forced-colors:active){:host([aria-hidden=true]){visibility:hidden}}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -94,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.role]": "ariaLabel() ? 'img' : null",
 				"[attr.aria-label]": "ariaLabel() || null"
 			},
-			template: "@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n",
+			template: "@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n",
 			styles: [":host{--_lc-character-size: 64px;display:block;flex:none;width:var(--lc-character-size, var(--_lc-character-size));height:var(--lc-character-size, var(--_lc-character-size));aspect-ratio:1}:host(.lc-character--48){--_lc-character-size: 48px}:host(.lc-character--80){--_lc-character-size: 80px}:host(.lc-character--96){--_lc-character-size: 96px}:host(.lc-character--128){--_lc-character-size: 128px}.lc-character__img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.lc-character__img--dark{display:none}:host-context(:root.dark) .lc-character__img--light,:host-context(:root:not(.light):not(.system)) .lc-character__img--light{display:none}:host-context(:root.dark) .lc-character__img--dark,:host-context(:root:not(.light):not(.system)) .lc-character__img--dark{display:block}@media(prefers-color-scheme:dark){:host-context(:root.system:not(.light)) .lc-character__img--light{display:none}:host-context(:root.system:not(.light)) .lc-character__img--dark{display:block}}@media(forced-colors:active){:host([aria-hidden=true]){visibility:hidden}}\n"]
 		}]
 	}],
@@ -130,6 +138,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "ariaLabel",
 				required: false
 			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
 		}]
 	}
 });

package/fesm2022/lifecorner-angular-ui-kit-character.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-character.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/character/character.component.ts","../../../../libs/angular-ui-kit/src/lib/character/character.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, InjectionToken, computed, inject, input } from '@angular/core';\nimport { LC_LOGO_BASE_PATH } from '@lifecorner/angular-ui-kit/logo';\nimport type { CharacterPose } from '@lifecorner/angular-ui-kit/character-svg';\n\n// A type-only re-export: no runtime edge to the SVG strings (3.8, G-4).\nexport type { CharacterPose } from '@lifecorner/angular-ui-kit/character-svg';\n\n/** Edge of the figure's square box in px. `--lc-character-size` overrides it. */\nexport type CharacterSize = 48 | 64 | 80 | 96 | 128;\n\n/**\n * Which drawing to show.\n * - `auto`: the root theme picks the light or the dark drawing.\n * - `dark`: the on-dark drawing in both themes, for a fixed dark surface.\n */\nexport type CharacterColorMode = 'auto' | 'dark';\n\n/**\n * The URL folder that holds the pose files (`<pose>-light.svg`,\n * `<pose>-dark.svg`, copied from the package's `assets/character/`). Follows\n * `LC_LOGO_BASE_PATH` (default `/assets` → `/assets/character`) unless you\n * provide it yourself.\n *\n * @example\n * ```ts\n * providers: [{ provide: LC_CHARACTER_BASE_PATH, useValue: '/static/edu' }]\n * ```\n */\nexport const LC_CHARACTER_BASE_PATH = new InjectionToken<string>('LC_CHARACTER_BASE_PATH', {\n  providedIn: 'root',\n  factory: () => `${inject(LC_LOGO_BASE_PATH).replace(/\\/$/, '')}/character`,\n});\n\n/** `size=\"96\"` from a template is the number 96. */\nfunction toCharacterSize(value: CharacterSize | `${CharacterSize}`): CharacterSize {\n  return Number(value) as CharacterSize;\n}\n\n/**\n * Edu, the LifeCorner character, in one of his poses (3.8, gap G-4).\n *\n * Renders the pose files as `<img>` (no inline SVG, no Trusted Types policy),\n * in a square box that is sized by CSS before any JavaScript runs, so the\n * figure prerenders and never shifts the layout. Decorative by default\n * (`aria-hidden=\"true\"`); `ariaLabel` makes it an image with that name. The\n * figure is still: nothing animates.\n *\n * Without Angular, use the files (`@lifecorner/angular-ui-kit/assets/character/<pose>-<light|dark>.svg`)\n * or the strings of `@lifecorner/angular-ui-kit/character-svg`.\n *\n * @example Decorative, follows the app theme\n * ```html\n * <lc-character pose=\"comforts\" size=\"96\" />\n * ```\n *\n * @example On a fixed dark surface, with a name\n * ```html\n * <lc-character pose=\"hello\" colorMode=\"dark\" ariaLabel=\"Edu winkt\" />\n * ```\n */\n@Component({\n  selector: 'lc-character',\n  standalone: true,\n  imports: [],\n  templateUrl: './character.component.html',\n  styleUrls: ['./character.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClass()',\n    '[attr.aria-hidden]': \"ariaLabel() ? null : 'true'\",\n    '[attr.role]': \"ariaLabel() ? 'img' : null\",\n    '[attr.aria-label]': 'ariaLabel() || null',\n  },\n})\nexport class CharacterComponent {\n  /**\n   * Which pose to draw: hello, shows-the-way, happy, welcomes-member, resting,\n   * in-his-corner, comforts, all-done, calm, connects, discovered, thinking,\n   * connection-paused, see-you. `calm` is the neutral Edu.\n   * @default 'calm'\n   */\n  readonly pose = input<CharacterPose>('calm');\n\n  /**\n   * Edge of the square box in px: 48, 64, 80, 96 or 128 (`size=\"96\"` works\n   * too). `--lc-character-size` overrides it; set that hook per breakpoint in\n   * CSS.\n   * @default 64\n   */\n  readonly size = input<CharacterSize, CharacterSize | `${CharacterSize}`>(64, { transform: toCharacterSize });\n\n  /**\n   * Which drawing to show.\n   * - `auto`: both drawings are in the DOM and the root theme shows one\n   *   (light, dark, and system with the OS setting), without JavaScript.\n   * - `dark`: only the on-dark drawing, in both themes, for a fixed dark\n   *   surface such as the hero band.\n   * @default 'auto'\n   */\n  readonly colorMode = input<CharacterColorMode>('auto');\n\n  /**\n   * Empty: decorative (`aria-hidden=\"true\"`). Set: `role=\"img\"` with this\n   * name. This is your own translated text; the kit ships none.\n   * @default ''\n   */\n  readonly ariaLabel = input<string>('');\n\n  private readonly basePath = inject(LC_CHARACTER_BASE_PATH);\n\n  protected readonly lightSrc = computed(() => `${this.basePath.replace(/\\/$/, '')}/${this.pose()}-light.svg`);\n  protected readonly darkSrc = computed(() => `${this.basePath.replace(/\\/$/, '')}/${this.pose()}-dark.svg`);\n  protected readonly hostClass = computed(() => `lc-character lc-character--${this.size()}`);\n}\n","@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n"],"mappings":";;;AA4BA,MAAa,yBAAyB,IAAI,eAAuB,0BAA0B;CACzF,YAAY;CACZ,eAAe,GAAG,OAAO,iBAAiB,CAAC,CAAC,QAAQ,OAAO,EAAE,EAAC;AAC/D,CAAA;AAGD,SAAS,gBAAgB,OAAyC;CAChE,OAAO,OAAO,KAAK;AACrB;AAsCA,IAAa,qBAAb,MAAa,mBAAkB;CAOpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQnC,OAAO,MAAyD,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAUhG,YAAY,MAA0B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,YAAY,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAErB,WAAW,OAAO,sBAAsB;CAEtC,WAAW,eAAe,GAAG,KAAK,SAAS,QAAQ,OAAO,EAAE,EAAC,GAAI,KAAK,KAAI,EAAE,aAAa,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACzF,UAAU,eAAe,GAAG,KAAK,SAAS,QAAQ,OAAO,EAAE,EAAC,GAAI,KAAK,KAAI,EAAE,YAAY,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACvF,YAAY,eAAe,8BAA8B,KAAK,KAAI,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAtC/E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,oBAAA;GAAA,aAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC1E/B;EAMA,QAAA,CAAA,ojCAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADoEa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAd9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,YACZ;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,MACzC;IACJ,WAAW;IACX,sBAAsB;IACtB,eAAe;IACf,qBAAqB;GACtB;GAAA,UAAA;GAAA,QAAA,CAAA,ojCAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-character.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/character/character.component.ts","../../../../libs/angular-ui-kit/src/lib/character/character.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, InjectionToken, computed, inject, input } from '@angular/core';\nimport { LC_LOGO_BASE_PATH } from '@lifecorner/angular-ui-kit/logo';\nimport type { CharacterPose } from '@lifecorner/angular-ui-kit/character-svg';\n\n// A type-only re-export: no runtime edge to the SVG strings (3.8, G-4).\nexport type { CharacterPose } from '@lifecorner/angular-ui-kit/character-svg';\n\n/** Edge of the figure's square box in px. `--lc-character-size` overrides it. */\nexport type CharacterSize = 48 | 64 | 80 | 96 | 128;\n\n/**\n * Which drawing to show.\n * - `auto`: the root theme picks the light or the dark drawing.\n * - `dark`: the on-dark drawing in both themes, for a fixed dark surface.\n */\nexport type CharacterColorMode = 'auto' | 'dark';\n\n/**\n * How the browser loads the drawings (3.11.2, G-39).\n * - `eager`: no attribute, the browser default; keep it above the fold.\n * - `lazy`: `loading=\"lazy\"` on every drawing, for a figure below the fold.\n */\nexport type CharacterLoading = 'eager' | 'lazy';\n\n/**\n * The URL folder that holds the pose files (`<pose>-light.svg`,\n * `<pose>-dark.svg`, copied from the package's `assets/character/`). Follows\n * `LC_LOGO_BASE_PATH` (default `/assets` → `/assets/character`) unless you\n * provide it yourself.\n *\n * @example\n * ```ts\n * providers: [{ provide: LC_CHARACTER_BASE_PATH, useValue: '/static/edu' }]\n * ```\n */\nexport const LC_CHARACTER_BASE_PATH = new InjectionToken<string>('LC_CHARACTER_BASE_PATH', {\n  providedIn: 'root',\n  factory: () => `${inject(LC_LOGO_BASE_PATH).replace(/\\/$/, '')}/character`,\n});\n\n/** `size=\"96\"` from a template is the number 96. */\nfunction toCharacterSize(value: CharacterSize | `${CharacterSize}`): CharacterSize {\n  return Number(value) as CharacterSize;\n}\n\n/**\n * Edu, the LifeCorner character, in one of his poses (3.8, gap G-4).\n *\n * Renders the pose files as `<img>` (no inline SVG, no Trusted Types policy),\n * in a square box that is sized by CSS before any JavaScript runs, so the\n * figure prerenders and never shifts the layout. Decorative by default\n * (`aria-hidden=\"true\"`); `ariaLabel` makes it an image with that name. The\n * figure is still: nothing animates.\n *\n * Without Angular, use the files (`@lifecorner/angular-ui-kit/assets/character/<pose>-<light|dark>.svg`)\n * or the strings of `@lifecorner/angular-ui-kit/character-svg`.\n *\n * @example Decorative, follows the app theme\n * ```html\n * <lc-character pose=\"comforts\" size=\"96\" />\n * ```\n *\n * @example On a fixed dark surface, with a name\n * ```html\n * <lc-character pose=\"hello\" colorMode=\"dark\" ariaLabel=\"Edu winkt\" />\n * ```\n */\n@Component({\n  selector: 'lc-character',\n  standalone: true,\n  imports: [],\n  templateUrl: './character.component.html',\n  styleUrls: ['./character.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClass()',\n    '[attr.aria-hidden]': \"ariaLabel() ? null : 'true'\",\n    '[attr.role]': \"ariaLabel() ? 'img' : null\",\n    '[attr.aria-label]': 'ariaLabel() || null',\n  },\n})\nexport class CharacterComponent {\n  /**\n   * Which pose to draw: hello, shows-the-way, happy, welcomes-member, resting,\n   * in-his-corner, comforts, all-done, calm, connects, discovered, thinking,\n   * connection-paused, see-you. `calm` is the neutral Edu.\n   * @default 'calm'\n   */\n  readonly pose = input<CharacterPose>('calm');\n\n  /**\n   * Edge of the square box in px: 48, 64, 80, 96 or 128 (`size=\"96\"` works\n   * too). `--lc-character-size` overrides it; set that hook per breakpoint in\n   * CSS.\n   * @default 64\n   */\n  readonly size = input<CharacterSize, CharacterSize | `${CharacterSize}`>(64, { transform: toCharacterSize });\n\n  /**\n   * Which drawing to show.\n   * - `auto`: both drawings are in the DOM and the root theme shows one\n   *   (light, dark, and system with the OS setting), without JavaScript.\n   * - `dark`: only the on-dark drawing, in both themes, for a fixed dark\n   *   surface such as the hero band.\n   * @default 'auto'\n   */\n  readonly colorMode = input<CharacterColorMode>('auto');\n\n  /**\n   * Empty: decorative (`aria-hidden=\"true\"`). Set: `role=\"img\"` with this\n   * name. This is your own translated text; the kit ships none.\n   * @default ''\n   */\n  readonly ariaLabel = input<string>('');\n\n  /**\n   * How the browser loads the drawings. `lazy`: for a figure below the fold\n   * (such as the horizon); writes `loading=\"lazy\"` on every drawing, and in\n   * `auto` only the drawing of the current theme is fetched. `eager` writes no\n   * attribute (the browser default). Keep `eager` above the fold.\n   * @default 'eager'\n   */\n  readonly loading = input<CharacterLoading>('eager');\n\n  private readonly basePath = inject(LC_CHARACTER_BASE_PATH);\n\n  protected readonly lightSrc = computed(() => `${this.basePath.replace(/\\/$/, '')}/${this.pose()}-light.svg`);\n  protected readonly darkSrc = computed(() => `${this.basePath.replace(/\\/$/, '')}/${this.pose()}-dark.svg`);\n  protected readonly hostClass = computed(() => `lc-character lc-character--${this.size()}`);\n}\n","@if (colorMode() === 'dark') {\n  <img class=\"lc-character__img\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n} @else {\n  <img class=\"lc-character__img lc-character__img--light\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"lightSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n  <img class=\"lc-character__img lc-character__img--dark\" [attr.loading]=\"loading() === 'lazy' ? 'lazy' : null\" [attr.src]=\"darkSrc()\" alt=\"\" aria-hidden=\"true\" width=\"100\" height=\"100\" decoding=\"async\" fetchpriority=\"low\" />\n}\n"],"mappings":";;;AAmCA,MAAa,yBAAyB,IAAI,eAAuB,0BAA0B;CACzF,YAAY;CACZ,eAAe,GAAG,OAAO,iBAAiB,CAAC,CAAC,QAAQ,OAAO,EAAE,EAAC;AAC/D,CAAA;AAGD,SAAS,gBAAgB,OAAyC;CAChE,OAAO,OAAO,KAAK;AACrB;AAsCA,IAAa,qBAAb,MAAa,mBAAkB;CAOpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQnC,OAAO,MAAyD,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAUhG,YAAY,MAA0B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,YAAY,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAS7B,UAAU,MAAwB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAElC,WAAW,OAAO,sBAAsB;CAEtC,WAAW,eAAe,GAAG,KAAK,SAAS,QAAQ,OAAO,EAAE,EAAC,GAAI,KAAK,KAAI,EAAE,aAAa,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACzF,UAAU,eAAe,GAAG,KAAK,SAAS,QAAQ,OAAO,EAAE,EAAC,GAAI,KAAK,KAAI,EAAE,YAAY,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACvF,YAAY,eAAe,8BAA8B,KAAK,KAAI,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CA/C/E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,oBAAA;GAAA,aAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCjF/B;EAMA,QAAA,CAAA,ojCAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD2Ea,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAd9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,YACZ;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,MACzC;IACJ,WAAW;IACX,sBAAsB;IACtB,eAAe;IACf,qBAAqB;GACtB;GAAA,UAAA;GAAA,QAAA,CAAA,ojCAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-footer.mjs

@@ -95,7 +95,7 @@ var FooterComponent = class FooterComponent {
 		},
 		ngImport: i0,
 		template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n  @if (sections().length > 0 && !compact()) {\n    <nav class=\"footer__sections\" [attr.aria-label]=\"navAriaLabel()\">\n      @for (section of sections(); track section.title) {\n        <div class=\"footer__section\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"footer__section-title\">{{ section.title }}</h2>\n            }\n            @case (3) {\n              <h3 class=\"footer__section-title\">{{ section.title }}</h3>\n            }\n            @case (5) {\n              <h5 class=\"footer__section-title\">{{ section.title }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"footer__section-title\">{{ section.title }}</h6>\n            }\n            @default {\n              <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n            }\n          }\n          <ul class=\"footer__links\">\n            @for (link of section.links; track link.href) {\n              <li>\n                <a\n                  class=\"footer__link\"\n                  [class.footer__link--current]=\"link.current\"\n                  [href]=\"link.href\"\n                  [target]=\"link.external ? '_blank' : '_self'\"\n                  [attr.rel]=\"linkRel(link)\"\n                  [attr.aria-current]=\"link.current ? 'page' : null\"\n                >\n                  {{ link.label }}\n                  @if (link.external) {\n                    <span class=\"footer__sr-only\">{{ externalLinkHint() }}</span>\n                    <lc-icon\n                      name=\"external-link\"\n                      size=\"xs\"\n                      class=\"footer__external-icon\"\n                      aria-hidden=\"true\"\n                      [decorative]=\"true\"\n                    />\n                  }\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    </nav>\n  }\n  <div class=\"footer__bottom\">\n    <ng-content />\n    @if (copyright()) {\n      <span class=\"footer__copyright\">{{ copyright() }}</span>\n    }\n  </div>\n</footer>\n",
-		styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;--lc-btn-overflow-wrap: anywhere}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"],
+		styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem);overflow-wrap:anywhere}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;--lc-btn-overflow-wrap: anywhere}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -128,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({
 			viewProviders: [ɵprovideKitIcons([ICON_EXTERNAL_LINK])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n  @if (sections().length > 0 && !compact()) {\n    <nav class=\"footer__sections\" [attr.aria-label]=\"navAriaLabel()\">\n      @for (section of sections(); track section.title) {\n        <div class=\"footer__section\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"footer__section-title\">{{ section.title }}</h2>\n            }\n            @case (3) {\n              <h3 class=\"footer__section-title\">{{ section.title }}</h3>\n            }\n            @case (5) {\n              <h5 class=\"footer__section-title\">{{ section.title }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"footer__section-title\">{{ section.title }}</h6>\n            }\n            @default {\n              <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n            }\n          }\n          <ul class=\"footer__links\">\n            @for (link of section.links; track link.href) {\n              <li>\n                <a\n                  class=\"footer__link\"\n                  [class.footer__link--current]=\"link.current\"\n                  [href]=\"link.href\"\n                  [target]=\"link.external ? '_blank' : '_self'\"\n                  [attr.rel]=\"linkRel(link)\"\n                  [attr.aria-current]=\"link.current ? 'page' : null\"\n                >\n                  {{ link.label }}\n                  @if (link.external) {\n                    <span class=\"footer__sr-only\">{{ externalLinkHint() }}</span>\n                    <lc-icon\n                      name=\"external-link\"\n                      size=\"xs\"\n                      class=\"footer__external-icon\"\n                      aria-hidden=\"true\"\n                      [decorative]=\"true\"\n                    />\n                  }\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    </nav>\n  }\n  <div class=\"footer__bottom\">\n    <ng-content />\n    @if (copyright()) {\n      <span class=\"footer__copyright\">{{ copyright() }}</span>\n    }\n  </div>\n</footer>\n",
-			styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;--lc-btn-overflow-wrap: anywhere}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"]
+			styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem);overflow-wrap:anywhere}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;--lc-btn-overflow-wrap: anywhere}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"]
 		}]
 	}],
 	propDecorators: {