@lifecorner/angular-ui-kit 3.17.0 → 3.19.0

package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs

@@ -13,6 +13,7 @@ var BottomNavComponent = class BottomNavComponent {
 	variant = input("docked", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	fixed = input(true, ...ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []);
 	maxItems = input(5, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
+	showMore = input(false, ...ngDevMode ? [{ debugName: "showMore" }] : /* istanbul ignore next */ []);
 	moreLabel = input("More", ...ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []);
 	moreIcon = input("dots", ...ngDevMode ? [{ debugName: "moreIcon" }] : /* istanbul ignore next */ []);
 	moreRoute = input("", ...ngDevMode ? [{ debugName: "moreRoute" }] : /* istanbul ignore next */ []);
@@ -24,7 +25,7 @@ var BottomNavComponent = class BottomNavComponent {
 	entries = computed(() => {
 		const items = this.sortedItems();
 		const max = Math.max(1, Math.floor(this.maxItems()));
-		if (items.length <= max) return items.map((item) => ({
+		if (!this.showMore() && items.length <= max) return items.map((item) => ({
 			item,
 			current: this.matches(item.route),
 			more: false
@@ -127,6 +128,13 @@ var BottomNavComponent = class BottomNavComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			showMore: {
+				classPropertyName: "showMore",
+				publicName: "showMore",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			moreLabel: {
 				classPropertyName: "moreLabel",
 				publicName: "moreLabel",
@@ -301,6 +309,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showMore: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showMore",
+				required: false
+			}]
+		}],
 		moreLabel: [{
 			type: i0.Input,
 			args: [{

package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n  /** Unique id. */\n  id: string;\n  /** Visible label, always shown below the icon. */\n  label: string;\n  /** Icon name (`lc-icon`), drawn at 24 px. */\n  icon: string;\n  /** Router path the item links to (`routerLink`). */\n  route: string;\n  /** Sort order; items without one keep their array order. */\n  displayOrder?: number;\n  /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n  badge?: {\n    /** Text or number inside the badge. */\n    value: string | number;\n    /** Badge colour (`lc-badge` variant). */\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n  };\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n  item: BottomNavItem;\n  current: boolean;\n  more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n *   `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n *   label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n *   its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n *   sub-page (`/household/members`) keeps its destination current; `/` only\n *   matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n *   rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n *   without `moreRoute` the entry is a button that emits `moreClick`.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n *   bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n *   (`z-index` 900). Reserve space for it at the end of the page (see\n *   `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n *   transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n *   variant=\"floating\"\n *   ariaLabel=\"Hauptnavigation\"\n *   [items]=\"[\n *     { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n *     { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n *   ]\"\n *   [activeRoute]=\"router.url\"\n *   (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-bottom-nav',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n  // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n  viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n  templateUrl: './bottom-nav.component.html',\n  styleUrl: './bottom-nav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-bottom-nav-host',\n  },\n})\nexport class BottomNavComponent {\n  /** Destinations, left to right (sorted by `displayOrder` when given). */\n  readonly items = input<readonly BottomNavItem[]>([]);\n\n  /**\n   * The current URL (e.g. `router.url`). The item whose route matches its\n   * first path segment is current; `/` matches only itself.\n   */\n  readonly activeRoute = input('');\n\n  /** Accessible name of the `<nav>` landmark. */\n  readonly ariaLabel = input('Main navigation');\n\n  /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n  readonly variant = input<BottomNavVariant>('docked');\n\n  /**\n   * Pin the bar to the bottom of the viewport. Turn off to render it in the\n   * document flow (previews, tests, a custom container).\n   */\n  readonly fixed = input(true);\n\n  /**\n   * Most entries the bar shows. With more destinations the first\n   * `maxItems − 1` stay and the rest go behind the \"More\" entry.\n   */\n  readonly maxItems = input(5);\n\n  /** Label of the overflow entry. */\n  readonly moreLabel = input('More');\n\n  /** Icon of the overflow entry. */\n  readonly moreIcon = input('dots');\n\n  /**\n   * Route of the overflow entry (a page that lists the remaining\n   * destinations). Empty renders the entry as a button that emits `moreClick`.\n   */\n  readonly moreRoute = input('');\n\n  /**\n   * Text read after an item's label when it has a badge; `{value}` is\n   * replaced with the badge value (e.g. \"3 new\").\n   */\n  readonly badgeAriaLabel = input('{value} new');\n\n  /** The current item was tapped again (e.g. scroll the page to the top). */\n  readonly reselect = output<BottomNavItem>();\n\n  /** The overflow entry was tapped while it has no `moreRoute`. */\n  readonly moreClick = output<void>();\n\n  /** Destinations in display order. */\n  private readonly sortedItems = computed(() =>\n    [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n  );\n\n  /** Path of `activeRoute` without query and fragment. */\n  private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n  /** Entries as rendered: destinations plus, on overflow, the \"More\" entry. */\n  protected readonly entries = computed<BottomNavEntry[]>(() => {\n    const items = this.sortedItems();\n    const max = Math.max(1, Math.floor(this.maxItems()));\n    if (items.length <= max) {\n      return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n    }\n    const visible = items.slice(0, max - 1);\n    const hidden = items.slice(max - 1);\n    const moreRoute = this.moreRoute();\n    const moreItem: BottomNavItem = {\n      id: '__more',\n      label: this.moreLabel(),\n      icon: this.moreIcon(),\n      route: moreRoute,\n    };\n    const moreCurrent =\n      (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n    return [\n      ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n      { item: moreItem, current: moreCurrent, more: true },\n    ];\n  });\n\n  protected readonly navClasses = computed(() => {\n    const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n    if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n    return classes.join(' ');\n  });\n\n  /** Visually hidden badge text for screen readers. */\n  protected badgeText(item: BottomNavItem): string {\n    return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n  }\n\n  protected onItemClick(entry: BottomNavEntry): void {\n    if (entry.current && !entry.more) {\n      this.reselect.emit(entry.item);\n    }\n  }\n\n  protected onMoreButtonClick(): void {\n    this.moreClick.emit();\n  }\n\n  /** First-segment match: `/household/members` keeps `/household` current. */\n  private matches(route: string): boolean {\n    const path = this.activePath();\n    const target = route.split(/[?#]/)[0] || '/';\n    if (target === '/') return path === '/';\n    const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n    return path === normalized || path.startsWith(`${normalized}/`);\n  }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n  /** Unique id. */\n  id: string;\n  /** Visible label, always shown below the icon. */\n  label: string;\n  /** Icon name (`lc-icon`), drawn at 24 px. */\n  icon: string;\n  /** Router path the item links to (`routerLink`). */\n  route: string;\n  /** Sort order; items without one keep their array order. */\n  displayOrder?: number;\n  /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n  badge?: {\n    /** Text or number inside the badge. */\n    value: string | number;\n    /** Badge colour (`lc-badge` variant). */\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n  };\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n  item: BottomNavItem;\n  current: boolean;\n  more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n *   `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n *   label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n *   its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n *   sub-page (`/household/members`) keeps its destination current; `/` only\n *   matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n *   rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n *   without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n *   slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n *   bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n *   (`z-index` 900). Reserve space for it at the end of the page (see\n *   `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n *   transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n *   variant=\"floating\"\n *   ariaLabel=\"Hauptnavigation\"\n *   [items]=\"[\n *     { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n *     { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n *   ]\"\n *   [activeRoute]=\"router.url\"\n *   (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-bottom-nav',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n  // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n  viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n  templateUrl: './bottom-nav.component.html',\n  styleUrl: './bottom-nav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-bottom-nav-host',\n  },\n})\nexport class BottomNavComponent {\n  /** Destinations, left to right (sorted by `displayOrder` when given). */\n  readonly items = input<readonly BottomNavItem[]>([]);\n\n  /**\n   * The current URL (e.g. `router.url`). The item whose route matches its\n   * first path segment is current; `/` matches only itself.\n   */\n  readonly activeRoute = input('');\n\n  /** Accessible name of the `<nav>` landmark. */\n  readonly ariaLabel = input('Main navigation');\n\n  /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n  readonly variant = input<BottomNavVariant>('docked');\n\n  /**\n   * Pin the bar to the bottom of the viewport. Turn off to render it in the\n   * document flow (previews, tests, a custom container).\n   */\n  readonly fixed = input(true);\n\n  /**\n   * Most entries the bar shows, \"More\" included. With more destinations, or\n   * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n   * \"More\" entry.\n   *\n   * @default 5\n   */\n  readonly maxItems = input(5);\n\n  /**\n   * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n   * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n   * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n   * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n   * and any others move behind it, as on overflow.\n   *\n   * @default false\n   */\n  readonly showMore = input(false);\n\n  /**\n   * Label of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'More'\n   */\n  readonly moreLabel = input('More');\n\n  /**\n   * Icon of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'dots'\n   */\n  readonly moreIcon = input('dots');\n\n  /**\n   * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n   * lists the remaining destinations. Empty renders the entry as a button that\n   * emits `moreClick`.\n   *\n   * @default ''\n   */\n  readonly moreRoute = input('');\n\n  /**\n   * Text read after an item's label when it has a badge; `{value}` is\n   * replaced with the badge value (e.g. \"3 new\").\n   */\n  readonly badgeAriaLabel = input('{value} new');\n\n  /** The current item was tapped again (e.g. scroll the page to the top). */\n  readonly reselect = output<BottomNavItem>();\n\n  /** The \"More\" entry was tapped while it has no `moreRoute`. */\n  readonly moreClick = output<void>();\n\n  /** Destinations in display order. */\n  private readonly sortedItems = computed(() =>\n    [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n  );\n\n  /** Path of `activeRoute` without query and fragment. */\n  private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n  /**\n   * Entries as rendered: destinations plus, on overflow or with `showMore`,\n   * the \"More\" entry, which then takes one of the `maxItems` entries.\n   */\n  protected readonly entries = computed<BottomNavEntry[]>(() => {\n    const items = this.sortedItems();\n    const max = Math.max(1, Math.floor(this.maxItems()));\n    if (!this.showMore() && items.length <= max) {\n      return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n    }\n    const visible = items.slice(0, max - 1);\n    const hidden = items.slice(max - 1);\n    const moreRoute = this.moreRoute();\n    const moreItem: BottomNavItem = {\n      id: '__more',\n      label: this.moreLabel(),\n      icon: this.moreIcon(),\n      route: moreRoute,\n    };\n    const moreCurrent =\n      (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n    return [\n      ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n      { item: moreItem, current: moreCurrent, more: true },\n    ];\n  });\n\n  protected readonly navClasses = computed(() => {\n    const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n    if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n    return classes.join(' ');\n  });\n\n  /** Visually hidden badge text for screen readers. */\n  protected badgeText(item: BottomNavItem): string {\n    return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n  }\n\n  protected onItemClick(entry: BottomNavEntry): void {\n    if (entry.current && !entry.more) {\n      this.reselect.emit(entry.item);\n    }\n  }\n\n  protected onMoreButtonClick(): void {\n    this.moreClick.emit();\n  }\n\n  /** First-segment match: `/household/members` keeps `/household` current. */\n  private matches(route: string): boolean {\n    const path = this.activePath();\n    const target = route.split(/[?#]/)[0] || '/';\n    if (target === '/') return path === '/';\n    const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n    return path === normalized || path.startsWith(`${normalized}/`);\n  }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n"],"mappings":"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"}

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

@@ -172,7 +172,7 @@ var DrawerComponent = class DrawerComponent {
 		outputs: { closed: "closed" },
 		host: { listeners: { "document:keydown": "onKeydown($event)" } },
 		ngImport: i0,
-		template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
+		template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
 		styles: ["@charset \"UTF-8\";.lc-drawer{position:fixed;inset:0;z-index:1100;pointer-events:none}.lc-drawer__overlay{position:absolute;inset:0;background:#0000;transition:background .25s ease;pointer-events:auto;cursor:pointer}.lc-drawer__overlay--visible{background:#00000073}.lc-drawer__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;background-color:var(--color-surface);background-image:var(--gradient-surface);box-shadow:var(--elevation-4);pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);max-width:90vw;overflow:hidden}.lc-drawer__panel--right{right:0;transform:translate(100%);border-left:1px solid var(--color-border-strong)}.lc-drawer__panel--left{left:0;transform:translate(-100%);border-right:1px solid var(--color-border-strong)}.lc-drawer__panel--open{transform:translate(0)}.lc-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-drawer__heading{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.lc-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-tertiary);cursor:pointer;transition:background .15s,color .15s}.lc-drawer__close:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-drawer__close:focus-visible{outline:2px solid var(--color-primary-500, #208497);outline-offset:2px}.lc-drawer__close--floating{position:absolute;top:.75rem;right:.75rem;z-index:1}.lc-drawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:640px){.lc-drawer__panel{max-width:100vw;width:100vw!important}}\n"],
 		dependencies: [
 			{
@@ -218,7 +218,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [A11yModule, IconComponent],
 			viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
+			template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
 			styles: ["@charset \"UTF-8\";.lc-drawer{position:fixed;inset:0;z-index:1100;pointer-events:none}.lc-drawer__overlay{position:absolute;inset:0;background:#0000;transition:background .25s ease;pointer-events:auto;cursor:pointer}.lc-drawer__overlay--visible{background:#00000073}.lc-drawer__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;background-color:var(--color-surface);background-image:var(--gradient-surface);box-shadow:var(--elevation-4);pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);max-width:90vw;overflow:hidden}.lc-drawer__panel--right{right:0;transform:translate(100%);border-left:1px solid var(--color-border-strong)}.lc-drawer__panel--left{left:0;transform:translate(-100%);border-right:1px solid var(--color-border-strong)}.lc-drawer__panel--open{transform:translate(0)}.lc-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-drawer__heading{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.lc-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-tertiary);cursor:pointer;transition:background .15s,color .15s}.lc-drawer__close:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-drawer__close:focus-visible{outline:2px solid var(--color-primary-500, #208497);outline-offset:2px}.lc-drawer__close--floating{position:absolute;top:.75rem;right:.75rem;z-index:1}.lc-drawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:640px){.lc-drawer__panel{max-width:100vw;width:100vw!important}}\n"]
 		}]
 	}],

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-drawer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.ts","../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  signal,\n  computed,\n  effect,\n  untracked,\n  inject,\n  HostListener,\n  OnDestroy,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type DrawerPosition = 'left' | 'right';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/** Duration of the slide-out transition (see drawer.component.scss). */\nconst CLOSE_ANIMATION_MS = 250;\n\n/**\n * Drawer component for slide-out overlay panels.\n *\n * Features:\n * - Slide-in from left or right\n * - Size presets (sm, md, lg, xl)\n * - Optional backdrop overlay with click-to-close\n * - Close on Escape key support\n * - Heading text display\n * - Content projection for arbitrary body content\n * - Accessible with ARIA dialog role, focus trap and focus restore\n *\n * @example\n * ```html\n * <lc-drawer [open]=\"showPanel\" position=\"right\" size=\"md\"\n *            heading=\"Settings\" (closed)=\"showPanel = false\">\n *   <p>Any content goes here</p>\n * </lc-drawer>\n * ```\n */\n@Component({\n  selector: 'lc-drawer',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n  templateUrl: './drawer.component.html',\n  styleUrl: './drawer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DrawerComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /** Whether the drawer is open. */\n  readonly open = input<boolean>(false);\n\n  /** Slide-in direction. */\n  readonly position = input<DrawerPosition>('right');\n\n  /** Predefined width (sm=320, md=400, lg=520, xl=640). */\n  readonly size = input<DrawerSize>('md');\n\n  /** Optional heading shown in the drawer header. */\n  readonly heading = input<string>('');\n\n  /** Whether the overlay backdrop is shown. */\n  readonly hasOverlay = input<boolean>(true);\n\n  /** Whether clicking the overlay closes the drawer. */\n  readonly closeOnOverlayClick = input<boolean>(true);\n\n  /** Whether pressing Escape closes the drawer. */\n  readonly closeOnEscape = input<boolean>(true);\n\n  /** ARIA label for assistive technology. */\n  readonly ariaLabel = input<string>('');\n\n  /** Accessible name of the close button. */\n  readonly closeAriaLabel = input('Close drawer');\n\n  /** Emitted when the drawer should close. */\n  readonly closed = output<void>();\n\n  /** Internal visibility — stays true during the slide-out animation. */\n  protected _visible = signal(false);\n\n  /** Width token → CSS. */\n  protected readonly widthValue = computed(() => {\n    const map: Record<DrawerSize, string> = {\n      sm: '320px',\n      md: '400px',\n      lg: '520px',\n      xl: '640px',\n    };\n    return map[this.size()];\n  });\n\n  protected readonly panelClasses = computed(() => {\n    const cls = ['lc-drawer__panel', `lc-drawer__panel--${this.position()}`];\n    if (this.open()) cls.push('lc-drawer__panel--open');\n    return cls.join(' ');\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly drawerId = `lc-drawer-${++DrawerComponent.nextId}`;\n  private closeTimer?: ReturnType<typeof setTimeout>;\n  private originalOverflow?: string;\n\n  constructor() {\n    effect(() => {\n      const isOpen = this.open();\n      untracked(() => {\n        if (isOpen) {\n          // Re-opening within the close animation must cancel the pending hide,\n          // otherwise the stale timer hides the drawer and unlocks scroll while\n          // `open()` is still true.\n          this.clearCloseTimer();\n          this._visible.set(true);\n          this.lockScroll();\n          this.overlayStack.push(this.drawerId);\n        } else if (this._visible()) {\n          this.overlayStack.remove(this.drawerId);\n          // Keep the panel mounted until the slide-out transition has finished\n          this.closeTimer = setTimeout(() => {\n            this.closeTimer = undefined;\n            this._visible.set(false);\n            this.unlockScroll();\n          }, CLOSE_ANIMATION_MS);\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    // Navigating away while open must not leave the page scroll-locked\n    this.clearCloseTimer();\n    this.overlayStack.remove(this.drawerId);\n    this.unlockScroll();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (menu, popover, …)\n   * sits above this drawer — the click belongs to that layer.\n   */\n  protected onOverlayClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    if (this.closeOnOverlayClick()) {\n      this.close();\n    }\n  }\n\n  /** Handle close action. */\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Escape closes the drawer only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.open()) return;\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.close();\n    }\n  }\n\n  private lockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow !== undefined) return;\n    this.originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  private unlockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow === undefined) return;\n    document.body.style.overflow = this.originalOverflow;\n    this.originalOverflow = undefined;\n  }\n\n  private clearCloseTimer(): void {\n    if (this.closeTimer !== undefined) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\n    }\n  }\n}\n","@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-drawer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.ts","../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  signal,\n  computed,\n  effect,\n  untracked,\n  inject,\n  HostListener,\n  OnDestroy,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type DrawerPosition = 'left' | 'right';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/** Duration of the slide-out transition (see drawer.component.scss). */\nconst CLOSE_ANIMATION_MS = 250;\n\n/**\n * Drawer component for slide-out overlay panels.\n *\n * Features:\n * - Slide-in from left or right\n * - Size presets (sm, md, lg, xl)\n * - Optional backdrop overlay with click-to-close\n * - Close on Escape key support\n * - Heading text display\n * - Content projection for arbitrary body content\n * - Accessible with ARIA dialog role, focus trap and focus restore\n *\n * @example\n * ```html\n * <lc-drawer [open]=\"showPanel\" position=\"right\" size=\"md\"\n *            heading=\"Settings\" (closed)=\"showPanel = false\">\n *   <p>Any content goes here</p>\n * </lc-drawer>\n * ```\n */\n@Component({\n  selector: 'lc-drawer',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n  templateUrl: './drawer.component.html',\n  styleUrl: './drawer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DrawerComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /** Whether the drawer is open. */\n  readonly open = input<boolean>(false);\n\n  /** Slide-in direction. */\n  readonly position = input<DrawerPosition>('right');\n\n  /** Predefined width (sm=320, md=400, lg=520, xl=640). */\n  readonly size = input<DrawerSize>('md');\n\n  /** Optional heading shown in the drawer header. */\n  readonly heading = input<string>('');\n\n  /** Whether the overlay backdrop is shown. */\n  readonly hasOverlay = input<boolean>(true);\n\n  /** Whether clicking the overlay closes the drawer. */\n  readonly closeOnOverlayClick = input<boolean>(true);\n\n  /** Whether pressing Escape closes the drawer. */\n  readonly closeOnEscape = input<boolean>(true);\n\n  /** ARIA label for assistive technology. */\n  readonly ariaLabel = input<string>('');\n\n  /** Accessible name of the close button. */\n  readonly closeAriaLabel = input('Close drawer');\n\n  /** Emitted when the drawer should close. */\n  readonly closed = output<void>();\n\n  /** Internal visibility — stays true during the slide-out animation. */\n  protected _visible = signal(false);\n\n  /** Width token → CSS. */\n  protected readonly widthValue = computed(() => {\n    const map: Record<DrawerSize, string> = {\n      sm: '320px',\n      md: '400px',\n      lg: '520px',\n      xl: '640px',\n    };\n    return map[this.size()];\n  });\n\n  protected readonly panelClasses = computed(() => {\n    const cls = ['lc-drawer__panel', `lc-drawer__panel--${this.position()}`];\n    if (this.open()) cls.push('lc-drawer__panel--open');\n    return cls.join(' ');\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly drawerId = `lc-drawer-${++DrawerComponent.nextId}`;\n  private closeTimer?: ReturnType<typeof setTimeout>;\n  private originalOverflow?: string;\n\n  constructor() {\n    effect(() => {\n      const isOpen = this.open();\n      untracked(() => {\n        if (isOpen) {\n          // Re-opening within the close animation must cancel the pending hide,\n          // otherwise the stale timer hides the drawer and unlocks scroll while\n          // `open()` is still true.\n          this.clearCloseTimer();\n          this._visible.set(true);\n          this.lockScroll();\n          this.overlayStack.push(this.drawerId);\n        } else if (this._visible()) {\n          this.overlayStack.remove(this.drawerId);\n          // Keep the panel mounted until the slide-out transition has finished\n          this.closeTimer = setTimeout(() => {\n            this.closeTimer = undefined;\n            this._visible.set(false);\n            this.unlockScroll();\n          }, CLOSE_ANIMATION_MS);\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    // Navigating away while open must not leave the page scroll-locked\n    this.clearCloseTimer();\n    this.overlayStack.remove(this.drawerId);\n    this.unlockScroll();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (menu, popover, …)\n   * sits above this drawer — the click belongs to that layer.\n   */\n  protected onOverlayClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    if (this.closeOnOverlayClick()) {\n      this.close();\n    }\n  }\n\n  /** Handle close action. */\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Escape closes the drawer only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.open()) return;\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.close();\n    }\n  }\n\n  private lockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow !== undefined) return;\n    this.originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  private unlockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow === undefined) return;\n    document.body.style.overflow = this.originalOverflow;\n    this.originalOverflow = undefined;\n  }\n\n  private clearCloseTimer(): void {\n    if (this.closeTimer !== undefined) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\n    }\n  }\n}\n","@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n"],"mappings":"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"}

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

@@ -210,7 +210,7 @@ var MenuComponent = class MenuComponent {
 		}],
 		ngImport: i0,
 		template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen()) {\n    <div\n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n      [style.min-width]=\"minWidth()\"\n      [style.max-width]=\"maxWidth() || null\"\n      [class.lc-menu__dropdown--capped]=\"!!maxWidth()\"\n    >\n      <!-- Optional header slot (outside the menu role: it is not an item) -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused menu items (roving tabindex) -->\n      <div\n        class=\"lc-menu__items\"\n        role=\"menu\"\n        [id]=\"panelId\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        @for (item of items(); track item.id; let i = $index) {\n          @if (item.href) {\n            <!-- Link item -->\n            <a\n              #menuItem\n              role=\"menuitem\"\n              [href]=\"item.href\"\n              [target]=\"item.target || '_self'\"\n              [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </a>\n          } @else {\n            <!-- Button item -->\n            <button\n              #menuItem\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </button>\n          }\n\n          @if (item.dividerAfter) {\n            <hr class=\"lc-menu__divider\" />\n          }\n        }\n      </div>\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n",
-		styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg, .5rem);box-shadow:var(--elevation-4);padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--capped{width:max-content}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-surface-hover)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-surface-hover)}.lc-menu__item--danger{color:var(--color-error)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:#9d0e0e24}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-divider)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"],
+		styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg, .5rem);box-shadow:var(--elevation-4);padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--capped{width:max-content}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-surface-hover)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-surface-hover)}.lc-menu__item--danger{color:var(--color-text-error)}.lc-menu__item--danger:hover:not(.lc-menu__item--disabled){background-color:var(--color-error-subtle)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-divider)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -241,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [IconComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen()) {\n    <div\n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n      [style.min-width]=\"minWidth()\"\n      [style.max-width]=\"maxWidth() || null\"\n      [class.lc-menu__dropdown--capped]=\"!!maxWidth()\"\n    >\n      <!-- Optional header slot (outside the menu role: it is not an item) -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused menu items (roving tabindex) -->\n      <div\n        class=\"lc-menu__items\"\n        role=\"menu\"\n        [id]=\"panelId\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        @for (item of items(); track item.id; let i = $index) {\n          @if (item.href) {\n            <!-- Link item -->\n            <a\n              #menuItem\n              role=\"menuitem\"\n              [href]=\"item.href\"\n              [target]=\"item.target || '_self'\"\n              [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </a>\n          } @else {\n            <!-- Button item -->\n            <button\n              #menuItem\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </button>\n          }\n\n          @if (item.dividerAfter) {\n            <hr class=\"lc-menu__divider\" />\n          }\n        }\n      </div>\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n",
-			styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg, .5rem);box-shadow:var(--elevation-4);padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--capped{width:max-content}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-surface-hover)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-surface-hover)}.lc-menu__item--danger{color:var(--color-error)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:#9d0e0e24}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-divider)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"]
+			styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg, .5rem);box-shadow:var(--elevation-4);padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--capped{width:max-content}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-surface-hover)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-surface-hover)}.lc-menu__item--danger{color:var(--color-text-error)}.lc-menu__item--danger:hover:not(.lc-menu__item--disabled){background-color:var(--color-error-subtle)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-divider)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-menu.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/menu/menu.component.ts","../../../../libs/angular-ui-kit/src/lib/menu/menu.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  signal,\n  effect,\n  untracked,\n  afterNextRender,\n  afterRenderEffect,\n  viewChildren,\n  ChangeDetectionStrategy,\n  HostListener,\n  ElementRef,\n  Injector,\n  Renderer2,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport interface MenuItem {\n  id: string;\n  label: string;\n  icon?: string;\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  href?: string;\n  target?: '_blank' | '_self' | '_parent' | '_top';\n  variant?: 'default' | 'danger';\n  dividerAfter?: boolean;\n  disabled?: boolean;\n  metadata?: {\n    subtitle?: string;\n    badge?: string;\n  };\n}\n\n/** Natively focusable elements a projected trigger may be or contain. */\nconst INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [tabindex]';\n\n/**\n * Menu Component - Dropdown menu for navigation and actions\n *\n * Features:\n * - Customizable menu items with icons\n * - Support for links and buttons\n * - Dividers between menu sections\n * - Optional subtitle/metadata for items\n * - Danger variant for destructive actions\n * - Click outside to close (top-most overlay only)\n * - Keyboard navigation: focus moves into the menu on open, Arrow keys /\n *   Home / End move between items (roving tabindex), Enter / Space activate,\n *   Escape closes and returns focus to the trigger, Tab closes\n * - ARIA menu semantics (`aria-haspopup` / `aria-expanded` / `aria-controls`\n *   on the projected trigger, `role=\"menu\"` / `role=\"menuitem\"` on the panel)\n * - OnPush change detection for performance\n *\n * @example\n * ```html\n * <lc-menu\n *   [items]=\"menuItems\"\n *   [isOpen]=\"isMenuOpen\"\n *   (itemClick)=\"handleMenuClick($event)\"\n *   (closed)=\"isMenuOpen = false\"\n * >\n *   <button trigger>Open Menu</button>\n *   <div header>User Profile</div>\n * </lc-menu>\n * ```\n */\n@Component({\n  selector: 'lc-menu',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrl: './menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements OnDestroy {\n  private static nextId = 0;\n  /** Identifies this instance in the overlay stack. */\n  private readonly menuId = `lc-menu-${++MenuComponent.nextId}`;\n\n  readonly items = input<MenuItem[]>([]);\n  readonly isOpen = input(false);\n  readonly position = input<'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>('bottom-right');\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n  readonly minWidth = input('220px');\n  /**\n   * Maximum width of the panel (any CSS width, e.g. `min(18rem, calc(100vw - 2rem))`).\n   * Empty leaves it unbounded. Long item labels and header lines wrap within it.\n   */\n  readonly maxWidth = input('');\n\n  readonly itemClick = output<MenuItem>();\n  readonly closed = output<void>();\n\n  /** Id of the `role=\"menu\"` element, referenced by the trigger's `aria-controls`. */\n  protected readonly panelId = `${this.menuId}-panel`;\n\n  /** Index (into `items()`) of the item that currently owns the roving tabindex. */\n  protected readonly activeIndex = signal(-1);\n\n  private readonly itemElements = viewChildren<ElementRef<HTMLElement>>('menuItem');\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly injector = inject(Injector);\n  private readonly overlayStack = inject(OverlayStackService);\n\n  constructor() {\n    // Whether the menu has been through its first open-state evaluation; a menu\n    // that is already open when it renders (demo pages) must not steal focus.\n    let initialized = false;\n    effect(() => {\n      const open = this.isOpen();\n      untracked(() => {\n        if (open) {\n          this.overlayStack.push(this.menuId);\n          this.activeIndex.set(this.firstEnabledIndex());\n          // Move focus into the menu once the panel has rendered\n          if (initialized) {\n            afterNextRender(() => this.focusActiveItem(), { injector: this.injector });\n          }\n        } else {\n          this.overlayStack.remove(this.menuId);\n          this.restoreFocus();\n          this.activeIndex.set(-1);\n        }\n        initialized = true;\n      });\n    });\n\n    // Mirror the open state onto the projected trigger so assistive tech knows\n    // it opens a menu (the trigger is caller-supplied, so we set the\n    // attributes rather than bind them).\n    afterRenderEffect(() => {\n      const open = this.isOpen();\n      const trigger = this.triggerElement();\n      if (!trigger) return;\n      this.renderer.setAttribute(trigger, 'aria-haspopup', 'menu');\n      this.renderer.setAttribute(trigger, 'aria-expanded', String(open));\n      if (open) {\n        this.renderer.setAttribute(trigger, 'aria-controls', this.panelId);\n      } else {\n        this.renderer.removeAttribute(trigger, 'aria-controls');\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.overlayStack.remove(this.menuId);\n  }\n\n  /**\n   * Handle menu item click\n   */\n  onItemClick(item: MenuItem, event: Event): void {\n    if (item.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Links navigate natively; button items only emit\n    if (!item.href) {\n      event.preventDefault();\n    }\n\n    this.itemClick.emit(item);\n  }\n\n  /**\n   * Close the menu\n   */\n  close(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle click outside to close menu — only while the menu is the top-most\n   * overlay, so a click inside a layer above it (a modal opened from a menu\n   * item) is left alone.\n   */\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.isOpen()) {\n      return;\n    }\n\n    const target = event.target;\n    if (target instanceof Node && this.elementRef.nativeElement.contains(target)) {\n      return;\n    }\n    if (!this.overlayStack.claim(this.menuId, event)) return;\n    this.close();\n  }\n\n  /**\n   * Escape closes the menu (top-most overlay only) and returns focus to the\n   * trigger; the event is consumed so overlays underneath stay open.\n   */\n  @HostListener('document:keydown.escape', ['$event'])\n  onEscapeKey(event: Event): void {\n    if (!this.isOpen()) return;\n    if (!this.overlayStack.claim(this.menuId, event)) return;\n    event.stopPropagation();\n    this.triggerElement()?.focus();\n    this.close();\n  }\n\n  /** Keyboard navigation inside the `role=\"menu\"` panel. */\n  protected onPanelKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(this.activeIndex(), 1));\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(this.activeIndex(), -1));\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusIndex(this.firstEnabledIndex());\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(0, -1));\n        break;\n      case ' ': {\n        // Buttons activate on Space natively, links only on Enter\n        const target = event.target as HTMLElement | null;\n        if (target?.matches('a[role=\"menuitem\"]')) {\n          event.preventDefault();\n          target.click();\n        }\n        break;\n      }\n      case 'Tab':\n        // Focus leaves the menu — let it move on naturally, but close the menu\n        this.close();\n        break;\n    }\n  }\n\n  /** Roving tabindex: only the active item is in the tab sequence. */\n  protected tabindexFor(index: number, item: MenuItem): number {\n    return !item.disabled && index === this.activeIndex() ? 0 : -1;\n  }\n\n  private focusIndex(index: number): void {\n    if (index < 0) return;\n    this.activeIndex.set(index);\n    this.focusActiveItem();\n  }\n\n  private focusActiveItem(): void {\n    this.itemElements()[this.activeIndex()]?.nativeElement.focus();\n  }\n\n  private firstEnabledIndex(): number {\n    return this.items().findIndex((item) => !item.disabled);\n  }\n\n  /** Index of the next enabled item in `direction`, wrapping around; -1 if none. */\n  private nextEnabledIndex(from: number, direction: 1 | -1): number {\n    const items = this.items();\n    for (let step = 1; step <= items.length; step++) {\n      const index = (from + direction * step + items.length) % items.length;\n      if (!items[index]?.disabled) return index;\n    }\n    return -1;\n  }\n\n  /**\n   * The element that carries the menu-button ARIA attributes and receives\n   * focus back: the projected `[trigger]` node itself when it is natively\n   * interactive, otherwise the first interactive element inside it (e.g. the\n   * `<button>` inside an `<lc-button trigger>`).\n   */\n  private triggerElement(): HTMLElement | null {\n    const slot = this.elementRef.nativeElement.querySelector<HTMLElement>('.lc-menu__trigger [trigger]');\n    if (!slot) return null;\n    return slot.matches(INTERACTIVE_SELECTOR)\n      ? slot\n      : (slot.querySelector<HTMLElement>(INTERACTIVE_SELECTOR) ?? slot);\n  }\n\n  /**\n   * Closing removes the panel from the DOM; if focus is inside it (an item was\n   * activated by keyboard) it would silently drop to `<body>`, so send it back\n   * to the trigger.\n   */\n  private restoreFocus(): void {\n    if (typeof document === 'undefined') return;\n    const panel = this.elementRef.nativeElement.querySelector<HTMLElement>('.lc-menu__dropdown');\n    if (panel?.contains(document.activeElement)) {\n      this.triggerElement()?.focus();\n    }\n  }\n}\n","<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen()) {\n    <div\n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n      [style.min-width]=\"minWidth()\"\n      [style.max-width]=\"maxWidth() || null\"\n      [class.lc-menu__dropdown--capped]=\"!!maxWidth()\"\n    >\n      <!-- Optional header slot (outside the menu role: it is not an item) -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused menu items (roving tabindex) -->\n      <div\n        class=\"lc-menu__items\"\n        role=\"menu\"\n        [id]=\"panelId\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        @for (item of items(); track item.id; let i = $index) {\n          @if (item.href) {\n            <!-- Link item -->\n            <a\n              #menuItem\n              role=\"menuitem\"\n              [href]=\"item.href\"\n              [target]=\"item.target || '_self'\"\n              [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </a>\n          } @else {\n            <!-- Button item -->\n            <button\n              #menuItem\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </button>\n          }\n\n          @if (item.dividerAfter) {\n            <hr class=\"lc-menu__divider\" />\n          }\n        }\n      </div>\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-menu.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/menu/menu.component.ts","../../../../libs/angular-ui-kit/src/lib/menu/menu.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  signal,\n  effect,\n  untracked,\n  afterNextRender,\n  afterRenderEffect,\n  viewChildren,\n  ChangeDetectionStrategy,\n  HostListener,\n  ElementRef,\n  Injector,\n  Renderer2,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport interface MenuItem {\n  id: string;\n  label: string;\n  icon?: string;\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  href?: string;\n  target?: '_blank' | '_self' | '_parent' | '_top';\n  variant?: 'default' | 'danger';\n  dividerAfter?: boolean;\n  disabled?: boolean;\n  metadata?: {\n    subtitle?: string;\n    badge?: string;\n  };\n}\n\n/** Natively focusable elements a projected trigger may be or contain. */\nconst INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [tabindex]';\n\n/**\n * Menu Component - Dropdown menu for navigation and actions\n *\n * Features:\n * - Customizable menu items with icons\n * - Support for links and buttons\n * - Dividers between menu sections\n * - Optional subtitle/metadata for items\n * - Danger variant for destructive actions\n * - Click outside to close (top-most overlay only)\n * - Keyboard navigation: focus moves into the menu on open, Arrow keys /\n *   Home / End move between items (roving tabindex), Enter / Space activate,\n *   Escape closes and returns focus to the trigger, Tab closes\n * - ARIA menu semantics (`aria-haspopup` / `aria-expanded` / `aria-controls`\n *   on the projected trigger, `role=\"menu\"` / `role=\"menuitem\"` on the panel)\n * - OnPush change detection for performance\n *\n * @example\n * ```html\n * <lc-menu\n *   [items]=\"menuItems\"\n *   [isOpen]=\"isMenuOpen\"\n *   (itemClick)=\"handleMenuClick($event)\"\n *   (closed)=\"isMenuOpen = false\"\n * >\n *   <button trigger>Open Menu</button>\n *   <div header>User Profile</div>\n * </lc-menu>\n * ```\n */\n@Component({\n  selector: 'lc-menu',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrl: './menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements OnDestroy {\n  private static nextId = 0;\n  /** Identifies this instance in the overlay stack. */\n  private readonly menuId = `lc-menu-${++MenuComponent.nextId}`;\n\n  readonly items = input<MenuItem[]>([]);\n  readonly isOpen = input(false);\n  readonly position = input<'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>('bottom-right');\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n  readonly minWidth = input('220px');\n  /**\n   * Maximum width of the panel (any CSS width, e.g. `min(18rem, calc(100vw - 2rem))`).\n   * Empty leaves it unbounded. Long item labels and header lines wrap within it.\n   */\n  readonly maxWidth = input('');\n\n  readonly itemClick = output<MenuItem>();\n  readonly closed = output<void>();\n\n  /** Id of the `role=\"menu\"` element, referenced by the trigger's `aria-controls`. */\n  protected readonly panelId = `${this.menuId}-panel`;\n\n  /** Index (into `items()`) of the item that currently owns the roving tabindex. */\n  protected readonly activeIndex = signal(-1);\n\n  private readonly itemElements = viewChildren<ElementRef<HTMLElement>>('menuItem');\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly injector = inject(Injector);\n  private readonly overlayStack = inject(OverlayStackService);\n\n  constructor() {\n    // Whether the menu has been through its first open-state evaluation; a menu\n    // that is already open when it renders (demo pages) must not steal focus.\n    let initialized = false;\n    effect(() => {\n      const open = this.isOpen();\n      untracked(() => {\n        if (open) {\n          this.overlayStack.push(this.menuId);\n          this.activeIndex.set(this.firstEnabledIndex());\n          // Move focus into the menu once the panel has rendered\n          if (initialized) {\n            afterNextRender(() => this.focusActiveItem(), { injector: this.injector });\n          }\n        } else {\n          this.overlayStack.remove(this.menuId);\n          this.restoreFocus();\n          this.activeIndex.set(-1);\n        }\n        initialized = true;\n      });\n    });\n\n    // Mirror the open state onto the projected trigger so assistive tech knows\n    // it opens a menu (the trigger is caller-supplied, so we set the\n    // attributes rather than bind them).\n    afterRenderEffect(() => {\n      const open = this.isOpen();\n      const trigger = this.triggerElement();\n      if (!trigger) return;\n      this.renderer.setAttribute(trigger, 'aria-haspopup', 'menu');\n      this.renderer.setAttribute(trigger, 'aria-expanded', String(open));\n      if (open) {\n        this.renderer.setAttribute(trigger, 'aria-controls', this.panelId);\n      } else {\n        this.renderer.removeAttribute(trigger, 'aria-controls');\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.overlayStack.remove(this.menuId);\n  }\n\n  /**\n   * Handle menu item click\n   */\n  onItemClick(item: MenuItem, event: Event): void {\n    if (item.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Links navigate natively; button items only emit\n    if (!item.href) {\n      event.preventDefault();\n    }\n\n    this.itemClick.emit(item);\n  }\n\n  /**\n   * Close the menu\n   */\n  close(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle click outside to close menu — only while the menu is the top-most\n   * overlay, so a click inside a layer above it (a modal opened from a menu\n   * item) is left alone.\n   */\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.isOpen()) {\n      return;\n    }\n\n    const target = event.target;\n    if (target instanceof Node && this.elementRef.nativeElement.contains(target)) {\n      return;\n    }\n    if (!this.overlayStack.claim(this.menuId, event)) return;\n    this.close();\n  }\n\n  /**\n   * Escape closes the menu (top-most overlay only) and returns focus to the\n   * trigger; the event is consumed so overlays underneath stay open.\n   */\n  @HostListener('document:keydown.escape', ['$event'])\n  onEscapeKey(event: Event): void {\n    if (!this.isOpen()) return;\n    if (!this.overlayStack.claim(this.menuId, event)) return;\n    event.stopPropagation();\n    this.triggerElement()?.focus();\n    this.close();\n  }\n\n  /** Keyboard navigation inside the `role=\"menu\"` panel. */\n  protected onPanelKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(this.activeIndex(), 1));\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(this.activeIndex(), -1));\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusIndex(this.firstEnabledIndex());\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusIndex(this.nextEnabledIndex(0, -1));\n        break;\n      case ' ': {\n        // Buttons activate on Space natively, links only on Enter\n        const target = event.target as HTMLElement | null;\n        if (target?.matches('a[role=\"menuitem\"]')) {\n          event.preventDefault();\n          target.click();\n        }\n        break;\n      }\n      case 'Tab':\n        // Focus leaves the menu — let it move on naturally, but close the menu\n        this.close();\n        break;\n    }\n  }\n\n  /** Roving tabindex: only the active item is in the tab sequence. */\n  protected tabindexFor(index: number, item: MenuItem): number {\n    return !item.disabled && index === this.activeIndex() ? 0 : -1;\n  }\n\n  private focusIndex(index: number): void {\n    if (index < 0) return;\n    this.activeIndex.set(index);\n    this.focusActiveItem();\n  }\n\n  private focusActiveItem(): void {\n    this.itemElements()[this.activeIndex()]?.nativeElement.focus();\n  }\n\n  private firstEnabledIndex(): number {\n    return this.items().findIndex((item) => !item.disabled);\n  }\n\n  /** Index of the next enabled item in `direction`, wrapping around; -1 if none. */\n  private nextEnabledIndex(from: number, direction: 1 | -1): number {\n    const items = this.items();\n    for (let step = 1; step <= items.length; step++) {\n      const index = (from + direction * step + items.length) % items.length;\n      if (!items[index]?.disabled) return index;\n    }\n    return -1;\n  }\n\n  /**\n   * The element that carries the menu-button ARIA attributes and receives\n   * focus back: the projected `[trigger]` node itself when it is natively\n   * interactive, otherwise the first interactive element inside it (e.g. the\n   * `<button>` inside an `<lc-button trigger>`).\n   */\n  private triggerElement(): HTMLElement | null {\n    const slot = this.elementRef.nativeElement.querySelector<HTMLElement>('.lc-menu__trigger [trigger]');\n    if (!slot) return null;\n    return slot.matches(INTERACTIVE_SELECTOR)\n      ? slot\n      : (slot.querySelector<HTMLElement>(INTERACTIVE_SELECTOR) ?? slot);\n  }\n\n  /**\n   * Closing removes the panel from the DOM; if focus is inside it (an item was\n   * activated by keyboard) it would silently drop to `<body>`, so send it back\n   * to the trigger.\n   */\n  private restoreFocus(): void {\n    if (typeof document === 'undefined') return;\n    const panel = this.elementRef.nativeElement.querySelector<HTMLElement>('.lc-menu__dropdown');\n    if (panel?.contains(document.activeElement)) {\n      this.triggerElement()?.focus();\n    }\n  }\n}\n","<div class=\"lc-menu\">\n  <!-- Trigger slot -->\n  <div class=\"lc-menu__trigger\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n\n  <!-- Dropdown menu -->\n  @if (isOpen()) {\n    <div\n      class=\"lc-menu__dropdown\"\n      [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n      [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n      [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n      [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n      [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n      [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n      [style.min-width]=\"minWidth()\"\n      [style.max-width]=\"maxWidth() || null\"\n      [class.lc-menu__dropdown--capped]=\"!!maxWidth()\"\n    >\n      <!-- Optional header slot (outside the menu role: it is not an item) -->\n      <ng-content select=\"[header]\" />\n\n      <!-- Menu items -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused menu items (roving tabindex) -->\n      <div\n        class=\"lc-menu__items\"\n        role=\"menu\"\n        [id]=\"panelId\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        @for (item of items(); track item.id; let i = $index) {\n          @if (item.href) {\n            <!-- Link item -->\n            <a\n              #menuItem\n              role=\"menuitem\"\n              [href]=\"item.href\"\n              [target]=\"item.target || '_self'\"\n              [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </a>\n          } @else {\n            <!-- Button item -->\n            <button\n              #menuItem\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"lc-menu__item\"\n              [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n              [class.lc-menu__item--disabled]=\"item.disabled\"\n              [attr.tabindex]=\"tabindexFor(i, item)\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onItemClick(item, $event)\"\n            >\n              @if (item.icon) {\n                <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" [decorative]=\"true\" />\n              }\n              <span class=\"lc-menu__item-content\">\n                <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n                @if (item.metadata?.subtitle; as subtitle) {\n                  <span class=\"lc-menu__item-subtitle\">{{ subtitle }}</span>\n                }\n              </span>\n              @if (item.metadata?.badge; as badge) {\n                <span class=\"lc-menu__item-badge\">{{ badge }}</span>\n              }\n            </button>\n          }\n\n          @if (item.dividerAfter) {\n            <hr class=\"lc-menu__divider\" />\n          }\n        }\n      </div>\n\n      <!-- Optional footer slot -->\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -171,7 +171,7 @@ var ModalComponent = class ModalComponent {
 		},
 		host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } },
 		ngImport: i0,
-		template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
+		template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
 		styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"],
 		dependencies: [
 			{
@@ -219,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({
 			viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
+			template: "@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n",
 			styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"]
 		}]
 	}],

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-modal.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/modal/modal.component.ts","../../../../libs/angular-ui-kit/src/lib/modal/modal.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  computed,\n  effect,\n  linkedSignal,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Where the dialog sits.\n * - `center`: centred on every screen (3.2)\n * - `auto`: a bottom sheet below 640 px viewport width (full width, top\n *   corners rounded, above the safe-area inset, in thumb reach), centred above\n * - `sheet`: a bottom sheet on every screen\n */\nexport type ModalPlacement = 'center' | 'auto' | 'sheet';\n\n/**\n * Modal dialog component for focused user interactions.\n *\n * Features:\n * - Size presets (sm, md, lg, xl, full)\n * - Placement: centred, or a bottom sheet on phones (`placement=\"auto\"`)\n * - Header and footer stay visible while the body scrolls; the close button\n *   is a 44 px target\n * - Focus trap for keyboard accessibility\n * - Backdrop click and Escape key to close\n * - Two-way open binding\n * - Header, body, and footer content slots\n * - Optional close button\n * - Accessible with ARIA dialog role\n *\n * @example\n * ```html\n * <lc-modal [(open)]=\"isOpen\" size=\"md\" [closeOnBackdropClick]=\"true\">\n *   <div slot=\"header\"><h2>Title</h2></div>\n *   <div slot=\"body\">Content</div>\n *   <div slot=\"footer\"><lc-button (click)=\"close()\">Close</lc-button></div>\n * </lc-modal>\n * ```\n */\n@Component({\n  selector: 'lc-modal',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None, // Required for dynamic size class styling\n})\nexport class ModalComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /**\n   * Whether the modal is open (input from parent)\n   * @default false\n   */\n  open = input<boolean>(false);\n\n  /**\n   * Modal size\n   * @default 'md'\n   */\n  size = input<ModalSize>('md');\n\n  /**\n   * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below\n   * 640 px viewport width and centred above — or `sheet` (always a bottom\n   * sheet). The sheet spans the width, rounds its top corners, keeps clear of\n   * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport\n   * high; header and footer stay visible while the body scrolls. `full`\n   * size ignores it.\n   * @default 'center'\n   */\n  placement = input<ModalPlacement>('center');\n\n  /**\n   * Whether clicking backdrop closes modal\n   * @default true\n   */\n  closeOnBackdropClick = input<boolean>(true);\n\n  /**\n   * Whether pressing Escape closes modal\n   * @default true\n   */\n  closeOnEscape = input<boolean>(true);\n\n  /**\n   * Whether to show close button in header\n   * @default true\n   */\n  showCloseButton = input<boolean>(true);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /**\n   * ARIA labelledby ID\n   */\n  ariaLabelledBy = input<string>();\n\n  /**\n   * ARIA describedby ID\n   */\n  ariaDescribedBy = input<string>();\n\n  /** Accessible name of the close button (`showCloseButton`). */\n  closeAriaLabel = input('Close modal');\n\n  /**\n   * Emitted when modal opens\n   */\n  readonly modalOpened = output<void>();\n\n  /**\n   * Emitted when modal closes\n   */\n  readonly modalClosed = output<void>();\n\n  /**\n   * Two-way binding for open state\n   */\n  readonly openChange = output<boolean>();\n\n  /**\n   * Emitted when backdrop is clicked\n   */\n  readonly backdropClicked = output<MouseEvent>();\n\n  /**\n   * Internal open state (protected for AOT); follows the `open` input and is\n   * also set by the programmatic open/close methods.\n   */\n  protected _open = linkedSignal(() => this.open());\n\n  /**\n   * Computed modal classes\n   */\n  protected modalClasses = computed(() => {\n    return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly modalId = `lc-modal-${++ModalComponent.nextId}`;\n  private originalOverflow?: string;\n\n  constructor() {\n    // Watch for open state changes\n    effect(() => {\n      if (this._open()) {\n        this.showModal();\n      } else {\n        this.hideModal();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.hideModal();\n  }\n\n  /**\n   * Open the modal programmatically\n   */\n  openModal(): void {\n    this._open.set(true);\n    this.openChange.emit(true);\n    this.modalOpened.emit();\n  }\n\n  /**\n   * Close the modal programmatically\n   */\n  closeModal(): void {\n    this._open.set(false);\n    this.openChange.emit(false);\n    this.modalClosed.emit();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (popover, menu,\n   * confirm dialog, …) sits above this modal — the click belongs to that layer.\n   */\n  protected onBackdropClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    this.backdropClicked.emit(event);\n    if (this.closeOnBackdropClick()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeModal();\n  }\n\n  /**\n   * Escape closes the modal only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onDocumentKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this._open()) return;\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Show the modal. Focus is moved inside and restored on close by the\n   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.\n   */\n  private showModal(): void {\n    this.overlayStack.push(this.modalId);\n\n    // Lock body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow === undefined) {\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  /**\n   * Hide the modal\n   */\n  private hideModal(): void {\n    this.overlayStack.remove(this.modalId);\n\n    // Restore body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow !== undefined) {\n      document.body.style.overflow = this.originalOverflow;\n      this.originalOverflow = undefined;\n    }\n  }\n}\n","@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-modal.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/modal/modal.component.ts","../../../../libs/angular-ui-kit/src/lib/modal/modal.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  computed,\n  effect,\n  linkedSignal,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Where the dialog sits.\n * - `center`: centred on every screen (3.2)\n * - `auto`: a bottom sheet below 640 px viewport width (full width, top\n *   corners rounded, above the safe-area inset, in thumb reach), centred above\n * - `sheet`: a bottom sheet on every screen\n */\nexport type ModalPlacement = 'center' | 'auto' | 'sheet';\n\n/**\n * Modal dialog component for focused user interactions.\n *\n * Features:\n * - Size presets (sm, md, lg, xl, full)\n * - Placement: centred, or a bottom sheet on phones (`placement=\"auto\"`)\n * - Header and footer stay visible while the body scrolls; the close button\n *   is a 44 px target\n * - Focus trap for keyboard accessibility\n * - Backdrop click and Escape key to close\n * - Two-way open binding\n * - Header, body, and footer content slots\n * - Optional close button\n * - Accessible with ARIA dialog role\n *\n * @example\n * ```html\n * <lc-modal [(open)]=\"isOpen\" size=\"md\" [closeOnBackdropClick]=\"true\">\n *   <div slot=\"header\"><h2>Title</h2></div>\n *   <div slot=\"body\">Content</div>\n *   <div slot=\"footer\"><lc-button (click)=\"close()\">Close</lc-button></div>\n * </lc-modal>\n * ```\n */\n@Component({\n  selector: 'lc-modal',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None, // Required for dynamic size class styling\n})\nexport class ModalComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /**\n   * Whether the modal is open (input from parent)\n   * @default false\n   */\n  open = input<boolean>(false);\n\n  /**\n   * Modal size\n   * @default 'md'\n   */\n  size = input<ModalSize>('md');\n\n  /**\n   * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below\n   * 640 px viewport width and centred above — or `sheet` (always a bottom\n   * sheet). The sheet spans the width, rounds its top corners, keeps clear of\n   * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport\n   * high; header and footer stay visible while the body scrolls. `full`\n   * size ignores it.\n   * @default 'center'\n   */\n  placement = input<ModalPlacement>('center');\n\n  /**\n   * Whether clicking backdrop closes modal\n   * @default true\n   */\n  closeOnBackdropClick = input<boolean>(true);\n\n  /**\n   * Whether pressing Escape closes modal\n   * @default true\n   */\n  closeOnEscape = input<boolean>(true);\n\n  /**\n   * Whether to show close button in header\n   * @default true\n   */\n  showCloseButton = input<boolean>(true);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /**\n   * ARIA labelledby ID\n   */\n  ariaLabelledBy = input<string>();\n\n  /**\n   * ARIA describedby ID\n   */\n  ariaDescribedBy = input<string>();\n\n  /** Accessible name of the close button (`showCloseButton`). */\n  closeAriaLabel = input('Close modal');\n\n  /**\n   * Emitted when modal opens\n   */\n  readonly modalOpened = output<void>();\n\n  /**\n   * Emitted when modal closes\n   */\n  readonly modalClosed = output<void>();\n\n  /**\n   * Two-way binding for open state\n   */\n  readonly openChange = output<boolean>();\n\n  /**\n   * Emitted when backdrop is clicked\n   */\n  readonly backdropClicked = output<MouseEvent>();\n\n  /**\n   * Internal open state (protected for AOT); follows the `open` input and is\n   * also set by the programmatic open/close methods.\n   */\n  protected _open = linkedSignal(() => this.open());\n\n  /**\n   * Computed modal classes\n   */\n  protected modalClasses = computed(() => {\n    return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly modalId = `lc-modal-${++ModalComponent.nextId}`;\n  private originalOverflow?: string;\n\n  constructor() {\n    // Watch for open state changes\n    effect(() => {\n      if (this._open()) {\n        this.showModal();\n      } else {\n        this.hideModal();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.hideModal();\n  }\n\n  /**\n   * Open the modal programmatically\n   */\n  openModal(): void {\n    this._open.set(true);\n    this.openChange.emit(true);\n    this.modalOpened.emit();\n  }\n\n  /**\n   * Close the modal programmatically\n   */\n  closeModal(): void {\n    this._open.set(false);\n    this.openChange.emit(false);\n    this.modalClosed.emit();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (popover, menu,\n   * confirm dialog, …) sits above this modal — the click belongs to that layer.\n   */\n  protected onBackdropClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    this.backdropClicked.emit(event);\n    if (this.closeOnBackdropClick()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeModal();\n  }\n\n  /**\n   * Escape closes the modal only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onDocumentKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this._open()) return;\n    if (!this.overlayStack.claim(this.modalId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.closeModal();\n    }\n  }\n\n  /**\n   * Show the modal. Focus is moved inside and restored on close by the\n   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.\n   */\n  private showModal(): void {\n    this.overlayStack.push(this.modalId);\n\n    // Lock body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow === undefined) {\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  /**\n   * Hide the modal\n   */\n  private hideModal(): void {\n    this.overlayStack.remove(this.modalId);\n\n    // Restore body scroll\n    if (typeof document !== 'undefined' && this.originalOverflow !== undefined) {\n      document.body.style.overflow = this.originalOverflow;\n      this.originalOverflow = undefined;\n    }\n  }\n}\n","@if (_open()) {\n  <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n       `cdk-overlay-backdrop` class here — it would be styled by global CDK\n       rules and, vice versa, leak modal styling onto other overlays.) -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n  <div\n    class=\"lc-modal-backdrop\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    [class]=\"modalClasses()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"lc-modal__header\">\n      <ng-content select=\"[slot='header']\" />\n      \n      @if (showCloseButton()) {\n        <button\n          type=\"button\"\n          class=\"lc-modal__close\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n          (click)=\"onCloseClick($event)\"\n        >\n          <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n        </button>\n      }\n    </div>\n    \n    <div class=\"lc-modal__body\">\n      <ng-content select=\"[slot='body']\" />\n      <ng-content />\n    </div>\n    \n    <div class=\"lc-modal__footer\">\n      <ng-content select=\"[slot='footer']\" />\n    </div>\n  </div>\n}\n"],"mappings":"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"}