@lifecorner/angular-ui-kit 3.14.0 → 3.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  computed,\n  contentChild,\n  output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /** Whether the item is selected / highlighted */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  computed,\n  contentChild,\n  output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /** Whether the item is selected / highlighted */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":";;;;;AAqBA,IAAa,4BAAb,MAAa,0BAAyB;CACpB,WAAW,OAAO,WAAoC;CAD3D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,UAAA;CAAA,CAAA;;AAAzB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAJrC,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,YAAY;EACb,CAAA;;;ACoFD,IAAa,gBAAb,MAAa,cAAa;CAEf,eAAe,aAAa,2BAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG/D,QAAQ,MAAkB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,cAAc,MAAuB,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGhD,UAAU,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,OAAO,MAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,eAAe,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAOpC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,mBAAmB,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAMvC,gBAAgB,MAAqB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,aAAa,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,YAAY,OAAM;CAGlB,cAAc,OAAM;CAK7B,cAAc,eAAc;EAC1B,MAAM,UAAU,CAAC,SAAS;EAE1B,QAAQ,KAAK,YAAY,KAAK,YAAW,GAAI;EAC7C,QAAQ,KAAK,YAAY,KAAK,QAAO,GAAI;EACzC,QAAQ,KAAK,YAAY,KAAK,KAAI,GAAI;EAEtC,IAAI,KAAK,aAAY,GACnB,QAAQ,KAAK,wBAAwB;EAGvC,IAAI,KAAK,UAAS,GAChB,QAAQ,KAAK,oBAAoB;EAGnC,IAAI,CAAC,KAAK,iBAAgB,GACxB,QAAQ,KAAK,mBAAmB;EAGlC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,eAAe,MAAc;EAC3B,MAAM,UAAU,CAAC,eAAe;EAEhC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,OAAO,QAAQ,KAAK,GAAG;CACzB;CAGU,cAAc,MAAc;EACpC,MAAM,QAAQ,KAAK;EACnB,OAAO,SAAS,UAAU,YACtB,4DAA4D,UAC5D;CACN;CAKA,YAAY,MAAc;EACxB,IAAI,CAAC,KAAK,UACR,KAAK,UAAU,KAAK,IAAI;CAE5B;CAMA,cAAc,OAAsB,MAAc;EAChD,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,YAAY,IAAI;EACvB;CACF;CAKA,cAAc,MAAc;EAC1B,KAAK,YAAY,KAAK,IAAI;CAC5B;CAhIW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,aAAA;EAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAEa;GAAyB,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC1GhE;EAuFA,QAAA,CAAA,upMAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDYY;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK/C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,YACP;GAAI,SACP;IAAC;IAAkB;IAAe;GAAe;GAAC,iBAG1C,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,upMAAA;EAAA,CAAA;CAIV,CAAA;CAAA,gBAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,yBAAyB,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,kBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,eAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs

@@ -206,6 +206,7 @@ var NextStepCardComponent = class NextStepCardComponent {
 			selector: "lc-button",
 			inputs: [
 				"variant",
+				"tone",
 				"size",
 				"disabled",
 				"loading",

package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-next-step-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.ts","../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.html"],"sourcesContent":["import {\n  AfterViewChecked,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  input,\n  isDevMode,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK, ICON_INFORMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport type NextStepCardTone = 'neutral' | 'primary' | 'success' | 'warning' | 'info';\n\n/**\n * Appearance of the card.\n * - `default`: white surface, hairline border, 4 px tonal rail, 36 px tinted bubble\n * - `soft`: tinted fill per tone, radius 24 px (28 px from 1024 px), no rail,\n *   border or shadow, a larger white bubble with a 1 px ring (the \"Weite\" look)\n */\nexport type NextStepCardVariant = 'default' | 'soft';\n\n/**\n * How several actions are laid out.\n * - `inline`: side by side at the end of the card; below 480 px card width in\n *   their own row, stretched\n * - `stacked`: always in their own row, one per line at equal width, 8 px apart\n */\nexport type NextStepCardActionsLayout = 'inline' | 'stacked';\n\n/** Element that renders the title (semantics only, the look stays the same). */\nexport type NextStepCardTitleTag = 'div' | 'h2' | 'h3';\n\n/** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */\nexport type NextStepCardActionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Next-step card — the single status-and-action surface of a page: \"where does\n * this stand, and what is the one next step?\".\n *\n * Features:\n * - Tonal accent rail (4px left) + tinted icon bubble, token colors only\n * - Title, message (string input or default slot for markup)\n * - Primary action (with loading / disabled + mandatory disabled reason),\n *   ghost secondary action, or an external link instead of the primary button\n * - `[slot='blockers']`: rows inside the card under a subtle divider (dot\n *   prefix); each projected element with `slot=\"blockers\"` becomes one row —\n *   blockers are rows IN the card, never additional banners\n * - `[slot='meta']`: one footer line (icon + text)\n * - `[slot='actions']`: fully replaces the built-in action buttons\n * - `[slot='body']`: content below the message without the message's text\n *   styles, so form fields, lists or a description list keep their own look\n * - `role=\"region\"` labelled by the title; optional polite live announcement\n *   of title changes via `announce`\n * - Narrow layout: below 480 px of card width (a CSS container query on the\n *   host) the icon sits beside the title, message, body, blockers and meta\n *   take the full inner width, the inline padding drops to `padding-md`, and\n *   the actions take their own row with every action stretched. A projected\n *   `fullWidth` button gets its own row at every width.\n * - `variant=\"soft\"`: the tinted card of the \"Weite\" look; `actionsLayout`\n *   `stacked` for several equal-width actions; `titleTag` for a heading\n *\n * The host is a size container (`container-type: inline-size`) and takes the\n * full inline size of its parent.\n *\n * Usage rule: exactly ONE next-step card per page.\n *\n * @example\n * ```html\n * <lc-next-step-card\n *   tone=\"warning\"\n *   icon=\"clock\"\n *   cardTitle=\"Wartet auf Freigabe\"\n *   message=\"Der Entwurf ist vollständig und kann geprüft werden.\"\n *   primaryLabel=\"Freigeben\"\n *   secondaryLabel=\"Änderungen anfordern\"\n *   (primaryClick)=\"approve()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-next-step-card',\n  standalone: true,\n  imports: [ButtonComponent, IconComponent],\n  // Its default `icon` and the action glyphs.\n  viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK])],\n  templateUrl: './next-step-card.component.html',\n  styleUrls: ['./next-step-card.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NextStepCardComponent implements AfterViewChecked {\n  /**\n   * Tone of the accent rail and icon bubble. Colors come exclusively from the\n   * semantic tokens (`--color-*` rail, `--color-*-subtle` bubble tint,\n   * `--color-on-*-subtle` icon ink).\n   * @default 'neutral'\n   */\n  tone = input<NextStepCardTone>('neutral');\n\n  /**\n   * Appearance: `default` (surface, border, 4 px rail) or `soft` (tinted fill\n   * per tone, radius 24 px / 28 px from 1024 px, no rail, border or shadow,\n   * a 48 px white bubble with a 1 px ring; 56 px from 1024 px, 60 px from\n   * 1440 px). Soft fills come from `--color-next-step-soft-neutral` /\n   * `--color-next-step-soft-primary` and the tone's `-subtle` token; the bubble\n   * from `--color-bubble`, `--color-bubble-ring`, `--color-bubble-icon`.\n   * @default 'default'\n   */\n  variant = input<NextStepCardVariant>('default');\n\n  /** Icon name for the round bubble (36 px; 48–60 px in the soft variant). */\n  icon = input<string>('information-circle');\n\n  /** Title (1rem semibold; 20–28 px bold in the soft variant). Also the card's accessible name. */\n  cardTitle = input.required<string>();\n\n  /**\n   * Element that renders the title: `div` (default), `h2` or `h3`. Use a\n   * heading when the page has sections, so heading navigation reaches the\n   * most important item. Semantics only, the look stays the same.\n   * @default 'div'\n   */\n  titleTag = input<NextStepCardTitleTag>('div');\n\n  /**\n   * Layout of several actions. `inline`: side by side at the end of the card\n   * (below 480 px card width in their own row, stretched). `stacked`: always\n   * in their own row, one per line at equal width, 8 px apart (e.g. a list of\n   * sign-in methods).\n   * @default 'inline'\n   */\n  actionsLayout = input<NextStepCardActionsLayout>('inline');\n\n  /**\n   * Size of the built-in action buttons and link: `sm` (32 px, the 3.2\n   * default), `md` (42 px) or `lg` (48.5 px, meets the 44 px touch target).\n   * @default 'sm'\n   */\n  actionSize = input<NextStepCardActionSize>('sm');\n\n  /** Message below the title. For markup, use the default slot instead. */\n  message = input<string>();\n\n  /** Label of the primary action. Omit to render no primary button. */\n  primaryLabel = input<string>();\n\n  /** Optional leading icon of the primary action. */\n  primaryIcon = input<string>();\n\n  /** Shows a spinner on the primary action. */\n  primaryLoading = input<boolean>(false);\n\n  /**\n   * Disables the primary action. A disabled primary REQUIRES\n   * `primaryDisabledReason`; disabled without a reason logs a dev warning.\n   */\n  primaryDisabled = input<boolean>(false);\n\n  /** Why the primary action is disabled — shown as tooltip on the button. */\n  primaryDisabledReason = input<string>('');\n\n  /** Label of the ghost secondary action (rendered with a chevron). */\n  secondaryLabel = input<string>();\n\n  /**\n   * Label of an external link rendered instead of the primary button\n   * (opens in a new tab). Requires `linkHref`.\n   */\n  linkLabel = input<string>();\n\n  /** Target URL of the external link. */\n  linkHref = input<string>();\n\n  /**\n   * Where the link opens: `_blank` (a new tab, with `rel=\"noopener noreferrer\"`,\n   * the 3.2 behaviour) or `_self` (the same tab, no `rel`).\n   * @default '_blank'\n   */\n  linkTarget = input<'_blank' | '_self'>('_blank');\n\n  /**\n   * Announce title changes to screen readers via `aria-live=\"polite\"` —\n   * for cards whose state advances in place.\n   * @default false\n   */\n  announce = input<boolean>(false);\n\n  /** Emits when the primary action is clicked. */\n  primaryClick = output<void>();\n\n  /** Emits when the secondary action is clicked. */\n  secondaryClick = output<void>();\n\n  private actionsSlot = viewChild<ElementRef<HTMLElement>>('actionsSlot');\n\n  /**\n   * Whether content was projected into `[slot='actions']` — projected actions\n   * fully replace the built-in buttons.\n   */\n  protected hasProjectedActions = signal(false);\n\n  protected cardClasses = computed(() =>\n    [\n      'lc-next-step-card',\n      `lc-next-step-card--${this.tone()}`,\n      this.variant() === 'soft' ? 'lc-next-step-card--soft' : null,\n      this.actionsLayout() === 'stacked' ? 'lc-next-step-card--actions-stacked' : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  /** `rel` of the external link: only a new tab needs `noopener noreferrer`. */\n  protected linkRel = computed(() => (this.linkTarget() === '_blank' ? 'noopener noreferrer' : null));\n\n  protected showLink = computed(() => !!(this.linkLabel() && this.linkHref()));\n\n  /**\n   * Whether the card renders any action: hides the empty actions box, so the\n   * narrow layout gets no empty row.\n   */\n  protected hasActions = computed(\n    () =>\n      this.hasProjectedActions() ||\n      !!this.secondaryLabel() ||\n      this.showLink() ||\n      !!this.primaryLabel(),\n  );\n\n  constructor() {\n    effect(() => {\n      if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) {\n        console.warn(\n          '[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. ' +\n            'A disabled primary action must explain why (shown as tooltip).',\n        );\n      }\n    });\n  }\n\n  ngAfterViewChecked(): void {\n    // Projected [slot='actions'] content replaces the built-in buttons. The\n    // signal write is equality-guarded, so unchanged checks are no-ops.\n    const el = this.actionsSlot()?.nativeElement;\n    this.hasProjectedActions.set(!!el && el.childElementCount > 0);\n  }\n}\n","<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n  <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n    <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n\n  <div class=\"lc-next-step-card__body\">\n    @switch (titleTag()) {\n      @case ('h2') {\n        <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h3>\n      }\n      @default {\n        <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </div>\n      }\n    }\n    @if (message()) {\n      <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n    }\n    <div class=\"lc-next-step-card__custom-message\">\n      <ng-content />\n    </div>\n    <!-- Form-safe body: no inherited message text styles. -->\n    <div class=\"lc-next-step-card__content\">\n      <ng-content select=\"[slot='body']\" />\n    </div>\n    <div class=\"lc-next-step-card__blockers\">\n      <ng-content select=\"[slot='blockers']\" />\n    </div>\n    <div class=\"lc-next-step-card__meta\">\n      <ng-content select=\"[slot='meta']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n    <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n    @if (!hasProjectedActions()) {\n      @if (secondaryLabel()) {\n        <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n          <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n        </lc-button>\n      }\n      @if (showLink()) {\n        <a\n          class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n          [href]=\"linkHref()\"\n          [attr.target]=\"linkTarget()\"\n          [attr.rel]=\"linkRel()\"\n        >\n          <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n          {{ linkLabel() }}\n        </a>\n      } @else if (primaryLabel()) {\n        <lc-button\n          variant=\"primary\"\n          [size]=\"actionSize()\"\n          [loading]=\"primaryLoading()\"\n          [disabled]=\"primaryDisabled()\"\n          [disabledReason]=\"primaryDisabledReason()\"\n          (clicked)=\"primaryClick.emit()\"\n        >\n          @if (primaryIcon()) {\n            <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n          }\n          {{ primaryLabel() }}\n        </lc-button>\n      }\n    }\n  </div>\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-next-step-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.ts","../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.html"],"sourcesContent":["import {\n  AfterViewChecked,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  input,\n  isDevMode,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK, ICON_INFORMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport type NextStepCardTone = 'neutral' | 'primary' | 'success' | 'warning' | 'info';\n\n/**\n * Appearance of the card.\n * - `default`: white surface, hairline border, 4 px tonal rail, 36 px tinted bubble\n * - `soft`: tinted fill per tone, radius 24 px (28 px from 1024 px), no rail,\n *   border or shadow, a larger white bubble with a 1 px ring (the \"Weite\" look)\n */\nexport type NextStepCardVariant = 'default' | 'soft';\n\n/**\n * How several actions are laid out.\n * - `inline`: side by side at the end of the card; below 480 px card width in\n *   their own row, stretched\n * - `stacked`: always in their own row, one per line at equal width, 8 px apart\n */\nexport type NextStepCardActionsLayout = 'inline' | 'stacked';\n\n/** Element that renders the title (semantics only, the look stays the same). */\nexport type NextStepCardTitleTag = 'div' | 'h2' | 'h3';\n\n/** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */\nexport type NextStepCardActionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Next-step card — the single status-and-action surface of a page: \"where does\n * this stand, and what is the one next step?\".\n *\n * Features:\n * - Tonal accent rail (4px left) + tinted icon bubble, token colors only\n * - Title, message (string input or default slot for markup)\n * - Primary action (with loading / disabled + mandatory disabled reason),\n *   ghost secondary action, or an external link instead of the primary button\n * - `[slot='blockers']`: rows inside the card under a subtle divider (dot\n *   prefix); each projected element with `slot=\"blockers\"` becomes one row —\n *   blockers are rows IN the card, never additional banners\n * - `[slot='meta']`: one footer line (icon + text)\n * - `[slot='actions']`: fully replaces the built-in action buttons\n * - `[slot='body']`: content below the message without the message's text\n *   styles, so form fields, lists or a description list keep their own look\n * - `role=\"region\"` labelled by the title; optional polite live announcement\n *   of title changes via `announce`\n * - Narrow layout: below 480 px of card width (a CSS container query on the\n *   host) the icon sits beside the title, message, body, blockers and meta\n *   take the full inner width, the inline padding drops to `padding-md`, and\n *   the actions take their own row with every action stretched. A projected\n *   `fullWidth` button gets its own row at every width.\n * - `variant=\"soft\"`: the tinted card of the \"Weite\" look; `actionsLayout`\n *   `stacked` for several equal-width actions; `titleTag` for a heading\n *\n * The host is a size container (`container-type: inline-size`) and takes the\n * full inline size of its parent.\n *\n * Usage rule: exactly ONE next-step card per page.\n *\n * @example\n * ```html\n * <lc-next-step-card\n *   tone=\"warning\"\n *   icon=\"clock\"\n *   cardTitle=\"Wartet auf Freigabe\"\n *   message=\"Der Entwurf ist vollständig und kann geprüft werden.\"\n *   primaryLabel=\"Freigeben\"\n *   secondaryLabel=\"Änderungen anfordern\"\n *   (primaryClick)=\"approve()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-next-step-card',\n  standalone: true,\n  imports: [ButtonComponent, IconComponent],\n  // Its default `icon` and the action glyphs.\n  viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK])],\n  templateUrl: './next-step-card.component.html',\n  styleUrls: ['./next-step-card.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NextStepCardComponent implements AfterViewChecked {\n  /**\n   * Tone of the accent rail and icon bubble. Colors come exclusively from the\n   * semantic tokens (`--color-*` rail, `--color-*-subtle` bubble tint,\n   * `--color-on-*-subtle` icon ink).\n   * @default 'neutral'\n   */\n  tone = input<NextStepCardTone>('neutral');\n\n  /**\n   * Appearance: `default` (surface, border, 4 px rail) or `soft` (tinted fill\n   * per tone, radius 24 px / 28 px from 1024 px, no rail, border or shadow,\n   * a 48 px white bubble with a 1 px ring; 56 px from 1024 px, 60 px from\n   * 1440 px). Soft fills come from `--color-next-step-soft-neutral` /\n   * `--color-next-step-soft-primary` and the tone's `-subtle` token; the bubble\n   * from `--color-bubble`, `--color-bubble-ring`, `--color-bubble-icon`.\n   * @default 'default'\n   */\n  variant = input<NextStepCardVariant>('default');\n\n  /** Icon name for the round bubble (36 px; 48–60 px in the soft variant). */\n  icon = input<string>('information-circle');\n\n  /** Title (1rem semibold; 20–28 px bold in the soft variant). Also the card's accessible name. */\n  cardTitle = input.required<string>();\n\n  /**\n   * Element that renders the title: `div` (default), `h2` or `h3`. Use a\n   * heading when the page has sections, so heading navigation reaches the\n   * most important item. Semantics only, the look stays the same.\n   * @default 'div'\n   */\n  titleTag = input<NextStepCardTitleTag>('div');\n\n  /**\n   * Layout of several actions. `inline`: side by side at the end of the card\n   * (below 480 px card width in their own row, stretched). `stacked`: always\n   * in their own row, one per line at equal width, 8 px apart (e.g. a list of\n   * sign-in methods).\n   * @default 'inline'\n   */\n  actionsLayout = input<NextStepCardActionsLayout>('inline');\n\n  /**\n   * Size of the built-in action buttons and link: `sm` (32 px, the 3.2\n   * default), `md` (42 px) or `lg` (48.5 px, meets the 44 px touch target).\n   * @default 'sm'\n   */\n  actionSize = input<NextStepCardActionSize>('sm');\n\n  /** Message below the title. For markup, use the default slot instead. */\n  message = input<string>();\n\n  /** Label of the primary action. Omit to render no primary button. */\n  primaryLabel = input<string>();\n\n  /** Optional leading icon of the primary action. */\n  primaryIcon = input<string>();\n\n  /** Shows a spinner on the primary action. */\n  primaryLoading = input<boolean>(false);\n\n  /**\n   * Disables the primary action. A disabled primary REQUIRES\n   * `primaryDisabledReason`; disabled without a reason logs a dev warning.\n   */\n  primaryDisabled = input<boolean>(false);\n\n  /** Why the primary action is disabled — shown as tooltip on the button. */\n  primaryDisabledReason = input<string>('');\n\n  /** Label of the ghost secondary action (rendered with a chevron). */\n  secondaryLabel = input<string>();\n\n  /**\n   * Label of an external link rendered instead of the primary button\n   * (opens in a new tab). Requires `linkHref`.\n   */\n  linkLabel = input<string>();\n\n  /** Target URL of the external link. */\n  linkHref = input<string>();\n\n  /**\n   * Where the link opens: `_blank` (a new tab, with `rel=\"noopener noreferrer\"`,\n   * the 3.2 behaviour) or `_self` (the same tab, no `rel`).\n   * @default '_blank'\n   */\n  linkTarget = input<'_blank' | '_self'>('_blank');\n\n  /**\n   * Announce title changes to screen readers via `aria-live=\"polite\"` —\n   * for cards whose state advances in place.\n   * @default false\n   */\n  announce = input<boolean>(false);\n\n  /** Emits when the primary action is clicked. */\n  primaryClick = output<void>();\n\n  /** Emits when the secondary action is clicked. */\n  secondaryClick = output<void>();\n\n  private actionsSlot = viewChild<ElementRef<HTMLElement>>('actionsSlot');\n\n  /**\n   * Whether content was projected into `[slot='actions']` — projected actions\n   * fully replace the built-in buttons.\n   */\n  protected hasProjectedActions = signal(false);\n\n  protected cardClasses = computed(() =>\n    [\n      'lc-next-step-card',\n      `lc-next-step-card--${this.tone()}`,\n      this.variant() === 'soft' ? 'lc-next-step-card--soft' : null,\n      this.actionsLayout() === 'stacked' ? 'lc-next-step-card--actions-stacked' : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  /** `rel` of the external link: only a new tab needs `noopener noreferrer`. */\n  protected linkRel = computed(() => (this.linkTarget() === '_blank' ? 'noopener noreferrer' : null));\n\n  protected showLink = computed(() => !!(this.linkLabel() && this.linkHref()));\n\n  /**\n   * Whether the card renders any action: hides the empty actions box, so the\n   * narrow layout gets no empty row.\n   */\n  protected hasActions = computed(\n    () =>\n      this.hasProjectedActions() ||\n      !!this.secondaryLabel() ||\n      this.showLink() ||\n      !!this.primaryLabel(),\n  );\n\n  constructor() {\n    effect(() => {\n      if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) {\n        console.warn(\n          '[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. ' +\n            'A disabled primary action must explain why (shown as tooltip).',\n        );\n      }\n    });\n  }\n\n  ngAfterViewChecked(): void {\n    // Projected [slot='actions'] content replaces the built-in buttons. The\n    // signal write is equality-guarded, so unchanged checks are no-ops.\n    const el = this.actionsSlot()?.nativeElement;\n    this.hasProjectedActions.set(!!el && el.childElementCount > 0);\n  }\n}\n","<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n  <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n    <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n\n  <div class=\"lc-next-step-card__body\">\n    @switch (titleTag()) {\n      @case ('h2') {\n        <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h3>\n      }\n      @default {\n        <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </div>\n      }\n    }\n    @if (message()) {\n      <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n    }\n    <div class=\"lc-next-step-card__custom-message\">\n      <ng-content />\n    </div>\n    <!-- Form-safe body: no inherited message text styles. -->\n    <div class=\"lc-next-step-card__content\">\n      <ng-content select=\"[slot='body']\" />\n    </div>\n    <div class=\"lc-next-step-card__blockers\">\n      <ng-content select=\"[slot='blockers']\" />\n    </div>\n    <div class=\"lc-next-step-card__meta\">\n      <ng-content select=\"[slot='meta']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n    <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n    @if (!hasProjectedActions()) {\n      @if (secondaryLabel()) {\n        <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n          <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n        </lc-button>\n      }\n      @if (showLink()) {\n        <a\n          class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n          [href]=\"linkHref()\"\n          [attr.target]=\"linkTarget()\"\n          [attr.rel]=\"linkRel()\"\n        >\n          <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n          {{ linkLabel() }}\n        </a>\n      } @else if (primaryLabel()) {\n        <lc-button\n          variant=\"primary\"\n          [size]=\"actionSize()\"\n          [loading]=\"primaryLoading()\"\n          [disabled]=\"primaryDisabled()\"\n          [disabledReason]=\"primaryDisabledReason()\"\n          (clicked)=\"primaryClick.emit()\"\n        >\n          @if (primaryIcon()) {\n            <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n          }\n          {{ primaryLabel() }}\n        </lc-button>\n      }\n    }\n  </div>\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs

@@ -14,6 +14,7 @@ var PageHeaderComponent = class PageHeaderComponent {
 	showDivider = input(false, ...ngDevMode ? [{ debugName: "showDivider" }] : /* istanbul ignore next */ []);
 	badge = input(void 0, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
 	noPaddingX = input(false, ...ngDevMode ? [{ debugName: "noPaddingX" }] : /* istanbul ignore next */ []);
+	paddingTop = input("default", ...ngDevMode ? [{ debugName: "paddingTop" }] : /* istanbul ignore next */ []);
 	titleClasses = computed(() => {
 		return ["lc-page-header__title", {
 			title: "lc-title",
@@ -26,7 +27,8 @@ var PageHeaderComponent = class PageHeaderComponent {
 		`lc-page-header--size-${this.size()}`,
 		this.showDivider() ? "lc-page-header--divided" : null,
 		this.overline() ? "lc-page-header--has-overline" : null,
-		this.noPaddingX() ? "lc-page-header--flush-x" : null
+		this.noPaddingX() ? "lc-page-header--flush-x" : null,
+		this.paddingTop() !== "default" ? `lc-page-header--pad-top-${this.paddingTop()}` : null
 	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -119,12 +121,19 @@ var PageHeaderComponent = class PageHeaderComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			paddingTop: {
+				classPropertyName: "paddingTop",
+				publicName: "paddingTop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: { properties: { "class": "hostClasses()" } },
 		ngImport: i0,
 		template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n",
-		styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:anywhere}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto;max-width:100%;--lc-btn-overflow-wrap: anywhere}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"],
+		styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header.lc-page-header--pad-top-none{padding-top:0}.lc-page-header.lc-page-header--pad-top-sm{padding-top:var(--spacing-2, .5rem)}.lc-page-header.lc-page-header--pad-top-md{padding-top:var(--spacing-4, 1rem)}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:anywhere}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto;max-width:100%;--lc-btn-overflow-wrap: anywhere}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -167,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			host: { "[class]": "hostClasses()" },
 			template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n",
-			styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:anywhere}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto;max-width:100%;--lc-btn-overflow-wrap: anywhere}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"]
+			styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header.lc-page-header--pad-top-none{padding-top:0}.lc-page-header.lc-page-header--pad-top-sm{padding-top:var(--spacing-2, .5rem)}.lc-page-header.lc-page-header--pad-top-md{padding-top:var(--spacing-4, 1rem)}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:anywhere}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto;max-width:100%;--lc-btn-overflow-wrap: anywhere}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -258,6 +267,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "noPaddingX",
 				required: false
 			}]
+		}],
+		paddingTop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paddingTop",
+				required: false
+			}]
 		}]
 	}
 });

