@lifecorner/angular-ui-kit 3.10.0 → 3.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-sidenav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  signal,\n  computed,\n  input,\n  output,\n  model,\n  effect,\n  untracked,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgTemplateOutlet, NgStyle } from '@angular/common';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter } from 'rxjs';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { NavigationItem } from '@lifecorner/angular-ui-kit/models';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\nimport { LogoComponent } from '@lifecorner/angular-ui-kit/logo';\n\nexport type SidenavPosition = 'left' | 'right';\nexport type SidenavMode = 'drawer' | 'docked';\n\n/**\n * Surface of the docked sidenav: `default` is the rail on `--color-sidebar`\n * with a border; `transparent` has no background and no border and draws the\n * items as 48 px pills (the side navigation on the page, \"Weite\"). A drawer\n * keeps its surface in both.\n */\nexport type SidenavVariant = 'default' | 'transparent';\n\n/**\n * Sidenav component for application navigation sidebar.\n *\n * Features:\n * - Drawer (overlay) and docked (persistent) modes\n * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint\n * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)\n * - Integrated logo area with collapse-toggle (sidebar-first layouts)\n * - Hierarchical navigation with collapsible groups (up to 3 levels)\n * - Section headlines for item grouping with optional action buttons\n * - Action buttons on any item (hover-reveal)\n * - Badge support on items (count / status indicator)\n * - One current item, announced and painted alike: the link for `activeRoute`\n *   (or, without it, the one the router's URL matches) gets\n *   `aria-current=\"page\"` and the current look, every other link neither\n *   (AS-16). No hover color change on the current item\n * - Keyboard navigation support (Escape closes drawer)\n * - Configurable width and position (left/right)\n * - Optional backdrop overlay\n * - Theme variants: auto, light, dark (with teal accent for dark mode)\n * - `variant=\"transparent\"`: no rail background or border, items as 48 px\n *   pills with 16 px labels, the current one on `--color-surface-selected`\n * - Items are at least 44 px high in every density; the current item's ink is\n *   `--color-on-surface-selected` (AA on the selected tint)\n * - Accessible: the inner `<nav>` is the navigation landmark; in drawer mode\n *   the panel is a modal dialog (`role=\"dialog\"`, focus moved to the close\n *   button on open, trapped while open, restored on close)\n *\n * @example\n * ```html\n * <lc-sidenav\n *   [isOpen]=\"isOpen\"\n *   mode=\"docked\"\n *   [(collapsed)]=\"isCollapsed\"\n *   [showLogo]=\"true\"\n *   logoSize=\"md\"\n *   [mobileBreakpoint]=\"768\"\n *   [items]=\"navItems\"\n *   activeRoute=\"/dashboard\"\n *   theme=\"dark\"\n *   (closed)=\"isOpen = false\"\n *   (itemClicked)=\"navigate($event)\"\n *   (itemAction)=\"onAction($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-sidenav',\n  standalone: true,\n  imports: [NgTemplateOutlet, NgStyle, RouterLink, A11yModule, IconComponent, BadgeComponent, LogoComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT])],\n  templateUrl: './sidenav.component.html',\n  styleUrl: './sidenav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-sidenav-container]': 'true',\n    '[class.lc-sidenav-container--docked]': \"effectiveMode() === 'docked'\",\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n  },\n})\nexport class SidenavComponent implements OnDestroy {\n  private readonly router = inject(Router);\n\n  /**\n   * The router's URL, updated on every `NavigationEnd`. Before the first\n   * navigation it is the router's initial URL (`/`). Read only when\n   * `activeRoute` is empty.\n   */\n  private readonly routerUrl = signal(this.router.url);\n\n  /** Whether the sidenav is collapsed to icon-only rail (two-way bindable) */\n  readonly collapsed = model(false);\n\n  /** Whether to show the logo at the top of the sidenav */\n  readonly showLogo = input(false);\n\n  /** Custom URL for the full brand logo (forwarded to inner `<lc-logo>`). */\n  readonly logoSrc = input('');\n  /** Custom URL for the emblem-only brand logo. */\n  readonly logoEmblemSrc = input('');\n  /** Optional dark-theme URL for the full brand logo. */\n  readonly logoDarkSrc = input('');\n  /** Optional dark-theme URL for the emblem-only brand logo. */\n  readonly logoDarkEmblemSrc = input('');\n  /** Alt text for the brand logo. */\n  readonly logoAlt = input('');\n\n  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size=\"md\">` (both 64px). */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** Whether the sidenav is open */\n  readonly isOpen = input(false);\n\n  /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */\n  readonly mode = input<SidenavMode>('drawer');\n\n  /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */\n  readonly mobileBreakpoint = input(768);\n\n  /** Whether the viewport is below the mobile breakpoint */\n  readonly isMobile = signal(false);\n\n  /** Effective mode: switches docked → drawer on mobile */\n  readonly effectiveMode = computed(() => {\n    if (this.isMobile() && this.mode() === 'docked') {\n      return 'drawer' as SidenavMode;\n    }\n    return this.mode();\n  });\n\n  private mediaQuery: MediaQueryList | null = null;\n  private mediaHandler = (e: MediaQueryListEvent) => this.isMobile.set(e.matches);\n\n  /** Position of the sidenav (left or right) */\n  readonly position = input<SidenavPosition>('left');\n\n  /** Width of the sidenav drawer */\n  readonly width = input('320px');\n\n  /**\n   * ARIA label of the navigation landmark (the inner `<nav>`) and, in drawer\n   * mode, of the dialog panel.\n   */\n  readonly ariaLabel = input('Side navigation');\n\n  /** Whether to show the overlay backdrop */\n  readonly hasOverlay = input(true);\n\n  /**\n   * Navigation items (`NavigationItem[]`): `id`, `icon`, `label`, `route`,\n   * `displayOrder` (sort order, 1 = first); optional `children`\n   * (`NavigationItem[]`, a collapsible group, up to 3 levels), `isSection`\n   * (renders `label` as a section headline over its `children`), `badge`\n   * (`{ value: string | number; variant?: 'default' | 'primary' | 'success' |\n   * 'warning' | 'error' | 'info' }`), `action` (`{ icon: string; ariaLabel?:\n   * string }`, a button that emits `itemAction`), `requiredRole` (for the\n   * app's own filtering; not evaluated here). Items link with `routerLink`;\n   * exactly one link, the current item (see `activeRoute`), gets\n   * `aria-current=\"page\"`.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route. When set, the first link (in display order) whose\n   * `route` equals it is the current item: it alone gets `aria-current=\"page\"`\n   * and the current look, whatever the router matches. When empty, the\n   * sidenav follows the router: the link whose route equals the URL's path is\n   * current, otherwise the one with the longest route the path starts with\n   * (`/household` on `/household/members`; `/` only on `/`). Routes are\n   * compared as written, so give them as absolute paths (`'/household'`).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /** Theme variant for the sidenav */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Surface of the docked sidenav: `default` (the rail with background and\n   * border) or `transparent` (no background, no border, items as 48 px pills\n   * with radius full and 16 px labels; the current one on\n   * `--color-surface-selected`). A drawer keeps its surface.\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /** Accessible name of the logo button that collapses/expands the sidebar. */\n  readonly toggleAriaLabel = input('Toggle sidebar');\n\n  /** Accessible name of the collapse button. Empty: \"Collapse navigation to the left/right\" by `position`. */\n  readonly collapseAriaLabel = input('');\n\n  /** Tooltip of the collapse button. */\n  readonly collapseTitle = input('Collapse sidebar');\n\n  /** Accessible name of the close button (drawer mode). */\n  readonly closeAriaLabel = input('Close navigation');\n\n  /**\n   * Ids of the expanded parent items — the single source of truth for\n   * `isExpanded`. Seeded with the current item's parent whenever it changes\n   * (see constructor), so a group opens on navigation but can still\n   * be collapsed by the user. (It used to be OR-ed with `hasActiveChild` at\n   * read time, so toggling such a group flipped the set without ever closing\n   * it — the set drifted out of sync with what was on screen.)\n   */\n  readonly expandedItems = signal<Set<string>>(new Set());\n\n  /** Ids of the collapsible parents (top-level groups, section sub-groups) that contain the current item. */\n  private readonly activeChildParents = computed(() => currentItemParents(this.items(), this.currentItem()));\n\n  /**\n   * Computed sorted navigation items by displayOrder\n   */\n  readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /**\n   * Every item rendered as a link, in display order (depth first): simple\n   * items, the children of a group, the children of a section, and the\n   * children of a section's sub-group.\n   */\n  private readonly linkItems = computed(() => navigationLinks(this.sortedItems()));\n\n  /** The router URL's path: primary outlet only, no query, fragment or matrix parameters. */\n  private readonly routerPath = computed(() => navigationPath(this.router, this.routerUrl()));\n\n  /**\n   * The one current link (or none). The single source of both the current\n   * look (`lc-sidenav__nav-item--active`) and `aria-current=\"page\"` (AS-16).\n   * With `activeRoute` set: the first link whose route equals it. Without:\n   * the router's path — the exact match wins, otherwise the longest link\n   * route the path continues with a `/` (`/` matches only `/`); ties go to\n   * the first link in display order. The rules live in\n   * `internal/navigation` since 3.6, shared with `lc-sidenav-placeholder`.\n   */\n  private readonly currentItem = computed<NavigationItem | null>(() =>\n    currentNavigationItem(this.linkItems(), this.activeRoute(), this.activeRoute() === '' ? this.routerPath() : ''),\n  );\n\n  /**\n   * Event emitted when the sidenav should close\n   */\n  readonly closed = output<void>();\n\n  /**\n   * Event emitted when a navigation item is clicked\n   */\n  readonly itemClicked = output<NavigationItem>();\n\n  /**\n   * Event emitted when an item's action button is clicked\n   */\n  readonly itemAction = output<NavigationItem>();\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    // React to mobileBreakpoint changes\n    effect(() => {\n      this.mobileBreakpoint(); // track dependency\n      this.setupMediaQuery();\n    });\n\n    // Navigating into a group opens it: add the active child's parent(s) to\n    // the expanded set. Only additive — the user's own collapses/expands of\n    // other groups survive a route change.\n    effect(() => {\n      const parents = this.activeChildParents();\n      if (parents.length === 0) return;\n      const expanded = untracked(this.expandedItems);\n      if (parents.every((id) => expanded.has(id))) return;\n      this.expandedItems.set(new Set([...expanded, ...parents]));\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.teardownMediaQuery();\n  }\n\n  private setupMediaQuery(): void {\n    if (typeof window === 'undefined') return;\n    this.teardownMediaQuery();\n    this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint()}px)`);\n    this.isMobile.set(this.mediaQuery.matches);\n    this.mediaQuery.addEventListener('change', this.mediaHandler);\n  }\n\n  private teardownMediaQuery(): void {\n    this.mediaQuery?.removeEventListener('change', this.mediaHandler);\n    this.mediaQuery = null;\n  }\n\n  /**\n   * Computed CSS classes for the sidenav\n   */\n  sidenavClasses = computed(() => {\n    const classes = ['lc-sidenav'];\n    classes.push(`lc-sidenav--${this.position()}`);\n    classes.push(`lc-sidenav--${this.effectiveMode()}`);\n    if (this.isOpen()) {\n      classes.push('lc-sidenav--open');\n    }\n    if (this.collapsed() && !this.isMobile()) {\n      classes.push('lc-sidenav--collapsed');\n    }\n    if (this.theme() !== 'auto') {\n      classes.push(`lc-sidenav--${this.theme()}`);\n    }\n    if (this.variant() === 'transparent') {\n      classes.push('lc-sidenav--transparent');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed inline styles for the sidenav\n   */\n  sidenavStyles = computed(() => ({\n    width: this.isMobile() ? this.width() : (this.collapsed() ? '56px' : this.width()),\n  }));\n\n  /**\n   * Toggle collapsed state\n   */\n  toggleCollapsed(): void {\n    this.collapsed.set(!this.collapsed());\n  }\n\n  /**\n   * Handle close action\n   */\n  handleClose(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle navigation item click\n   */\n  handleItemClick(item: NavigationItem): void {\n    this.itemClicked.emit(item);\n    // Auto-close drawer on mobile after navigation\n    if (this.isMobile()) {\n      this.handleClose();\n    }\n  }\n\n  /**\n   * Handle action button click on a navigation item\n   */\n  handleItemAction(event: Event, item: NavigationItem): void {\n    event.stopPropagation();\n    this.itemAction.emit(item);\n  }\n\n  /**\n   * Whether the item is the current link (see `currentItem`): it alone is\n   * painted current and carries `aria-current=\"page\"`.\n   */\n  isItemActive(item: NavigationItem): boolean {\n    return this.currentItem() === item;\n  }\n\n  /**\n   * Check if a parent item contains the current link\n   */\n  hasActiveChild(item: NavigationItem): boolean {\n    const current = this.currentItem();\n    return !!current && !!item.children?.includes(current);\n  }\n\n  /**\n   * Toggle expansion of a parent item.\n   * If the sidenav is collapsed, expand it first.\n   */\n  toggleExpanded(item: NavigationItem): void {\n    if (this.collapsed()) {\n      this.collapsed.set(false);\n      // Expand the clicked item after uncollapsing\n      const expanded = new Set(this.expandedItems());\n      expanded.add(item.id);\n      this.expandedItems.set(expanded);\n      return;\n    }\n    const expanded = new Set(this.expandedItems());\n    if (expanded.has(item.id)) {\n      expanded.delete(item.id);\n    } else {\n      expanded.add(item.id);\n    }\n    this.expandedItems.set(expanded);\n  }\n\n  /**\n   * Check if an item is expanded\n   */\n  isExpanded(item: NavigationItem): boolean {\n    return this.expandedItems().has(item.id);\n  }\n\n  /**\n   * Handle keyboard navigation. Keyed on the EFFECTIVE mode: a docked sidenav\n   * that has become a drawer below the mobile breakpoint must close on Escape\n   * like any drawer.\n   */\n  @HostListener('document:keydown', ['$event'])\n  handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.isOpen() && this.effectiveMode() === 'drawer') {\n      this.handleClose();\n    }\n  }\n}\n","<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-sidenav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  signal,\n  computed,\n  input,\n  output,\n  model,\n  effect,\n  untracked,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgTemplateOutlet, NgStyle } from '@angular/common';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter } from 'rxjs';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { NavigationItem } from '@lifecorner/angular-ui-kit/models';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\nimport { LogoComponent } from '@lifecorner/angular-ui-kit/logo';\n\nexport type SidenavPosition = 'left' | 'right';\nexport type SidenavMode = 'drawer' | 'docked';\n\n/**\n * Surface of the docked sidenav: `default` is the rail on `--color-sidebar`\n * with a border; `transparent` has no background and no border and draws the\n * items as 48 px pills (the side navigation on the page, \"Weite\"). A drawer\n * keeps its surface in both.\n */\nexport type SidenavVariant = 'default' | 'transparent';\n\n/**\n * Sidenav component for application navigation sidebar.\n *\n * Features:\n * - Drawer (overlay) and docked (persistent) modes\n * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint\n * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)\n * - Integrated logo area with collapse-toggle (sidebar-first layouts)\n * - Hierarchical navigation with collapsible groups (up to 3 levels)\n * - Section headlines for item grouping with optional action buttons\n * - Action buttons on any item (hover-reveal)\n * - Badge support on items (count / status indicator)\n * - One current item, announced and painted alike: the link for `activeRoute`\n *   (or, without it, the one the router's URL matches) gets\n *   `aria-current=\"page\"` and the current look, every other link neither\n *   (AS-16). No hover color change on the current item\n * - Keyboard navigation support (Escape closes drawer)\n * - Configurable width and position (left/right)\n * - Optional backdrop overlay\n * - Theme variants: auto, light, dark (with teal accent for dark mode)\n * - `variant=\"transparent\"`: no rail background or border, items as 48 px\n *   pills with 16 px labels, the current one on `--color-surface-selected`\n * - Items are at least 44 px high in every density; the current item's ink is\n *   `--color-on-surface-selected` (AA on the selected tint)\n * - Accessible: the inner `<nav>` is the navigation landmark; in drawer mode\n *   the panel is a modal dialog (`role=\"dialog\"`, focus moved to the close\n *   button on open, trapped while open, restored on close)\n *\n * @example\n * ```html\n * <lc-sidenav\n *   [isOpen]=\"isOpen\"\n *   mode=\"docked\"\n *   [(collapsed)]=\"isCollapsed\"\n *   [showLogo]=\"true\"\n *   logoSize=\"md\"\n *   [mobileBreakpoint]=\"768\"\n *   [items]=\"navItems\"\n *   activeRoute=\"/dashboard\"\n *   theme=\"dark\"\n *   (closed)=\"isOpen = false\"\n *   (itemClicked)=\"navigate($event)\"\n *   (itemAction)=\"onAction($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-sidenav',\n  standalone: true,\n  imports: [NgTemplateOutlet, NgStyle, RouterLink, A11yModule, IconComponent, BadgeComponent, LogoComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT])],\n  templateUrl: './sidenav.component.html',\n  styleUrl: './sidenav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-sidenav-container]': 'true',\n    '[class.lc-sidenav-container--docked]': \"effectiveMode() === 'docked'\",\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n  },\n})\nexport class SidenavComponent implements OnDestroy {\n  private readonly router = inject(Router);\n\n  /**\n   * The router's URL, updated on every `NavigationEnd`. Before the first\n   * navigation it is the router's initial URL (`/`). Read only when\n   * `activeRoute` is empty.\n   */\n  private readonly routerUrl = signal(this.router.url);\n\n  /** Whether the sidenav is collapsed to icon-only rail (two-way bindable) */\n  readonly collapsed = model(false);\n\n  /** Whether to show the logo at the top of the sidenav */\n  readonly showLogo = input(false);\n\n  /** Custom URL for the full brand logo (forwarded to inner `<lc-logo>`). */\n  readonly logoSrc = input('');\n  /** Custom URL for the emblem-only brand logo. */\n  readonly logoEmblemSrc = input('');\n  /** Optional dark-theme URL for the full brand logo. */\n  readonly logoDarkSrc = input('');\n  /** Optional dark-theme URL for the emblem-only brand logo. */\n  readonly logoDarkEmblemSrc = input('');\n  /** Alt text for the brand logo. */\n  readonly logoAlt = input('');\n\n  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size=\"md\">` (both 64px). */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** Whether the sidenav is open */\n  readonly isOpen = input(false);\n\n  /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */\n  readonly mode = input<SidenavMode>('drawer');\n\n  /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */\n  readonly mobileBreakpoint = input(768);\n\n  /** Whether the viewport is below the mobile breakpoint */\n  readonly isMobile = signal(false);\n\n  /** Effective mode: switches docked → drawer on mobile */\n  readonly effectiveMode = computed(() => {\n    if (this.isMobile() && this.mode() === 'docked') {\n      return 'drawer' as SidenavMode;\n    }\n    return this.mode();\n  });\n\n  private mediaQuery: MediaQueryList | null = null;\n  private mediaHandler = (e: MediaQueryListEvent) => this.isMobile.set(e.matches);\n\n  /** Position of the sidenav (left or right) */\n  readonly position = input<SidenavPosition>('left');\n\n  /** Width of the sidenav drawer */\n  readonly width = input('320px');\n\n  /**\n   * ARIA label of the navigation landmark (the inner `<nav>`) and, in drawer\n   * mode, of the dialog panel.\n   */\n  readonly ariaLabel = input('Side navigation');\n\n  /** Whether to show the overlay backdrop */\n  readonly hasOverlay = input(true);\n\n  /**\n   * Navigation items (`NavigationItem[]`): `id`, `icon`, `label`, `route`,\n   * `displayOrder` (sort order, 1 = first); optional `children`\n   * (`NavigationItem[]`, a collapsible group, up to 3 levels), `isSection`\n   * (renders `label` as a section headline over its `children`), `badge`\n   * (`{ value: string | number; variant?: 'default' | 'primary' | 'success' |\n   * 'warning' | 'error' | 'info' }`), `action` (`{ icon: string; ariaLabel?:\n   * string }`, a button that emits `itemAction`), `requiredRole` (for the\n   * app's own filtering; not evaluated here). Items link with `routerLink`;\n   * exactly one link, the current item (see `activeRoute`), gets\n   * `aria-current=\"page\"`.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route. When set, the first link (in display order) whose\n   * `route` equals it is the current item: it alone gets `aria-current=\"page\"`\n   * and the current look, whatever the router matches. When empty, the\n   * sidenav follows the router: the link whose route equals the URL's path is\n   * current, otherwise the one with the longest route the path starts with\n   * (`/household` on `/household/members`; `/` only on `/`). Routes are\n   * compared as written, so give them as absolute paths (`'/household'`).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /** Theme variant for the sidenav */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Surface of the docked sidenav: `default` (the rail with background and\n   * border) or `transparent` (no background, no border, items as 48 px pills\n   * with radius full and 16 px labels; the current one on\n   * `--color-surface-selected`). A drawer keeps its surface.\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /** Accessible name of the logo button that collapses/expands the sidebar. */\n  readonly toggleAriaLabel = input('Toggle sidebar');\n\n  /** Accessible name of the collapse button. Empty: \"Collapse navigation to the left/right\" by `position`. */\n  readonly collapseAriaLabel = input('');\n\n  /** Tooltip of the collapse button. */\n  readonly collapseTitle = input('Collapse sidebar');\n\n  /** Accessible name of the close button (drawer mode). */\n  readonly closeAriaLabel = input('Close navigation');\n\n  /**\n   * Ids of the expanded parent items — the single source of truth for\n   * `isExpanded`. Seeded with the current item's parent whenever it changes\n   * (see constructor), so a group opens on navigation but can still\n   * be collapsed by the user. (It used to be OR-ed with `hasActiveChild` at\n   * read time, so toggling such a group flipped the set without ever closing\n   * it — the set drifted out of sync with what was on screen.)\n   */\n  readonly expandedItems = signal<Set<string>>(new Set());\n\n  /** Ids of the collapsible parents (top-level groups, section sub-groups) that contain the current item. */\n  private readonly activeChildParents = computed(() => currentItemParents(this.items(), this.currentItem()));\n\n  /**\n   * Computed sorted navigation items by displayOrder\n   */\n  readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /**\n   * Every item rendered as a link, in display order (depth first): simple\n   * items, the children of a group, the children of a section, and the\n   * children of a section's sub-group.\n   */\n  private readonly linkItems = computed(() => navigationLinks(this.sortedItems()));\n\n  /** The router URL's path: primary outlet only, no query, fragment or matrix parameters. */\n  private readonly routerPath = computed(() => navigationPath(this.router, this.routerUrl()));\n\n  /**\n   * The one current link (or none). The single source of both the current\n   * look (`lc-sidenav__nav-item--active`) and `aria-current=\"page\"` (AS-16).\n   * With `activeRoute` set: the first link whose route equals it. Without:\n   * the router's path — the exact match wins, otherwise the longest link\n   * route the path continues with a `/` (`/` matches only `/`); ties go to\n   * the first link in display order. The rules live in\n   * `internal/navigation` since 3.6, shared with `lc-sidenav-placeholder`.\n   */\n  private readonly currentItem = computed<NavigationItem | null>(() =>\n    currentNavigationItem(this.linkItems(), this.activeRoute(), this.activeRoute() === '' ? this.routerPath() : ''),\n  );\n\n  /**\n   * Event emitted when the sidenav should close\n   */\n  readonly closed = output<void>();\n\n  /**\n   * Event emitted when a navigation item is clicked\n   */\n  readonly itemClicked = output<NavigationItem>();\n\n  /**\n   * Event emitted when an item's action button is clicked\n   */\n  readonly itemAction = output<NavigationItem>();\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    // React to mobileBreakpoint changes\n    effect(() => {\n      this.mobileBreakpoint(); // track dependency\n      this.setupMediaQuery();\n    });\n\n    // Navigating into a group opens it: add the active child's parent(s) to\n    // the expanded set. Only additive — the user's own collapses/expands of\n    // other groups survive a route change.\n    effect(() => {\n      const parents = this.activeChildParents();\n      if (parents.length === 0) return;\n      const expanded = untracked(this.expandedItems);\n      if (parents.every((id) => expanded.has(id))) return;\n      this.expandedItems.set(new Set([...expanded, ...parents]));\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.teardownMediaQuery();\n  }\n\n  private setupMediaQuery(): void {\n    if (typeof window === 'undefined') return;\n    this.teardownMediaQuery();\n    this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint()}px)`);\n    this.isMobile.set(this.mediaQuery.matches);\n    this.mediaQuery.addEventListener('change', this.mediaHandler);\n  }\n\n  private teardownMediaQuery(): void {\n    this.mediaQuery?.removeEventListener('change', this.mediaHandler);\n    this.mediaQuery = null;\n  }\n\n  /**\n   * Computed CSS classes for the sidenav\n   */\n  sidenavClasses = computed(() => {\n    const classes = ['lc-sidenav'];\n    classes.push(`lc-sidenav--${this.position()}`);\n    classes.push(`lc-sidenav--${this.effectiveMode()}`);\n    if (this.isOpen()) {\n      classes.push('lc-sidenav--open');\n    }\n    if (this.collapsed() && !this.isMobile()) {\n      classes.push('lc-sidenav--collapsed');\n    }\n    if (this.theme() !== 'auto') {\n      classes.push(`lc-sidenav--${this.theme()}`);\n    }\n    if (this.variant() === 'transparent') {\n      classes.push('lc-sidenav--transparent');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed inline styles for the sidenav\n   */\n  sidenavStyles = computed(() => ({\n    width: this.isMobile() ? this.width() : (this.collapsed() ? '56px' : this.width()),\n  }));\n\n  /**\n   * Toggle collapsed state\n   */\n  toggleCollapsed(): void {\n    this.collapsed.set(!this.collapsed());\n  }\n\n  /**\n   * Handle close action\n   */\n  handleClose(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle navigation item click\n   */\n  handleItemClick(item: NavigationItem): void {\n    this.itemClicked.emit(item);\n    // Auto-close drawer on mobile after navigation\n    if (this.isMobile()) {\n      this.handleClose();\n    }\n  }\n\n  /**\n   * Handle action button click on a navigation item\n   */\n  handleItemAction(event: Event, item: NavigationItem): void {\n    event.stopPropagation();\n    this.itemAction.emit(item);\n  }\n\n  /**\n   * Whether the item is the current link (see `currentItem`): it alone is\n   * painted current and carries `aria-current=\"page\"`.\n   */\n  isItemActive(item: NavigationItem): boolean {\n    return this.currentItem() === item;\n  }\n\n  /**\n   * Check if a parent item contains the current link\n   */\n  hasActiveChild(item: NavigationItem): boolean {\n    const current = this.currentItem();\n    return !!current && !!item.children?.includes(current);\n  }\n\n  /**\n   * Toggle expansion of a parent item.\n   * If the sidenav is collapsed, expand it first.\n   */\n  toggleExpanded(item: NavigationItem): void {\n    if (this.collapsed()) {\n      this.collapsed.set(false);\n      // Expand the clicked item after uncollapsing\n      const expanded = new Set(this.expandedItems());\n      expanded.add(item.id);\n      this.expandedItems.set(expanded);\n      return;\n    }\n    const expanded = new Set(this.expandedItems());\n    if (expanded.has(item.id)) {\n      expanded.delete(item.id);\n    } else {\n      expanded.add(item.id);\n    }\n    this.expandedItems.set(expanded);\n  }\n\n  /**\n   * Check if an item is expanded\n   */\n  isExpanded(item: NavigationItem): boolean {\n    return this.expandedItems().has(item.id);\n  }\n\n  /**\n   * Handle keyboard navigation. Keyed on the EFFECTIVE mode: a docked sidenav\n   * that has become a drawer below the mobile breakpoint must close on Escape\n   * like any drawer.\n   */\n  @HostListener('document:keydown', ['$event'])\n  handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.isOpen() && this.effectiveMode() === 'drawer') {\n      this.handleClose();\n    }\n  }\n}\n","<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : logoSize()\"\n            [clickable]=\"false\"\n            [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n            [src]=\"logoSrc()\"\n            [emblemSrc]=\"logoEmblemSrc()\"\n            [darkSrc]=\"logoDarkSrc()\"\n            [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n            [alt]=\"logoAlt() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n"],"mappings":"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"}

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

