@lifecorner/angular-ui-kit 3.14.0 → 3.16.0

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/**\n * Weight of the two built-in actions.\n * - `default`: a filled primary and a ghost secondary with a chevron, the\n *   primary last\n * - `equal`: two answers of the same weight (a question such as „Teilen?“):\n *   both `outline` in the primary tone at `actionSize`, the primary first,\n *   no chevron\n */\nexport type NextStepCardActionsStyle = 'default' | 'equal';\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 * - `actionsStyle=\"equal\"` (3.16, BA-5): a question with two answers of the\n *   same weight, both outline buttons in the primary tone, primary first\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  /**\n   * Weight of the built-in actions. `default`: filled primary, ghost secondary\n   * with a chevron, primary last. `equal`: two answers of the same weight, both\n   * `outline` in the primary tone at `actionSize`, primary first, no chevron\n   * (`primaryClick`, `secondaryClick`, `primaryLoading`, `primaryDisabled` and\n   * `announce` work as before). Use `actionSize=\"lg\"` (48.5 px, the 44 px\n   * target; a dev warning otherwise). No effect on `[slot='actions']`.\n   * @default 'default'\n   */\n  actionsStyle = input<NextStepCardActionsStyle>('default');\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    effect(() => {\n      if (isDevMode() && this.actionsStyle() === 'equal' && this.actionSize() !== 'lg') {\n        console.warn('[lc-next-step-card] actionsStyle=\"equal\" needs actionSize=\"lg\" (44 px)');\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() && actionsStyle() === 'equal') {\n      <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\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=\"outline\"\n          tone=\"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      @if (secondaryLabel()) {\n        <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n        </lc-button>\n      }\n    } @else 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":";;;;AAqFA,IAAa,sBAAb,MAAa,oBAAmB;CAE9B,QAAQ,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAM5C,OAAO,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQ3C,cAAc,MAA0B,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAMhD,WAAW,MAAmB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,WAAW,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAS/C,WAAW,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAM/C,QAAQ,MAAiB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAc3B,OAAO,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAMvC,cAAc,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,QAAQ,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAS5C,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CASlC,aAAa,MAA4B,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAMzC,eAAe,eAAc;EAMrC,OAAO,CAAC,yBAAyB;GAJ/B,OAAO;GACP,SAAS;GACT,MAAM;EAEyB,EAAM,KAAK,KAAI,EAAG,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC/E,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,cAAc,eACtB;EACE;EACA,wBAAwB,KAAK,KAAI;EACjC,KAAK,YAAW,IAAK,4BAA4B;EACjD,KAAK,SAAQ,IAAK,iCAAiC;EACnD,KAAK,WAAU,IAAK,4BAA4B;EAChD,KAAK,WAAU,MAAO,YAAY,2BAA2B,KAAK,WAAU,MAAO;CACpF,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CA3GU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;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,MAAA,EAAA,YAAA,EAAA,SAAA,gBAAA,EAAA;EAAA,UAAA;EAAA,UCrFhC;EAiFA,QAAA,CAAA,2xMAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDLY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAS9B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAZ/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,eAAe,gBAAgB;GAAC,iBAGzB,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,MAC/B,EACJ,WAAW,gBACZ;GAAA,UAAA;GAAA,QAAA,CAAA,2xMAAA;EAAA,CAAA"}

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":";;;;;;AAgBA,MAAM,eAAe;CAAC;CAAO;CAAO;CAAO;AAAK;AAwDhD,IAAa,8BAAb,MAAa,4BAA2B;CACrB,SAAS,OAAO,QAAQ,EAAE,UAAU,KAAI,CAAE;CAE1C,YAAY,OAAO,KAAK,QAAQ,OAAO,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOnD,QAAQ,MAAwB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOnC,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMxB,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAMrB,QAAQ,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOtB,UAAU,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAM1C,QAAQ,MAAiC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMhD,WAAW,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMzC,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,WAAW,MAAwC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG9C,cAAc,eAAe,oBAAoB,KAAK,MAAK,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGjE,WAAW,eAAc;EACxC,MAAM,SAAS,KAAK,YAAW;EAC/B,MAAM,OAAO,WAAW,MAAM,KAAK,SAAS,eAAe,KAAK,QAAQ,KAAK,UAAS,CAAE,IAAI;EAC5F,MAAM,UAAU,sBAAsB,gBAAgB,KAAK,YAAW,CAAE,GAAG,QAAQ,IAAI;EACvF,OAAO,IAAI,IAAI,mBAAmB,KAAK,MAAK,GAAI,OAAO,CAAC;CAC1D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,cAAc,eAAc;EAC7C,MAAM,UAAU;GAAC;GAAc,eAAe,KAAK,SAAQ;GAAM;EAAoB;EACrF,IAAI,KAAK,OAAM,GAAI,QAAQ,KAAK,kBAAkB;EAClD,IAAI,KAAK,UAAS,GAAI,QAAQ,KAAK,uBAAuB;EAC1D,IAAI,KAAK,MAAK,MAAO,QAAQ,QAAQ,KAAK,eAAe,KAAK,MAAK,GAAI;EACvE,IAAI,KAAK,QAAO,MAAO,eAAe,QAAQ,KAAK,yBAAyB;EAC5E,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,YAAY,eAAgB,KAAK,UAAS,IAAK,SAAS,KAAK,MAAK,GAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzF,cAAA;EACE,KAAK,QAAQ,OACV,KACC,QAAQ,UAAkC,iBAAiB,aAAa,GACxE,mBAAkB,CAAE,CACrB,CACA,gBAAgB,KAAK,UAAU,IAAI,KAAK,QAAQ,OAAO,GAAG,CAAC;CAChE;CAGU,WAAW,MAAoB;EACvC,OAAO,KAAK,SAAQ,CAAE,CAAC,IAAI,KAAK,EAAE;CACpC;CAGU,WAAW,OAAa;EAChC,OAAO,aAAa,QAAQ,aAAa;CAC3C;CA7GW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA2B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA3B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA2B,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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,eAAA;IAAA,SAAA;GAAA;GAAA,YAAA;IAAA,oCAAA;IAAA,qCAAA;IAAA,oCAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UCxExC;EAwEA,QAAA,CAAA,6zKAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADAa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EAhBvC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAwB,YACtB;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IACJ,OAAO;IACP,sCAAsC;IAEtC,uCAAuC;IACvC,sCAAsC;IACtC,eAAe;IACf,OAAO;GACR;GAAA,UAAA;GAAA,QAAA,CAAA,6zKAAA;EAAA,CAAA"}