package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-page-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.ts","../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Visual size of the page header.\n * - `compact`     — dense data-tool pages and section headings (18 px)\n * - `secondary`   — a second title under the page's main one, e.g. the other\n *                   language of a bilingual page (20 px, `--font-size-xl`;\n *                   the `compact` spacing; 3.9, AS-25)\n * - `default`     — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title`       — the \"Weite\" page title: 32 px on phones, 40 / 44 / 48 px\n *                   from 1024 / 1440 / 1920 px (`--font-size-title`)\n * - `display`     — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px\n *                   from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)\n * - `auth`        — the sign-in and registration `<h1>`: 30 px, 34 px from\n *                   1024 px (`--font-size-auth-title`)\n */\nexport type PageHeaderSize = 'compact' | 'secondary' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';\n\n/**\n * Page header — top-of-page title block with optional subtitle,\n * breadcrumbs, badge, description and an actions area.\n *\n * Density-aware, slot-based, no Tailwind. Drop it at the top of any route\n * to get consistent rhythm between title, metadata and content below.\n *\n * Slots:\n *  - `[slot=\"breadcrumbs\"]`   — rendered above the title (e.g. `<lc-breadcrumbs>`)\n *  - `[slot=\"title-suffix\"]`  — inline beside the title, after the optional `badge`\n *                               (for one or more status chips/badges)\n *  - `[slot=\"actions\"]`       — right-aligned actions (buttons, menus)\n *  - `[slot=\"meta\"]`          — secondary metadata under the title row (chips, tags)\n *  - default                  — short header-internal description text\n *\n * `overline` renders a short uppercase label (a date, a section) **above** the\n * title but **after** it in the DOM, so a screen reader that lands on the\n * heading reads the title first and the overline next.\n *\n * Full-blown navigation primitives like `lc-tabs` — which render both the tab\n * strip **and** their panel content — belong **below** the page header, never\n * inside it. The header stays focused on page identity.\n *\n * @example\n * ```html\n * <lc-page-header\n *   title=\"Reports\"\n *   subtitle=\"Compare period-over-period metrics\"\n *   [showDivider]=\"true\"\n * >\n *   <lc-breadcrumbs slot=\"breadcrumbs\" [items]=\"crumbs\" />\n *   <lc-chip slot=\"title-suffix\" size=\"sm\">Beta</lc-chip>\n *   <lc-chip slot=\"title-suffix\" size=\"sm\" variant=\"success\">Ready</lc-chip>\n *   <lc-button slot=\"actions\" variant=\"primary\">New report</lc-button>\n *   <lc-chip slot=\"meta\">12 active</lc-chip>\n * </lc-page-header>\n * ```\n */\n@Component({\n  selector: 'lc-page-header',\n  standalone: true,\n  imports: [IconComponent, NgTemplateOutlet],\n  templateUrl: './page-header.component.html',\n  styleUrl: './page-header.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class PageHeaderComponent {\n  /** Main heading text. */\n  title = input<string | undefined>(undefined);\n\n  /**\n   * Optional leading icon (Tabler icon name) rendered as a brand tile to the\n   * left of the title block, mirroring `lc-card`'s header icon. Purely additive.\n   */\n  icon = input<string | undefined>(undefined);\n\n  /**\n   * Visual treatment of the leading icon tile.\n   * - brand: gradient teal tile with light ink (default)\n   * - subtle: translucent surface tile with brand-teal ink\n   * @default 'brand'\n   */\n  iconVariant = input<'brand' | 'subtle'>('brand');\n\n  /**\n   * Size of the leading icon tile.\n   * @default 'md'\n   */\n  iconSize = input<'sm' | 'md'>('md');\n\n  /** Short supporting line below the title. */\n  subtitle = input<string | undefined>(undefined);\n\n  /**\n   * Short label shown above the title (e.g. the date on a daily view, a\n   * section name): uppercase through CSS (write it in sentence case), bold,\n   * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /\n   * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the\n   * DOM, so the heading is read first.\n   */\n  overline = input<string | undefined>(undefined);\n\n  /**\n   * Heading level for the title — affects semantics, not size.\n   * @default 1\n   */\n  level = input<1 | 2 | 3>(1);\n\n  /**\n   * Visual size of the page header.\n   * - `compact`     — dense data-tool pages and section headings (18 px)\n   * - `secondary`   — a second title under the main one, e.g. the other\n   *                   language of a bilingual page (20 px, compact spacing)\n   * - `default`     — standard app pages (24 px)\n   * - `comfortable` — landing-page hero feel (30 px)\n   * - `title`       — page title on the responsive title scale, 32–48 px\n   * - `display`     — the display greeting, 40–72 px, weight 700\n   * - `auth`        — the sign-in and registration `<h1>`, 30 / 34 px\n   * @default 'default'\n   */\n  size = input<PageHeaderSize>('default');\n\n  /**\n   * Whether to render a divider line below the header.\n   * @default false\n   */\n  showDivider = input<boolean>(false);\n\n  /** Optional badge text next to the title (e.g. `Beta`). */\n  badge = input<string | undefined>(undefined);\n\n  /**\n   * Remove the header's own horizontal padding so its content sits flush with\n   * the container edge. Use when the header is already inside a padded wrapper\n   * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,\n   * when shown, always spans the full width regardless of this setting.\n   * @default false\n   */\n  noPaddingX = input<boolean>(false);\n\n  /**\n   * Classes of the heading: the global type-scale class (`lc-title`,\n   * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.\n   */\n  protected titleClasses = computed(() => {\n    const scale: Partial<Record<PageHeaderSize, string>> = {\n      title: 'lc-title',\n      display: 'lc-display',\n      auth: 'lc-auth-title',\n    };\n    return ['lc-page-header__title', scale[this.size()]].filter(Boolean).join(' ');\n  });\n\n  protected hostClasses = computed(() =>\n    [\n      'lc-page-header',\n      `lc-page-header--size-${this.size()}`,\n      this.showDivider() ? 'lc-page-header--divided' : null,\n      this.overline() ? 'lc-page-header--has-overline' : null,\n      this.noPaddingX() ? 'lc-page-header--flush-x' : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n}\n","@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-page-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.ts","../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Visual size of the page header.\n * - `compact`     — dense data-tool pages and section headings (18 px)\n * - `secondary`   — a second title under the page's main one, e.g. the other\n *                   language of a bilingual page (20 px, `--font-size-xl`;\n *                   the `compact` spacing; 3.9, AS-25)\n * - `default`     — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title`       — the \"Weite\" page title: 32 px on phones, 40 / 44 / 48 px\n *                   from 1024 / 1440 / 1920 px (`--font-size-title`)\n * - `display`     — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px\n *                   from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)\n * - `auth`        — the sign-in and registration `<h1>`: 30 px, 34 px from\n *                   1024 px (`--font-size-auth-title`)\n */\nexport type PageHeaderSize = 'compact' | 'secondary' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';\n\n/**\n * Space above the page header's content (3.15).\n * - `default` — the size's block padding (24 px; `comfortable` 40, `compact`\n *               and `secondary` 12)\n * - `none` 0 · `sm` 8 px · `md` 16 px\n */\nexport type PageHeaderPaddingTop = 'default' | 'none' | 'sm' | 'md';\n\n/**\n * Page header — top-of-page title block with optional subtitle,\n * breadcrumbs, badge, description and an actions area.\n *\n * Density-aware, slot-based, no Tailwind. Drop it at the top of any route\n * to get consistent rhythm between title, metadata and content below.\n *\n * Slots:\n *  - `[slot=\"breadcrumbs\"]`   — rendered above the title (e.g. `<lc-breadcrumbs>`)\n *  - `[slot=\"title-suffix\"]`  — inline beside the title, after the optional `badge`\n *                               (for one or more status chips/badges)\n *  - `[slot=\"actions\"]`       — right-aligned actions (buttons, menus)\n *  - `[slot=\"meta\"]`          — secondary metadata under the title row (chips, tags)\n *  - default                  — short header-internal description text\n *\n * `overline` renders a short uppercase label (a date, a section) **above** the\n * title but **after** it in the DOM, so a screen reader that lands on the\n * heading reads the title first and the overline next.\n *\n * Full-blown navigation primitives like `lc-tabs` — which render both the tab\n * strip **and** their panel content — belong **below** the page header, never\n * inside it. The header stays focused on page identity.\n *\n * @example\n * ```html\n * <lc-page-header\n *   title=\"Reports\"\n *   subtitle=\"Compare period-over-period metrics\"\n *   [showDivider]=\"true\"\n * >\n *   <lc-breadcrumbs slot=\"breadcrumbs\" [items]=\"crumbs\" />\n *   <lc-chip slot=\"title-suffix\" size=\"sm\">Beta</lc-chip>\n *   <lc-chip slot=\"title-suffix\" size=\"sm\" variant=\"success\">Ready</lc-chip>\n *   <lc-button slot=\"actions\" variant=\"primary\">New report</lc-button>\n *   <lc-chip slot=\"meta\">12 active</lc-chip>\n * </lc-page-header>\n * ```\n */\n@Component({\n  selector: 'lc-page-header',\n  standalone: true,\n  imports: [IconComponent, NgTemplateOutlet],\n  templateUrl: './page-header.component.html',\n  styleUrl: './page-header.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class PageHeaderComponent {\n  /** Main heading text. */\n  title = input<string | undefined>(undefined);\n\n  /**\n   * Optional leading icon (Tabler icon name) rendered as a brand tile to the\n   * left of the title block, mirroring `lc-card`'s header icon. Purely additive.\n   */\n  icon = input<string | undefined>(undefined);\n\n  /**\n   * Visual treatment of the leading icon tile.\n   * - brand: gradient teal tile with light ink (default)\n   * - subtle: translucent surface tile with brand-teal ink\n   * @default 'brand'\n   */\n  iconVariant = input<'brand' | 'subtle'>('brand');\n\n  /**\n   * Size of the leading icon tile.\n   * @default 'md'\n   */\n  iconSize = input<'sm' | 'md'>('md');\n\n  /** Short supporting line below the title. */\n  subtitle = input<string | undefined>(undefined);\n\n  /**\n   * Short label shown above the title (e.g. the date on a daily view, a\n   * section name): uppercase through CSS (write it in sentence case), bold,\n   * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /\n   * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the\n   * DOM, so the heading is read first.\n   */\n  overline = input<string | undefined>(undefined);\n\n  /**\n   * Heading level for the title — affects semantics, not size.\n   * @default 1\n   */\n  level = input<1 | 2 | 3>(1);\n\n  /**\n   * Visual size of the page header.\n   * - `compact`     — dense data-tool pages and section headings (18 px)\n   * - `secondary`   — a second title under the main one, e.g. the other\n   *                   language of a bilingual page (20 px, compact spacing)\n   * - `default`     — standard app pages (24 px)\n   * - `comfortable` — landing-page hero feel (30 px)\n   * - `title`       — page title on the responsive title scale, 32–48 px\n   * - `display`     — the display greeting, 40–72 px, weight 700\n   * - `auth`        — the sign-in and registration `<h1>`, 30 / 34 px\n   * @default 'default'\n   */\n  size = input<PageHeaderSize>('default');\n\n  /**\n   * Whether to render a divider line below the header.\n   * @default false\n   */\n  showDivider = input<boolean>(false);\n\n  /** Optional badge text next to the title (e.g. `Beta`). */\n  badge = input<string | undefined>(undefined);\n\n  /**\n   * Remove the header's own horizontal padding so its content sits flush with\n   * the container edge. Use when the header is already inside a padded wrapper\n   * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,\n   * when shown, always spans the full width regardless of this setting.\n   * @default false\n   */\n  noPaddingX = input<boolean>(false);\n\n  /**\n   * Space above the header content. `'default'`: the size's block padding\n   * (24, comfortable 40, compact/secondary 12). `'none'` 0, `'sm'` 8 px,\n   * `'md'` 16 px. The bottom padding is unchanged. Use `'none'` with\n   * `lc-app-page` `paddingTop=\"md\"` to put the `h1` 16 px below `lc-header`.\n   * @default 'default'\n   */\n  paddingTop = input<PageHeaderPaddingTop>('default');\n\n  /**\n   * Classes of the heading: the global type-scale class (`lc-title`,\n   * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.\n   */\n  protected titleClasses = computed(() => {\n    const scale: Partial<Record<PageHeaderSize, string>> = {\n      title: 'lc-title',\n      display: 'lc-display',\n      auth: 'lc-auth-title',\n    };\n    return ['lc-page-header__title', scale[this.size()]].filter(Boolean).join(' ');\n  });\n\n  protected hostClasses = computed(() =>\n    [\n      'lc-page-header',\n      `lc-page-header--size-${this.size()}`,\n      this.showDivider() ? 'lc-page-header--divided' : null,\n      this.overline() ? 'lc-page-header--has-overline' : null,\n      this.noPaddingX() ? 'lc-page-header--flush-x' : null,\n      this.paddingTop() !== 'default' ? `lc-page-header--pad-top-${this.paddingTop()}` : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n}\n","@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-sidenav-placeholder.mjs

@@ -152,7 +152,7 @@ var SidenavPlaceholderComponent = class SidenavPlaceholderComponent {
 		},
 		ngImport: i0,
 		template: "<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n",
-		styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--lc-sidenav-bg: var(--_lc-sidenav-t-bg, var(--color-sidebar, var(--color-surface)));--lc-sidenav-fg: var(--_lc-sidenav-t-fg, var(--color-text-secondary));--lc-sidenav-border: var(--_lc-sidenav-t-border, var(--color-border));--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, #e5e7eb)}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-label{flex:1}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-border: #e5e7eb}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"],
+		styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--_lc-sidenav-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-border: var(--color-border);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg));display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border, #e5e7eb))}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-label{flex:1}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-border: #e5e7eb}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg)) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({
 				inert: ""
 			},
 			template: "<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n",
-			styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--lc-sidenav-bg: var(--_lc-sidenav-t-bg, var(--color-sidebar, var(--color-surface)));--lc-sidenav-fg: var(--_lc-sidenav-t-fg, var(--color-text-secondary));--lc-sidenav-border: var(--_lc-sidenav-t-border, var(--color-border));--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, #e5e7eb)}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-label{flex:1}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-border: #e5e7eb}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"]
+			styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--_lc-sidenav-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-border: var(--color-border);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg));display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border, #e5e7eb))}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-label{flex:1}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-border: #e5e7eb}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg)) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

package/fesm2022/lifecorner-angular-ui-kit-sidenav-placeholder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-sidenav-placeholder.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport type { NavigationItem } from '@lifecorner/angular-ui-kit/models';\n// Types only: a value import would load lc-sidenav eagerly (AS-18).\nimport type { SidenavPosition, SidenavVariant } from '@lifecorner/angular-ui-kit/sidenav';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\n\n/** Label bar widths, cycled per row (design 002 §3). */\nconst LABEL_WIDTHS = ['64%', '48%', '72%', '56%'] as const;\n\n/**\n * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert\n * skeleton of the rail with exactly the sidenav's boxes — the same container,\n * width, logo block, rows, sections and expanded groups, built from the same\n * classes and the same box rules — so swapping it for the sidenav moves\n * nothing (CLS 0). Give it the sidenav's bindings.\n *\n * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app\n * shell the navigation column is hidden below 1024 px, so on a phone the\n * trigger never fires and the sidenav's JavaScript never loads:\n *\n * @example\n * ```html\n * <div shell-nav>\n *   @defer (on viewport) {\n *     <lc-sidenav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *                 variant=\"transparent\" ariaLabel=\"Hauptnavigation\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   } @placeholder {\n *     <lc-sidenav-placeholder [isOpen]=\"true\" width=\"100%\" variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   }\n * </div>\n * ```\n * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use\n * it only inside the `@defer` block; any other use of it in the same\n * component makes Angular load it eagerly. With a percentage `width`, give\n * the block a container of definite width (the app shell's column is one):\n * in a shrink-to-fit container the sidenav's width follows its label text.\n *\n * Accessibility: the whole placeholder is `aria-hidden=\"true\"` and `inert` —\n * no landmark, no tab stop, nothing announced, so focus can never be inside\n * it when it is swapped. The navigation landmark, the current item\n * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no\n * shimmer. The skeleton shapes are filled with\n * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on\n * `lc-sidenav` (set them on an ancestor of both).\n */\n@Component({\n  selector: 'lc-sidenav-placeholder',\n  standalone: true,\n  templateUrl: './sidenav-placeholder.component.html',\n  styleUrl: './sidenav-placeholder.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-sidenav-container lc-sidenav-container--docked',\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n    // The theme's values sit on the host, as on lc-sidenav (019).\n    '[class.lc-sidenav-container--light]': \"theme() === 'light'\",\n    '[class.lc-sidenav-container--dark]': \"theme() === 'dark'\",\n    'aria-hidden': 'true',\n    inert: '',\n  },\n})\nexport class SidenavPlaceholderComponent {\n  private readonly router = inject(Router, { optional: true });\n  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */\n  private readonly routerUrl = signal(this.router?.url ?? '/');\n\n  /**\n   * Navigation items, the same value as on `lc-sidenav`: they give the number\n   * of rows, the sections and the groups that start expanded.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route, as on `lc-sidenav`. It decides which group starts\n   * expanded; when empty, the router's URL does (3.5 rules).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /**\n   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).\n   * @default false\n   */\n  readonly collapsed = input(false);\n\n  /**\n   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.\n   * @default false\n   */\n  readonly isOpen = input(false);\n\n  /**\n   * Width of the rail, as on `lc-sidenav`.\n   * @default '320px'\n   */\n  readonly width = input('320px');\n\n  /**\n   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the\n   * side navigation on the page, 48 px pills).\n   * @default 'default'\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /**\n   * Theme, as on `lc-sidenav`.\n   * @default 'auto'\n   */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Position, as on `lc-sidenav`.\n   * @default 'left'\n   */\n  readonly position = input<SidenavPosition>('left');\n\n  /**\n   * Reserves the logo block, as `showLogo` on `lc-sidenav`.\n   * @default false\n   */\n  readonly showLogo = input(false);\n\n  /**\n   * Height of the logo block, as on `lc-sidenav`.\n   * @default 'md'\n   */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** The items in display order. @internal */\n  protected readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */\n  private readonly expanded = computed(() => {\n    const active = this.activeRoute();\n    const path = active === '' && this.router ? navigationPath(this.router, this.routerUrl()) : '';\n    const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);\n    return new Set(currentItemParents(this.items(), current));\n  });\n\n  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */\n  protected readonly railClasses = computed(() => {\n    const classes = ['lc-sidenav', `lc-sidenav--${this.position()}`, 'lc-sidenav--docked'];\n    if (this.isOpen()) classes.push('lc-sidenav--open');\n    if (this.collapsed()) classes.push('lc-sidenav--collapsed');\n    if (this.theme() !== 'auto') classes.push(`lc-sidenav--${this.theme()}`);\n    if (this.variant() === 'transparent') classes.push('lc-sidenav--transparent');\n    return classes.join(' ');\n  });\n\n  /** The rail's width, as `lc-sidenav` sets it. @internal */\n  protected readonly railWidth = computed(() => (this.collapsed() ? '56px' : this.width()));\n\n  constructor() {\n    this.router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router?.url ?? '/'));\n  }\n\n  /** Whether a group starts expanded. @internal */\n  protected isExpanded(item: NavigationItem): boolean {\n    return this.expanded().has(item.id);\n  }\n\n  /** The label bar's width for the row at `index`. @internal */\n  protected labelWidth(index: number): string {\n    return LABEL_WIDTHS[index % LABEL_WIDTHS.length];\n  }\n}\n","<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-sidenav-placeholder.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport type { NavigationItem } from '@lifecorner/angular-ui-kit/models';\n// Types only: a value import would load lc-sidenav eagerly (AS-18).\nimport type { SidenavPosition, SidenavVariant } from '@lifecorner/angular-ui-kit/sidenav';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\n\n/** Label bar widths, cycled per row (design 002 §3). */\nconst LABEL_WIDTHS = ['64%', '48%', '72%', '56%'] as const;\n\n/**\n * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert\n * skeleton of the rail with exactly the sidenav's boxes — the same container,\n * width, logo block, rows, sections and expanded groups, built from the same\n * classes and the same box rules — so swapping it for the sidenav moves\n * nothing (CLS 0). Give it the sidenav's bindings.\n *\n * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app\n * shell the navigation column is hidden below 1024 px, so on a phone the\n * trigger never fires and the sidenav's JavaScript never loads:\n *\n * @example\n * ```html\n * <div shell-nav>\n *   @defer (on viewport) {\n *     <lc-sidenav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *                 variant=\"transparent\" ariaLabel=\"Hauptnavigation\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   } @placeholder {\n *     <lc-sidenav-placeholder [isOpen]=\"true\" width=\"100%\" variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   }\n * </div>\n * ```\n * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use\n * it only inside the `@defer` block; any other use of it in the same\n * component makes Angular load it eagerly. With a percentage `width`, give\n * the block a container of definite width (the app shell's column is one):\n * in a shrink-to-fit container the sidenav's width follows its label text.\n *\n * Accessibility: the whole placeholder is `aria-hidden=\"true\"` and `inert` —\n * no landmark, no tab stop, nothing announced, so focus can never be inside\n * it when it is swapped. The navigation landmark, the current item\n * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no\n * shimmer. The skeleton shapes are filled with\n * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` colour hooks apply as\n * on `lc-sidenav`: set them on the element or any ancestor (3.15), e.g. one\n * rule on an ancestor of both. A value on the element wins over an\n * ancestor's, and both win over `theme`.\n */\n@Component({\n  selector: 'lc-sidenav-placeholder',\n  standalone: true,\n  templateUrl: './sidenav-placeholder.component.html',\n  styleUrl: './sidenav-placeholder.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-sidenav-container lc-sidenav-container--docked',\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n    // The theme's values sit on the host, as on lc-sidenav (019).\n    '[class.lc-sidenav-container--light]': \"theme() === 'light'\",\n    '[class.lc-sidenav-container--dark]': \"theme() === 'dark'\",\n    'aria-hidden': 'true',\n    inert: '',\n  },\n})\nexport class SidenavPlaceholderComponent {\n  private readonly router = inject(Router, { optional: true });\n  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */\n  private readonly routerUrl = signal(this.router?.url ?? '/');\n\n  /**\n   * Navigation items, the same value as on `lc-sidenav`: they give the number\n   * of rows, the sections and the groups that start expanded.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route, as on `lc-sidenav`. It decides which group starts\n   * expanded; when empty, the router's URL does (3.5 rules).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /**\n   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).\n   * @default false\n   */\n  readonly collapsed = input(false);\n\n  /**\n   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.\n   * @default false\n   */\n  readonly isOpen = input(false);\n\n  /**\n   * Width of the rail, as on `lc-sidenav`.\n   * @default '320px'\n   */\n  readonly width = input('320px');\n\n  /**\n   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the\n   * side navigation on the page, 48 px pills).\n   * @default 'default'\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /**\n   * Theme, as on `lc-sidenav`.\n   * @default 'auto'\n   */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Position, as on `lc-sidenav`.\n   * @default 'left'\n   */\n  readonly position = input<SidenavPosition>('left');\n\n  /**\n   * Reserves the logo block, as `showLogo` on `lc-sidenav`.\n   * @default false\n   */\n  readonly showLogo = input(false);\n\n  /**\n   * Height of the logo block, as on `lc-sidenav`.\n   * @default 'md'\n   */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** The items in display order. @internal */\n  protected readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */\n  private readonly expanded = computed(() => {\n    const active = this.activeRoute();\n    const path = active === '' && this.router ? navigationPath(this.router, this.routerUrl()) : '';\n    const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);\n    return new Set(currentItemParents(this.items(), current));\n  });\n\n  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */\n  protected readonly railClasses = computed(() => {\n    const classes = ['lc-sidenav', `lc-sidenav--${this.position()}`, 'lc-sidenav--docked'];\n    if (this.isOpen()) classes.push('lc-sidenav--open');\n    if (this.collapsed()) classes.push('lc-sidenav--collapsed');\n    if (this.theme() !== 'auto') classes.push(`lc-sidenav--${this.theme()}`);\n    if (this.variant() === 'transparent') classes.push('lc-sidenav--transparent');\n    return classes.join(' ');\n  });\n\n  /** The rail's width, as `lc-sidenav` sets it. @internal */\n  protected readonly railWidth = computed(() => (this.collapsed() ? '56px' : this.width()));\n\n  constructor() {\n    this.router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router?.url ?? '/'));\n  }\n\n  /** Whether a group starts expanded. @internal */\n  protected isExpanded(item: NavigationItem): boolean {\n    return this.expanded().has(item.id);\n  }\n\n  /** The label bar's width for the row at `index`. @internal */\n  protected labelWidth(index: number): string {\n    return LABEL_WIDTHS[index % LABEL_WIDTHS.length];\n  }\n}\n","<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n"],"mappings":"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"}