@@ -333,7 +333,8 @@ var TabsComponent = class TabsComponent {
 					"variant",
 					"size",
 					"rounded",
-					"dot"
+					"dot",
+					"wrap"
 				]
 			}
 		],

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-tabs.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/tabs/tabs.component.ts","../../../../libs/angular-ui-kit/src/lib/tabs/tabs.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  model,\n  contentChildren,\n  viewChild,\n  viewChildren,\n  computed,\n  effect,\n  untracked,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  TemplateRef,\n  ElementRef,\n} from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\nlet nextUniqueId = 0;\n\nexport type TabOrientation = 'horizontal' | 'vertical';\n\n/**\n * Individual tab component\n */\n@Component({\n  selector: 'lc-tab',\n  standalone: true,\n  imports: [],\n  template: `\n    <ng-template>\n      <ng-content></ng-content>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabComponent {\n  /**\n   * Tab label displayed in tab button\n   */\n  readonly label = input('');\n\n  /**\n   * Whether the tab is disabled\n   * @default false\n   */\n  readonly disabled = input(false);\n\n  /**\n   * Optional icon name (Tabler Icons)\n   */\n  readonly icon = input<string | undefined>();\n\n  /**\n   * Optional badge content shown after the label (e.g. a count or \"New\").\n   * `0` is rendered; `undefined`, `null`, and `''` hide the badge.\n   */\n  readonly badge = input<string | number | undefined | null>();\n\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  readonly badgeVariant = input<BadgeVariant>('default');\n\n  /**\n   * Whether the badge should be rendered\n   */\n  readonly hasBadge = computed(() => {\n    const badge = this.badge();\n    return badge !== undefined && badge !== null && badge !== '';\n  });\n\n  /**\n   * Unique ID for accessibility\n   */\n  readonly id = `lc-tab-${nextUniqueId++}`;\n\n  /**\n   * Unique ID for the panel\n   */\n  readonly panelId = `lc-tabpanel-${this.id}`;\n\n  /**\n   * Template reference for tab content\n   */\n  readonly template = viewChild.required(TemplateRef);\n}\n\n/**\n * Tabs component for organizing content into switchable views.\n *\n * Features:\n * - Dynamic tab registration via content projection (tabs added or removed\n *   after init are picked up automatically)\n * - Active tab tracking with two-way binding (`[(selectedIndex)]`)\n * - Accessible with ARIA tablist/tab/tabpanel roles\n * - Keyboard navigation between tabs (arrow keys, Home, End) moves both the\n *   selection and DOM focus\n * - Lazy content rendering per tab\n * - Optional badge per tab (counts or status labels)\n *\n * @example\n * ```html\n * <lc-tabs [(selectedIndex)]=\"active\">\n *   <lc-tab label=\"Account\">Account settings</lc-tab>\n *   <lc-tab label=\"Inbox\" [badge]=\"12\" badgeVariant=\"primary\">Messages</lc-tab>\n *   <lc-tab label=\"Security\">Security settings</lc-tab>\n * </lc-tabs>\n * ```\n */\n@Component({\n  selector: 'lc-tabs',\n  standalone: true,\n  imports: [NgClass, NgTemplateOutlet, BadgeComponent],\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-tabs',\n  },\n})\nexport class TabsComponent {\n  /**\n   * Orientation of tabs\n   * @default 'horizontal'\n   */\n  readonly orientation = input<TabOrientation>('horizontal');\n\n  /**\n   * Currently selected tab index. Two-way bindable via `[(selectedIndex)]`;\n   * `selectedIndexChange` emits only when the selection actually changes\n   * (never during initialisation).\n   * @default 0\n   */\n  readonly selectedIndex = model(0);\n\n  /**\n   * Legacy one-way input for the selected index.\n   * @deprecated Bind `[selectedIndex]` / `[(selectedIndex)]` instead.\n   */\n  readonly selectedIndexInput = input<number | undefined>(undefined);\n\n  /**\n   * Projected tab components (signal query — updates when tabs are added or\n   * removed after init).\n   */\n  readonly tabs = contentChildren(TabComponent);\n\n  /**\n   * Tab list for template access\n   */\n  readonly tabList = computed(() => this.tabs());\n\n  /**\n   * Rendered tab buttons — used to move DOM focus on keyboard navigation.\n   */\n  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n  /**\n   * CSS classes for tab list\n   */\n  readonly tabListClasses = computed(() => ({\n    'lc-tabs__list': true,\n    'lc-tabs--horizontal': this.orientation() === 'horizontal',\n    'lc-tabs--vertical': this.orientation() === 'vertical',\n  }));\n\n  constructor() {\n    // Mirror the deprecated one-way input into the model. `model.set` is a\n    // no-op (no emit) when the value is unchanged, so binding the same index\n    // does not fire `selectedIndexChange`.\n    effect(() => {\n      const legacy = this.selectedIndexInput();\n      if (legacy !== undefined) {\n        untracked(() => this.selectedIndex.set(legacy));\n      }\n    });\n\n    // Keep the selection valid when tabs are removed at runtime: falling off\n    // the end would leave no panel visible and no tab reachable via Tab.\n    effect(() => {\n      const count = this.tabs().length;\n      const index = untracked(() => this.selectedIndex());\n      if (count > 0 && index >= count) {\n        untracked(() => this.selectTab(this.getLastEnabledTab()));\n      }\n    });\n  }\n\n  /**\n   * Select a tab by index\n   */\n  selectTab(index: number): void {\n    const tabs = this.tabList();\n    const tab = tabs[index];\n    if (index >= 0 && index < tabs.length && tab && !tab.disabled()) {\n      this.selectedIndex.set(index);\n    }\n  }\n\n  /**\n   * Check if tab is selected\n   */\n  isSelected(index: number): boolean {\n    return this.selectedIndex() === index;\n  }\n\n  /**\n   * Handle keyboard navigation (automatic activation: focus and selection\n   * move together).\n   */\n  handleKeyDown(event: KeyboardEvent): void {\n    const currentIndex = this.selectedIndex();\n    let nextIndex = currentIndex;\n\n    const isHorizontal = this.orientation() === 'horizontal';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n    switch (event.key) {\n      case nextKey:\n        event.preventDefault();\n        nextIndex = this.getNextEnabledTab(currentIndex);\n        break;\n\n      case prevKey:\n        event.preventDefault();\n        nextIndex = this.getPreviousEnabledTab(currentIndex);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        nextIndex = this.getFirstEnabledTab();\n        break;\n\n      case 'End':\n        event.preventDefault();\n        nextIndex = this.getLastEnabledTab();\n        break;\n\n      default:\n        return;\n    }\n\n    if (nextIndex !== currentIndex) {\n      this.selectTab(nextIndex);\n      this.focusTab(nextIndex);\n    }\n  }\n\n  /**\n   * Get tabindex for tab button\n   */\n  getTabIndex(index: number): number {\n    return this.isSelected(index) ? 0 : -1;\n  }\n\n  /**\n   * Move DOM focus to the tab button at `index` (roving tabindex).\n   */\n  private focusTab(index: number): void {\n    this.tabButtons()[index]?.nativeElement.focus();\n  }\n\n  /**\n   * Get next enabled tab index (with wrapping)\n   */\n  private getNextEnabledTab(currentIndex: number): number {\n    const tabs = this.tabList();\n    let nextIndex = (currentIndex + 1) % tabs.length;\n    const startIndex = nextIndex;\n\n    while (tabs[nextIndex]?.disabled()) {\n      nextIndex = (nextIndex + 1) % tabs.length;\n      if (nextIndex === startIndex) {\n        return currentIndex; // No enabled tabs found\n      }\n    }\n\n    return nextIndex;\n  }\n\n  /**\n   * Get previous enabled tab index (with wrapping)\n   */\n  private getPreviousEnabledTab(currentIndex: number): number {\n    const tabs = this.tabList();\n    let prevIndex = currentIndex - 1;\n    if (prevIndex < 0) {\n      prevIndex = tabs.length - 1;\n    }\n    const startIndex = prevIndex;\n\n    while (tabs[prevIndex]?.disabled()) {\n      prevIndex = prevIndex - 1;\n      if (prevIndex < 0) {\n        prevIndex = tabs.length - 1;\n      }\n      if (prevIndex === startIndex) {\n        return currentIndex; // No enabled tabs found\n      }\n    }\n\n    return prevIndex;\n  }\n\n  /**\n   * Get first enabled tab index\n   */\n  private getFirstEnabledTab(): number {\n    const tabs = this.tabList();\n    for (let i = 0; i < tabs.length; i++) {\n      const tab = tabs[i];\n      if (tab && !tab.disabled()) {\n        return i;\n      }\n    }\n    return 0;\n  }\n\n  /**\n   * Get last enabled tab index\n   */\n  private getLastEnabledTab(): number {\n    const tabs = this.tabList();\n    for (let i = tabs.length - 1; i >= 0; i--) {\n      const tab = tabs[i];\n      if (tab && !tab.disabled()) {\n        return i;\n      }\n    }\n    return tabs.length - 1;\n  }\n}\n","<div\n  class=\"lc-tabs__container\"\n  [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n  [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused tab (roving tabindex) -->\n  <div\n    [ngClass]=\"tabListClasses()\"\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientation()\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    @for (tab of tabList(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"lc-tabs__tab\"\n        [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n        [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [attr.id]=\"tab.id\"\n        [attr.aria-selected]=\"isSelected(i)\"\n        [attr.aria-controls]=\"tab.panelId\"\n        [attr.aria-disabled]=\"tab.disabled() || null\"\n        [tabindex]=\"getTabIndex(i)\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(i)\"\n      >\n        {{ tab.label() }}\n        @if (tab.hasBadge()) {\n          <lc-badge\n            class=\"lc-tabs__badge\"\n            [variant]=\"tab.badgeVariant()\"\n            size=\"xs\"\n            [rounded]=\"true\"\n            >{{ tab.badge() }}</lc-badge\n          >\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"lc-tabs__panels\">\n    @for (tab of tabList(); track tab.id; let i = $index) {\n      <div\n        class=\"lc-tabs__panel\"\n        [class.lc-tabs__panel--active]=\"isSelected(i)\"\n        role=\"tabpanel\"\n        [attr.id]=\"tab.panelId\"\n        [attr.aria-labelledby]=\"tab.id\"\n        [attr.hidden]=\"!isSelected(i) || null\"\n        [tabindex]=\"0\"\n      >\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-tabs.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/tabs/tabs.component.ts","../../../../libs/angular-ui-kit/src/lib/tabs/tabs.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  model,\n  contentChildren,\n  viewChild,\n  viewChildren,\n  computed,\n  effect,\n  untracked,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  TemplateRef,\n  ElementRef,\n} from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\nlet nextUniqueId = 0;\n\nexport type TabOrientation = 'horizontal' | 'vertical';\n\n/**\n * Individual tab component\n */\n@Component({\n  selector: 'lc-tab',\n  standalone: true,\n  imports: [],\n  template: `\n    <ng-template>\n      <ng-content></ng-content>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabComponent {\n  /**\n   * Tab label displayed in tab button\n   */\n  readonly label = input('');\n\n  /**\n   * Whether the tab is disabled\n   * @default false\n   */\n  readonly disabled = input(false);\n\n  /**\n   * Optional icon name (Tabler Icons)\n   */\n  readonly icon = input<string | undefined>();\n\n  /**\n   * Optional badge content shown after the label (e.g. a count or \"New\").\n   * `0` is rendered; `undefined`, `null`, and `''` hide the badge.\n   */\n  readonly badge = input<string | number | undefined | null>();\n\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  readonly badgeVariant = input<BadgeVariant>('default');\n\n  /**\n   * Whether the badge should be rendered\n   */\n  readonly hasBadge = computed(() => {\n    const badge = this.badge();\n    return badge !== undefined && badge !== null && badge !== '';\n  });\n\n  /**\n   * Unique ID for accessibility\n   */\n  readonly id = `lc-tab-${nextUniqueId++}`;\n\n  /**\n   * Unique ID for the panel\n   */\n  readonly panelId = `lc-tabpanel-${this.id}`;\n\n  /**\n   * Template reference for tab content\n   */\n  readonly template = viewChild.required(TemplateRef);\n}\n\n/**\n * Tabs component for organizing content into switchable views.\n *\n * Features:\n * - Dynamic tab registration via content projection (tabs added or removed\n *   after init are picked up automatically)\n * - Active tab tracking with two-way binding (`[(selectedIndex)]`)\n * - Accessible with ARIA tablist/tab/tabpanel roles\n * - Keyboard navigation between tabs (arrow keys, Home, End) moves both the\n *   selection and DOM focus\n * - Lazy content rendering per tab\n * - Optional badge per tab (counts or status labels)\n *\n * @example\n * ```html\n * <lc-tabs [(selectedIndex)]=\"active\">\n *   <lc-tab label=\"Account\">Account settings</lc-tab>\n *   <lc-tab label=\"Inbox\" [badge]=\"12\" badgeVariant=\"primary\">Messages</lc-tab>\n *   <lc-tab label=\"Security\">Security settings</lc-tab>\n * </lc-tabs>\n * ```\n */\n@Component({\n  selector: 'lc-tabs',\n  standalone: true,\n  imports: [NgClass, NgTemplateOutlet, BadgeComponent],\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-tabs',\n  },\n})\nexport class TabsComponent {\n  /**\n   * Orientation of tabs\n   * @default 'horizontal'\n   */\n  readonly orientation = input<TabOrientation>('horizontal');\n\n  /**\n   * Currently selected tab index. Two-way bindable via `[(selectedIndex)]`;\n   * `selectedIndexChange` emits only when the selection actually changes\n   * (never during initialisation).\n   * @default 0\n   */\n  readonly selectedIndex = model(0);\n\n  /**\n   * Legacy one-way input for the selected index.\n   * @deprecated Bind `[selectedIndex]` / `[(selectedIndex)]` instead.\n   */\n  readonly selectedIndexInput = input<number | undefined>(undefined);\n\n  /**\n   * Projected tab components (signal query — updates when tabs are added or\n   * removed after init).\n   */\n  readonly tabs = contentChildren(TabComponent);\n\n  /**\n   * Tab list for template access\n   */\n  readonly tabList = computed(() => this.tabs());\n\n  /**\n   * Rendered tab buttons — used to move DOM focus on keyboard navigation.\n   */\n  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n  /**\n   * CSS classes for tab list\n   */\n  readonly tabListClasses = computed(() => ({\n    'lc-tabs__list': true,\n    'lc-tabs--horizontal': this.orientation() === 'horizontal',\n    'lc-tabs--vertical': this.orientation() === 'vertical',\n  }));\n\n  constructor() {\n    // Mirror the deprecated one-way input into the model. `model.set` is a\n    // no-op (no emit) when the value is unchanged, so binding the same index\n    // does not fire `selectedIndexChange`.\n    effect(() => {\n      const legacy = this.selectedIndexInput();\n      if (legacy !== undefined) {\n        untracked(() => this.selectedIndex.set(legacy));\n      }\n    });\n\n    // Keep the selection valid when tabs are removed at runtime: falling off\n    // the end would leave no panel visible and no tab reachable via Tab.\n    effect(() => {\n      const count = this.tabs().length;\n      const index = untracked(() => this.selectedIndex());\n      if (count > 0 && index >= count) {\n        untracked(() => this.selectTab(this.getLastEnabledTab()));\n      }\n    });\n  }\n\n  /**\n   * Select a tab by index\n   */\n  selectTab(index: number): void {\n    const tabs = this.tabList();\n    const tab = tabs[index];\n    if (index >= 0 && index < tabs.length && tab && !tab.disabled()) {\n      this.selectedIndex.set(index);\n    }\n  }\n\n  /**\n   * Check if tab is selected\n   */\n  isSelected(index: number): boolean {\n    return this.selectedIndex() === index;\n  }\n\n  /**\n   * Handle keyboard navigation (automatic activation: focus and selection\n   * move together).\n   */\n  handleKeyDown(event: KeyboardEvent): void {\n    const currentIndex = this.selectedIndex();\n    let nextIndex = currentIndex;\n\n    const isHorizontal = this.orientation() === 'horizontal';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n    switch (event.key) {\n      case nextKey:\n        event.preventDefault();\n        nextIndex = this.getNextEnabledTab(currentIndex);\n        break;\n\n      case prevKey:\n        event.preventDefault();\n        nextIndex = this.getPreviousEnabledTab(currentIndex);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        nextIndex = this.getFirstEnabledTab();\n        break;\n\n      case 'End':\n        event.preventDefault();\n        nextIndex = this.getLastEnabledTab();\n        break;\n\n      default:\n        return;\n    }\n\n    if (nextIndex !== currentIndex) {\n      this.selectTab(nextIndex);\n      this.focusTab(nextIndex);\n    }\n  }\n\n  /**\n   * Get tabindex for tab button\n   */\n  getTabIndex(index: number): number {\n    return this.isSelected(index) ? 0 : -1;\n  }\n\n  /**\n   * Move DOM focus to the tab button at `index` (roving tabindex).\n   */\n  private focusTab(index: number): void {\n    this.tabButtons()[index]?.nativeElement.focus();\n  }\n\n  /**\n   * Get next enabled tab index (with wrapping)\n   */\n  private getNextEnabledTab(currentIndex: number): number {\n    const tabs = this.tabList();\n    let nextIndex = (currentIndex + 1) % tabs.length;\n    const startIndex = nextIndex;\n\n    while (tabs[nextIndex]?.disabled()) {\n      nextIndex = (nextIndex + 1) % tabs.length;\n      if (nextIndex === startIndex) {\n        return currentIndex; // No enabled tabs found\n      }\n    }\n\n    return nextIndex;\n  }\n\n  /**\n   * Get previous enabled tab index (with wrapping)\n   */\n  private getPreviousEnabledTab(currentIndex: number): number {\n    const tabs = this.tabList();\n    let prevIndex = currentIndex - 1;\n    if (prevIndex < 0) {\n      prevIndex = tabs.length - 1;\n    }\n    const startIndex = prevIndex;\n\n    while (tabs[prevIndex]?.disabled()) {\n      prevIndex = prevIndex - 1;\n      if (prevIndex < 0) {\n        prevIndex = tabs.length - 1;\n      }\n      if (prevIndex === startIndex) {\n        return currentIndex; // No enabled tabs found\n      }\n    }\n\n    return prevIndex;\n  }\n\n  /**\n   * Get first enabled tab index\n   */\n  private getFirstEnabledTab(): number {\n    const tabs = this.tabList();\n    for (let i = 0; i < tabs.length; i++) {\n      const tab = tabs[i];\n      if (tab && !tab.disabled()) {\n        return i;\n      }\n    }\n    return 0;\n  }\n\n  /**\n   * Get last enabled tab index\n   */\n  private getLastEnabledTab(): number {\n    const tabs = this.tabList();\n    for (let i = tabs.length - 1; i >= 0; i--) {\n      const tab = tabs[i];\n      if (tab && !tab.disabled()) {\n        return i;\n      }\n    }\n    return tabs.length - 1;\n  }\n}\n","<div\n  class=\"lc-tabs__container\"\n  [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n  [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused tab (roving tabindex) -->\n  <div\n    [ngClass]=\"tabListClasses()\"\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientation()\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    @for (tab of tabList(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"lc-tabs__tab\"\n        [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n        [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [attr.id]=\"tab.id\"\n        [attr.aria-selected]=\"isSelected(i)\"\n        [attr.aria-controls]=\"tab.panelId\"\n        [attr.aria-disabled]=\"tab.disabled() || null\"\n        [tabindex]=\"getTabIndex(i)\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(i)\"\n      >\n        {{ tab.label() }}\n        @if (tab.hasBadge()) {\n          <lc-badge\n            class=\"lc-tabs__badge\"\n            [variant]=\"tab.badgeVariant()\"\n            size=\"xs\"\n            [rounded]=\"true\"\n            >{{ tab.badge() }}</lc-badge\n          >\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"lc-tabs__panels\">\n    @for (tab of tabList(); track tab.id; let i = $index) {\n      <div\n        class=\"lc-tabs__panel\"\n        [class.lc-tabs__panel--active]=\"isSelected(i)\"\n        role=\"tabpanel\"\n        [attr.id]=\"tab.panelId\"\n        [attr.aria-labelledby]=\"tab.id\"\n        [attr.hidden]=\"!isSelected(i) || null\"\n        [tabindex]=\"0\"\n      >\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n"],"mappings":"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"}

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

@@ -177,7 +177,8 @@ var TimelineComponent = class TimelineComponent {
 					"variant",
 					"size",
 					"rounded",
-					"dot"
+					"dot",
+					"wrap"
 				]
 			},
 			{

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-timeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/timeline/timeline-templates.directive.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport type { TimelineItem } from './timeline.component';\n\n/** Template context for the per-item timeline templates. */\nexport interface TimelineTemplateContext {\n  $implicit: TimelineItem;\n}\n\n/**\n * Free content slot rendered below an entry's header line — arbitrary markup\n * per item (code block, prose, collapsible text, diff), not just a\n * description string. The template receives the item as `$implicit`.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineContent let-item>\n *     @if (item.state === 'failed') {\n *       <lc-code-block [code]=\"item.command\" language=\"bash\" />\n *     }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineContent]',\n  standalone: true,\n})\nexport class TimelineContentDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n\n/**\n * Live meta slot rendered right-aligned in an entry's header line — for\n * values the app keeps ticking itself (\"läuft seit 42 s\"). Takes precedence\n * over the item's static `meta` string.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineMeta let-item>\n *     @if (item.state === 'running') { {{ elapsed() }} }\n *     @else { {{ item.meta }} }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineMeta]',\n  standalone: true,\n})\nexport class TimelineMetaDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\nimport {\n  TimelineContentDirective,\n  TimelineMetaDirective,\n} from './timeline-templates.directive';\n\n/**\n * Semantic state of a timeline entry (e.g. one step of a run transcript).\n * Drives the marker color via the semantic tokens; `running` additionally\n * pulses (respecting `prefers-reduced-motion`).\n */\nexport type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';\n\n/** Heading level of the item titles (3.3, G-11). */\nexport type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface TimelineItem {\n  /** Optional stable identity for rendering (falls back to the list index). */\n  id?: string;\n  /** Title of the event */\n  title: string;\n  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */\n  titleMono?: string;\n  /** Optional badge label in the header line (e.g. \"Fehlgeschlagen\"). */\n  badge?: string;\n  /** Variant of the header badge. @default 'default' */\n  badgeVariant?: BadgeVariant;\n  /** Optional right-aligned header meta (duration / time). */\n  meta?: string;\n  /** Optional description */\n  description?: string;\n  /** Optional timestamp string */\n  timestamp?: string;\n  /**\n   * Machine-readable moment of the timestamp (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so\n   * „heute 18:05“ carries its exact date (3.3, G-11).\n   */\n  datetime?: string;\n  /** Optional icon name (heroicon) */\n  icon?: string;\n  /** Optional color for the dot/icon */\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  /**\n   * Semantic entry state — colors the marker from the semantic tokens and\n   * takes precedence over `color`. `running` pulses the marker.\n   */\n  state?: TimelineItemState;\n}\n\nexport type TimelineOrientation = 'vertical' | 'horizontal';\n\n/** Marker color class per entry state. */\nconst STATE_COLORS: Record<TimelineItemState, string> = {\n  success: 'success',\n  running: 'primary',\n  failed: 'error',\n  pending: 'neutral',\n};\n\n/**\n * Timeline component for chronological event display.\n *\n * Features:\n * - Vertical timeline with connecting line\n * - Semantic status colors per event (info, success, warning, error)\n * - Entry states (`success | running | failed | pending`); `running` pulses\n * - Composable header line: title + monospace suffix (`titleMono`) + badge\n *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the\n *   `lcTimelineMeta` template for live values)\n * - Free content per entry below the header via the `lcTimelineContent`\n *   template (code blocks, prose, diffs, …)\n * - Date and description display per item\n * - Icon support for timeline markers\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"events\"></lc-timeline>\n * ```\n */\n@Component({\n  selector: 'lc-timeline',\n  standalone: true,\n  imports: [IconComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './timeline.component.html',\n  styleUrls: ['./timeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimelineComponent {\n  /**\n   * List of timeline events.\n   */\n  items = input.required<TimelineItem[]>();\n\n  /**\n   * Layout orientation.\n   * @default 'vertical'\n   */\n  orientation = input<TimelineOrientation>('vertical');\n\n  /**\n   * Compact mode reduces spacing.\n   * @default false\n   */\n  compact = input<boolean>(false);\n\n  /**\n   * Heading level of the item titles (`h2`–`h6`), so each event is reachable\n   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,\n   * the look stays the same.\n   */\n  headingLevel = input<TimelineHeadingLevel | undefined>(undefined);\n\n  /** Optional per-item content template (below the header line). */\n  protected contentTemplate = contentChild(TimelineContentDirective);\n\n  /** Optional per-item live meta template (right-aligned in the header). */\n  protected metaTemplate = contentChild(TimelineMetaDirective);\n\n  protected timelineClasses = computed(() => {\n    return [\n      'timeline',\n      `timeline--${this.orientation()}`,\n      this.compact() ? 'timeline--compact' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected markerClasses(item: TimelineItem): string {\n    const color = item.state ? STATE_COLORS[item.state] : item.color || 'primary';\n    return [\n      'timeline__marker',\n      `timeline__marker--${color}`,\n      item.state === 'running' ? 'timeline__marker--running' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n}\n","<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-timeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/timeline/timeline-templates.directive.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport type { TimelineItem } from './timeline.component';\n\n/** Template context for the per-item timeline templates. */\nexport interface TimelineTemplateContext {\n  $implicit: TimelineItem;\n}\n\n/**\n * Free content slot rendered below an entry's header line — arbitrary markup\n * per item (code block, prose, collapsible text, diff), not just a\n * description string. The template receives the item as `$implicit`.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineContent let-item>\n *     @if (item.state === 'failed') {\n *       <lc-code-block [code]=\"item.command\" language=\"bash\" />\n *     }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineContent]',\n  standalone: true,\n})\nexport class TimelineContentDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n\n/**\n * Live meta slot rendered right-aligned in an entry's header line — for\n * values the app keeps ticking itself (\"läuft seit 42 s\"). Takes precedence\n * over the item's static `meta` string.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineMeta let-item>\n *     @if (item.state === 'running') { {{ elapsed() }} }\n *     @else { {{ item.meta }} }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineMeta]',\n  standalone: true,\n})\nexport class TimelineMetaDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\nimport {\n  TimelineContentDirective,\n  TimelineMetaDirective,\n} from './timeline-templates.directive';\n\n/**\n * Semantic state of a timeline entry (e.g. one step of a run transcript).\n * Drives the marker color via the semantic tokens; `running` additionally\n * pulses (respecting `prefers-reduced-motion`).\n */\nexport type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';\n\n/** Heading level of the item titles (3.3, G-11). */\nexport type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface TimelineItem {\n  /** Optional stable identity for rendering (falls back to the list index). */\n  id?: string;\n  /** Title of the event */\n  title: string;\n  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */\n  titleMono?: string;\n  /** Optional badge label in the header line (e.g. \"Fehlgeschlagen\"). */\n  badge?: string;\n  /** Variant of the header badge. @default 'default' */\n  badgeVariant?: BadgeVariant;\n  /** Optional right-aligned header meta (duration / time). */\n  meta?: string;\n  /** Optional description */\n  description?: string;\n  /** Optional timestamp string */\n  timestamp?: string;\n  /**\n   * Machine-readable moment of the timestamp (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so\n   * „heute 18:05“ carries its exact date (3.3, G-11).\n   */\n  datetime?: string;\n  /** Optional icon name (heroicon) */\n  icon?: string;\n  /** Optional color for the dot/icon */\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  /**\n   * Semantic entry state — colors the marker from the semantic tokens and\n   * takes precedence over `color`. `running` pulses the marker.\n   */\n  state?: TimelineItemState;\n}\n\nexport type TimelineOrientation = 'vertical' | 'horizontal';\n\n/** Marker color class per entry state. */\nconst STATE_COLORS: Record<TimelineItemState, string> = {\n  success: 'success',\n  running: 'primary',\n  failed: 'error',\n  pending: 'neutral',\n};\n\n/**\n * Timeline component for chronological event display.\n *\n * Features:\n * - Vertical timeline with connecting line\n * - Semantic status colors per event (info, success, warning, error)\n * - Entry states (`success | running | failed | pending`); `running` pulses\n * - Composable header line: title + monospace suffix (`titleMono`) + badge\n *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the\n *   `lcTimelineMeta` template for live values)\n * - Free content per entry below the header via the `lcTimelineContent`\n *   template (code blocks, prose, diffs, …)\n * - Date and description display per item\n * - Icon support for timeline markers\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"events\"></lc-timeline>\n * ```\n */\n@Component({\n  selector: 'lc-timeline',\n  standalone: true,\n  imports: [IconComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './timeline.component.html',\n  styleUrls: ['./timeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimelineComponent {\n  /**\n   * List of timeline events.\n   */\n  items = input.required<TimelineItem[]>();\n\n  /**\n   * Layout orientation.\n   * @default 'vertical'\n   */\n  orientation = input<TimelineOrientation>('vertical');\n\n  /**\n   * Compact mode reduces spacing.\n   * @default false\n   */\n  compact = input<boolean>(false);\n\n  /**\n   * Heading level of the item titles (`h2`–`h6`), so each event is reachable\n   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,\n   * the look stays the same.\n   */\n  headingLevel = input<TimelineHeadingLevel | undefined>(undefined);\n\n  /** Optional per-item content template (below the header line). */\n  protected contentTemplate = contentChild(TimelineContentDirective);\n\n  /** Optional per-item live meta template (right-aligned in the header). */\n  protected metaTemplate = contentChild(TimelineMetaDirective);\n\n  protected timelineClasses = computed(() => {\n    return [\n      'timeline',\n      `timeline--${this.orientation()}`,\n      this.compact() ? 'timeline--compact' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected markerClasses(item: TimelineItem): string {\n    const color = item.state ? STATE_COLORS[item.state] : item.color || 'primary';\n    return [\n      'timeline__marker',\n      `timeline__marker--${color}`,\n      item.state === 'running' ? 'timeline__marker--running' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n}\n","<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-app-shell.d.ts

@@ -17,9 +17,11 @@ import * as i0 from "@angular/core";
  *   whose pages use one). It spans to the window's right edge, so a page's
  *   right column docks there.
  * - `[shell-bottom-nav]` — the `lc-bottom-nav`, shown below 1024 px. The shell
- *   reserves its height at the end of the page (16 + 72 + 24 px plus the
- *   safe-area inset; `--lc-app-shell-bottom-clearance`), so it never covers
- *   content. With the horizon, the bar rests on the land instead.
+ *   reserves its real height at the end of the page: at least 112 px (16 + 72
+ *   + 24) plus the safe-area inset, more when the bar grows with the text size
+ *   (measured in the browser; `--lc-app-shell-bottom-clearance` overrides it),
+ *   so it never covers content. With the horizon, the bar rests on the land
+ *   instead, and the land grows with a taller bar (3.10.1, AS-31).
  * - `[shell-footer]` — e.g. a compact `lc-footer`; after the page, or with
  *   `horizon` in a row of its own below the horizon, painted in the land's
  *   colour (`--color-land-3`): the land grows by the footer's height, so
@@ -62,6 +64,9 @@ export declare class AppShellComponent {
    */
   readonly horizon: import("@angular/core").InputSignal<boolean>;
   protected readonly shellClasses: import("@angular/core").Signal<string>;
+  private readonly shell;
+  private readonly barSlot;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AppShellComponent, "lc-app-shell", never, {
     "horizon": {

package/types/lifecorner-angular-ui-kit-badge.d.ts

@@ -8,6 +8,7 @@ export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
  * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
  * - Multiple size options (xs, sm, md, lg)
  * - Pill-shaped rounded mode
+ * - Optional wrapping for long, sentence-like labels (`wrap`)
  * - Content projection for labels or count values
  *
  * @example
@@ -29,6 +30,16 @@ export declare class BadgeComponent {
    * @default false
    */
   dot: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Let a long label wrap onto centred lines instead of staying on one line:
+   * the fixed height becomes a minimum height, lines are 1.25 high, and the
+   * badge is never wider than its container (a word wider than the container
+   * breaks). With `rounded`, the corners keep the one-line pill radius, so a
+   * two-line badge isn't clipped by half-circle ends. A label that fits looks
+   * as before. Use it for sentence-like status labels (SI-15), not for counts.
+   * @default false
+   */
+  wrap: import("@angular/core").InputSignal<boolean>;
   /**
    * Computed CSS classes for the badge
    */
@@ -55,5 +66,10 @@ export declare class BadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-button.d.ts

@@ -139,6 +139,15 @@ export declare class ButtonComponent {
  * cannot be disabled or busy — render plain text or an `lc-button` for those
  * states. An `iconOnly` link needs an `aria-label`.
  *
+ * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default
+ * `break-word`): `anywhere` lets a single word wider than the button's line
+ * break inside the word, so the button stays inside its container (WCAG 1.4.10
+ * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an
+ * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a
+ * one-word button shrink with its neighbours, which is why the default stays
+ * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header
+ * actions and the next-step-card's narrow actions.
+ *
  * @example
  * ```html
  * <a lcButton variant="primary" size="lg" href="/de/neuigkeiten">Schau uns beim Bauen zu</a>

package/types/lifecorner-angular-ui-kit-header.d.ts

@@ -49,6 +49,10 @@ export type HeaderUserMenuTrigger = 'icon' | 'avatar';
  * - `[slot='end']` takes content at the end of the first row (e.g. a language
  *   link), `showUserMenu` hides the account menu, `titleTag` picks the title
  *   element (the page keeps its own `<h1>`), `sticky` can be switched off.
+ * - The end content (slot, theme button, context, account menu) is one group:
+ *   when it doesn't fit beside the logo and the title's longest word (200 %
+ *   text on a phone), it takes the end of a second row instead of covering the
+ *   brand or widening the page (3.10.1, AS-31). The subtitle ends with "…".
  * App shell ("Weite", kit 3.3):
  * - `variant="transparent"`: no background and no border, the header sits on
  *   the page (pair it with `[sticky]="false"`, a header without a surface