@lifecorner/angular-ui-kit 3.36.0 → 3.38.0

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-hero.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/hero/hero.component.ts","../../../../libs/angular-ui-kit/src/lib/hero/hero.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  computed,\n  viewChild,\n} from '@angular/core';\n\nexport type HeroColor =\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'accent-orange'\n  | 'accent-purple'\n  | 'accent-violet';\n\nexport type HeroSize = 'sm' | 'md' | 'lg';\nexport type HeroVariant = 'default' | 'slim' | 'light';\n\n/**\n * Width of the hero's content box.\n * - `full`: the content runs to the hero's own padding (default, as before 3.4)\n * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column\n *   (1024 px minus its 48 px sides, so at most 928 px), centred, while the\n *   background stays full-bleed\n */\nexport type HeroContentWidth = 'full' | 'lg';\n\n/** Heading level of `lc-hero`'s title (3.36): `h1`–`h6`, the same look at every level. */\nexport type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Ids of the title and label, set by `focusTitle()` (module counter, only at the call). */\nlet nextHeroId = 0;\n\n/**\n * Hero component for prominent page headers with gradient backgrounds.\n *\n * Features:\n * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)\n * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)\n * - Size options (sm, md, lg)\n * - Optional label text above the title\n * - Configurable border radius\n * - Content projection for body and footer sections\n * - Footer slot for metadata, stats, or CTAs\n * - Media slot (`[hero-media]`) for a visual: below the text on small screens,\n *   beside it from 1024 px, never under the body's 85 % opacity\n * - Content width `lg`: a full-bleed band whose text lines up with the page column\n * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level\n * - `focusTitle()` (3.36): moves focus to the title (`tabindex=\"-1\"`, out of the\n *   Tab order) after an action replaced the stage (WCAG 2.4.3)\n *\n * @example\n * ```html\n * <lc-hero label=\"MY APP\" title=\"Welcome\" color=\"primary\" variant=\"slim\">\n *   <p>Description text</p>\n *   <div hero-footer>Status: Active</div>\n * </lc-hero>\n *\n * <lc-hero title=\"Everything in view\" borderRadius=\"none\" contentWidth=\"lg\">\n *   <p>Description text</p>\n *   <lc-card hero-media variant=\"elevated\">…</lc-card>\n * </lc-hero>\n * ```\n */\n@Component({\n  selector: 'lc-hero',\n  standalone: true,\n  templateUrl: './hero.component.html',\n  styleUrls: ['./hero.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeroComponent {\n  /**\n   * Small uppercase label displayed above the title.\n   */\n  label = input<string | undefined>(undefined);\n\n  /**\n   * Main headline text.\n   */\n  title = input.required<string>();\n\n  /**\n   * Color theme for the gradient background.\n   * @default 'primary'\n   */\n  color = input<HeroColor>('primary');\n\n  /**\n   * Size variant controlling padding and font sizes.\n   * @default 'md'\n   */\n  size = input<HeroSize>('md');\n\n  /**\n   * Border radius of the hero container.\n   * @default 'lg'\n   */\n  borderRadius = input<'none' | 'sm' | 'md' | 'lg'>('lg');\n\n  /**\n   * Visual variant.\n   * - `default`: dark gradient with white text\n   * - `slim`: compact single-line banner\n   * - `light`: softer pastel gradient with dark text\n   * @default 'default'\n   */\n  variant = input<HeroVariant>('default');\n\n  /**\n   * Width of the content box. `lg` keeps the background full-bleed and, from\n   * 1024 px, puts the label, title, body, media and footer on the 1024 px page\n   * column (the `lc-container` `lg` content box), never closer to the edge than\n   * the size padding. Use it for a full-width band (`borderRadius=\"none\"`) whose\n   * text should line up with the page content below.\n   * @default 'full'\n   */\n  contentWidth = input<HeroContentWidth>('full');\n\n  /**\n   * Element of the title (`h1`–`h6`), so the hero fits the page's outline\n   * (3.36, cockpit row 1). Only the element changes: size, weight, line height\n   * and spacing are the same at every level, `size`, `variant` and breakpoint.\n   * Use 2 under an `lc-page-header`, which holds the page's `h1`.\n   * @default 1\n   */\n  headingLevel = input<HeroHeadingLevel>(1);\n\n  private readonly titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n  private readonly labelEl = viewChild<ElementRef<HTMLElement>>('labelEl');\n\n  /**\n   * Moves the focus to the title (3.36, monatsstand row 1), e.g. after an\n   * action replaced the stage and the button that was used is gone, so focus\n   * doesn't fall back to the page (WCAG 2.4.3). Gives the title\n   * `tabindex=\"-1\"` first: it stays out of the Tab order. With a `label`, the\n   * title is named \"label title\" (`aria-labelledby` on both, ids set at the\n   * call), so the label is read before it. Call it after the new state has\n   * rendered, e.g. `afterNextRender(() => this.hero().focusTitle(), { injector })`\n   * with `hero = viewChild.required(HeroComponent)`, as\n   * `lc-next-step-card.focusTitle()`. Without a call nothing changes.\n   */\n  focusTitle(): void {\n    const title = this.titleEl()?.nativeElement;\n    if (!title) return;\n    const label = this.labelEl()?.nativeElement;\n    if (label) {\n      title.id ||= `lc-hero-title-${++nextHeroId}`;\n      label.id ||= `lc-hero-label-${++nextHeroId}`;\n      title.setAttribute('aria-labelledby', `${label.id} ${title.id}`);\n    } else {\n      title.removeAttribute('aria-labelledby');\n    }\n    title.setAttribute('tabindex', '-1');\n    title.focus();\n  }\n\n  protected heroClasses = computed(() => {\n    return [\n      'hero',\n      `hero--${this.color()}`,\n      `hero--${this.size()}`,\n      `hero--radius-${this.borderRadius()}`,\n      `hero--${this.variant()}`,\n      `hero--content-${this.contentWidth()}`,\n    ].join(' ');\n  });\n}\n","<div [class]=\"heroClasses()\">\n  <div class=\"hero__inner\">\n    <div class=\"hero__content\">\n      @if (label()) {\n        <span #labelEl class=\"hero__label\">{{ label() }}</span>\n      }\n      <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n        }\n        @case (3) {\n          <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n        }\n        @case (4) {\n          <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n        }\n        @case (5) {\n          <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n        }\n        @case (6) {\n          <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n        }\n        @default {\n          <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n        }\n      }\n      <div class=\"hero__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"hero__media\">\n      <ng-content select=\"[hero-media]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-hero.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/hero/hero.component.ts","../../../../libs/angular-ui-kit/src/lib/hero/hero.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  input,\n  computed,\n  viewChild,\n} from '@angular/core';\n\nexport type HeroColor =\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'accent-orange'\n  | 'accent-purple'\n  | 'accent-violet';\n\nexport type HeroSize = 'sm' | 'md' | 'lg';\nexport type HeroVariant = 'default' | 'slim' | 'light';\n\n/**\n * Width of the hero's content box.\n * - `full`: the content runs to the hero's own padding (default, as before 3.4)\n * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column\n *   (1024 px minus its 48 px sides, so at most 928 px), centred, while the\n *   background stays full-bleed\n */\nexport type HeroContentWidth = 'full' | 'lg';\n\n/** Heading level of `lc-hero`'s title (3.36): `h1`–`h6`, the same look at every level. */\nexport type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Ids of the title and label, set by `focusTitle()` (module counter, only at the call). */\nlet nextHeroId = 0;\n\n/**\n * Hero component for prominent page headers with gradient backgrounds.\n *\n * Features:\n * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)\n * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)\n * - Size options (sm, md, lg)\n * - Optional label text above the title\n * - Configurable border radius\n * - Content projection for body and footer sections\n * - Footer slot for metadata, stats, or CTAs\n * - Media slot (`[hero-media]`) for a visual: below the text on small screens,\n *   beside it from 1024 px\n * - 3.37: components in the default slot keep full opacity (no `opacity` on\n *   the slot), and badges in a hero take the light palette in both themes;\n *   `fill` takes the height of a stretching grid or flex row\n * - 3.38: label, title and body are white at full strength on every default\n *   band (4.58:1 or more); five bands are darker at their light end\n * - Content width `lg`: a full-bleed band whose text lines up with the page column\n * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level\n * - `focusTitle()` (3.36): moves focus to the title (`tabindex=\"-1\"`, out of the\n *   Tab order) after an action replaced the stage (WCAG 2.4.3)\n *\n * @example\n * ```html\n * <lc-hero label=\"MY APP\" title=\"Welcome\" color=\"primary\" variant=\"slim\">\n *   <p>Description text</p>\n *   <div hero-footer>Status: Active</div>\n * </lc-hero>\n *\n * <lc-hero title=\"Everything in view\" borderRadius=\"none\" contentWidth=\"lg\">\n *   <p>Description text</p>\n *   <lc-card hero-media variant=\"elevated\">…</lc-card>\n * </lc-hero>\n * ```\n */\n@Component({\n  selector: 'lc-hero',\n  standalone: true,\n  templateUrl: './hero.component.html',\n  styleUrls: ['./hero.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-hero--fill]': 'fill()',\n  },\n})\nexport class HeroComponent {\n  /**\n   * Small uppercase label displayed above the title.\n   */\n  label = input<string | undefined>(undefined);\n\n  /**\n   * Main headline text.\n   */\n  title = input.required<string>();\n\n  /**\n   * Color theme for the gradient background.\n   * @default 'primary'\n   */\n  color = input<HeroColor>('primary');\n\n  /**\n   * Size variant controlling padding and font sizes.\n   * @default 'md'\n   */\n  size = input<HeroSize>('md');\n\n  /**\n   * Border radius of the hero container.\n   * @default 'lg'\n   */\n  borderRadius = input<'none' | 'sm' | 'md' | 'lg'>('lg');\n\n  /**\n   * Visual variant.\n   * - `default`: dark gradient with white text\n   * - `slim`: compact single-line banner\n   * - `light`: softer pastel gradient with dark text\n   * @default 'default'\n   */\n  variant = input<HeroVariant>('default');\n\n  /**\n   * Width of the content box. `lg` keeps the background full-bleed and, from\n   * 1024 px, puts the label, title, body, media and footer on the 1024 px page\n   * column (the `lc-container` `lg` content box), never closer to the edge than\n   * the size padding. Use it for a full-width band (`borderRadius=\"none\"`) whose\n   * text should line up with the page content below.\n   * @default 'full'\n   */\n  contentWidth = input<HeroContentWidth>('full');\n\n  /**\n   * Element of the title (`h1`–`h6`), so the hero fits the page's outline\n   * (3.36, cockpit row 1). Only the element changes: size, weight, line height\n   * and spacing are the same at every level, `size`, `variant` and breakpoint.\n   * Use 2 under an `lc-page-header`, which holds the page's `h1`.\n   * @default 1\n   */\n  headingLevel = input<HeroHeadingLevel>(1);\n\n  /**\n   * Fill the height the container gives the hero (3.37, cockpit row 1): in a\n   * grid or flex row that stretches its items, the band ends at the row's\n   * bottom edge; the content stays at the top and `[hero-footer]` sits at the\n   * bottom. Without it the hero is as tall as its content.\n   * @default false\n   */\n  fill = input(false, { transform: booleanAttribute });\n\n  private readonly titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n  private readonly labelEl = viewChild<ElementRef<HTMLElement>>('labelEl');\n\n  /**\n   * Moves the focus to the title (3.36, monatsstand row 1), e.g. after an\n   * action replaced the stage and the button that was used is gone, so focus\n   * doesn't fall back to the page (WCAG 2.4.3). Gives the title\n   * `tabindex=\"-1\"` first: it stays out of the Tab order. With a `label`, the\n   * title is named \"label title\" (`aria-labelledby` on both, ids set at the\n   * call), so the label is read before it. Call it after the new state has\n   * rendered, e.g. `afterNextRender(() => this.hero().focusTitle(), { injector })`\n   * with `hero = viewChild.required(HeroComponent)`, as\n   * `lc-next-step-card.focusTitle()`. Without a call nothing changes.\n   */\n  focusTitle(): void {\n    const title = this.titleEl()?.nativeElement;\n    if (!title) return;\n    const label = this.labelEl()?.nativeElement;\n    if (label) {\n      title.id ||= `lc-hero-title-${++nextHeroId}`;\n      label.id ||= `lc-hero-label-${++nextHeroId}`;\n      title.setAttribute('aria-labelledby', `${label.id} ${title.id}`);\n    } else {\n      title.removeAttribute('aria-labelledby');\n    }\n    title.setAttribute('tabindex', '-1');\n    title.focus();\n  }\n\n  protected heroClasses = computed(() => {\n    return [\n      'hero',\n      `hero--${this.color()}`,\n      `hero--${this.size()}`,\n      `hero--radius-${this.borderRadius()}`,\n      `hero--${this.variant()}`,\n      `hero--content-${this.contentWidth()}`,\n    ].join(' ');\n  });\n}\n","<div [class]=\"heroClasses()\">\n  <div class=\"hero__inner\">\n    <div class=\"hero__content\">\n      @if (label()) {\n        <span #labelEl class=\"hero__label\">{{ label() }}</span>\n      }\n      <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n        }\n        @case (3) {\n          <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n        }\n        @case (4) {\n          <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n        }\n        @case (5) {\n          <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n        }\n        @case (6) {\n          <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n        }\n        @default {\n          <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n        }\n      }\n      <div class=\"hero__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"hero__media\">\n      <ng-content select=\"[hero-media]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs

@@ -32,8 +32,8 @@ function readableInk(fill) {
 const CHART_PALETTE = [
 	"var(--color-primary-500)",
 	"var(--color-secondary-500)",
-	"var(--color-success-default)",
-	"var(--color-warning-default)",
+	"var(--color-text-success)",
+	"var(--color-text-warning)",
 	"var(--color-error-default)",
 	"var(--color-info-default)",
 	"var(--color-primary-700)",

package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-internal-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-color.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-palette.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-path.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-scale.ts"],"sourcesContent":["/**\n * Colour helpers for text drawn on top of chart fills.\n */\n\n/** Parses `#rgb`, `#rrggbb`, `rgb()` and `rgba()`. Anything else → null. */\nexport function parseRgb(color: string): [number, number, number] | null {\n  const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (hex) {\n    const h = hex[1];\n    const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h;\n    return [0, 2, 4].map(i => parseInt(full.slice(i, i + 2), 16)) as [number, number, number];\n  }\n  const rgb = color.match(/^rgba?\\(([^)]+)\\)/i);\n  if (rgb) {\n    const p = rgb[1].split(',').map(s => parseFloat(s));\n    if (p.length >= 3 && p.every(n => !Number.isNaN(n))) return [p[0], p[1], p[2]];\n  }\n  return null;\n}\n\n/**\n * Ink that stays readable on `fill`, or `null` when that cannot be decided.\n *\n * A literal colour (`#…`, `rgb()`) is measured by its relative luminance and\n * gets a dark or light ink. A `var(--…)` token can't be resolved without the\n * DOM — and its resolution flips with the theme — so `null` is returned and\n * the caller should draw the label in `--color-text-primary` with a\n * `--color-surface` halo (`paint-order: stroke`), which reads on any fill in\n * both themes.\n */\nexport function readableInk(fill: string): string | null {\n  const rgb = parseRgb(fill);\n  if (!rgb) return null;\n  const [r, g, b] = rgb.map(c => {\n    const s = c / 255;\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);\n  });\n  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n  return luminance > 0.4 ? '#111827' : '#f9fafb';\n}\n","/**\n * Default categorical palette for the chart family.\n *\n * Every entry is a theme token whose light *and* dark resolutions sit clearly\n * against `--color-surface`: the 500 brand shades and the status defaults flip\n * to their pastel tints in the dark theme, the 700 shades to their light tints,\n * so consecutive hues stay distinguishable on both themes. (The 300 shades and\n * `-light` status tints some charts used before resolve to dark, low-contrast\n * colours on the dark theme, which is why they are not in this list.)\n *\n * Charts fall back to this list when a series/segment brings no `color` of its\n * own; per-item colours always win.\n */\nexport const CHART_PALETTE: readonly string[] = [\n  'var(--color-primary-500)',\n  'var(--color-secondary-500)',\n  'var(--color-success-default)',\n  'var(--color-warning-default)',\n  'var(--color-error-default)',\n  'var(--color-info-default)',\n  'var(--color-primary-700)',\n  'var(--color-secondary-700)',\n];\n\n/** Palette colour for the series/segment at `index`, wrapping around. */\nexport function chartColor(index: number): string {\n  return CHART_PALETTE[index % CHART_PALETTE.length];\n}\n","/**\n * SVG path builders shared by the line-shaped charts (line, area, sparkline).\n */\n\nexport interface ChartPoint {\n  x: number;\n  y: number;\n}\n\n/** `M x,y L x,y …` polyline through the points; '' for fewer than two points. */\nexport function linearPath(points: readonly ChartPoint[]): string {\n  if (points.length < 2) return '';\n  return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');\n}\n\n/**\n * Smooth cubic path through the points (Catmull-Rom → Bézier approximation);\n * '' for fewer than two points.\n */\nexport function smoothPath(points: readonly ChartPoint[]): string {\n  if (points.length < 2) return '';\n  let d = `M${points[0].x},${points[0].y}`;\n  for (let i = 0; i < points.length - 1; i++) {\n    const p0 = points[Math.max(i - 1, 0)];\n    const p1 = points[i];\n    const p2 = points[i + 1];\n    const p3 = points[Math.min(i + 2, points.length - 1)];\n    const cp1x = p1.x + (p2.x - p0.x) / 6;\n    const cp1y = p1.y + (p2.y - p0.y) / 6;\n    const cp2x = p2.x - (p3.x - p1.x) / 6;\n    const cp2y = p2.y - (p3.y - p1.y) / 6;\n    d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;\n  }\n  return d;\n}\n","/**\n * Numeric helpers shared by the chart family: a \"nice\" linear scale for axes\n * and grids, float-safe value formatting, and a NaN guard for caller data.\n *\n * Every chart used to place its grid on its own ad-hoc rounding\n * (`Math.ceil(max / 4)`, `Math.round(v * 10) / 10`, `toFixed`), which let the\n * top tick disagree with the value at the plot edge and leaked binary float\n * noise (`0.30000000000000004`) into tick labels. This module is the one\n * routine they all go through instead.\n */\n\n/** Signature of a chart's `formatValue` input. */\nexport type ChartValueFormatter = (value: number) => string;\n\n/** `value` if it is a finite number, otherwise `fallback` (NaN, ±Infinity, undefined, null…). */\nexport function toFinite(value: unknown, fallback = 0): number {\n  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n}\n\n/** Strips binary float noise (0.1 + 0.2 → 0.3) and normalises -0 to 0. */\nexport function cleanNumber(value: number): number {\n  if (!Number.isFinite(value)) return 0;\n  const v = Number(value.toPrecision(12));\n  return v === 0 ? 0 : v;\n}\n\n/** Default tick/value formatter: float-clean `String(value)`, no locale, no unit. */\nexport function formatChartValue(value: number): string {\n  return String(cleanNumber(value));\n}\n\nexport interface NiceScale {\n  /** Lower bound — a multiple of `step`, ≤ the requested min. */\n  min: number;\n  /** Upper bound — a multiple of `step`, ≥ the requested max. */\n  max: number;\n  /** Tick interval: 1, 2, 2.5 or 5 × 10ⁿ. */\n  step: number;\n  /** All tick values from `min` to `max` inclusive. */\n  ticks: number[];\n}\n\n/** Rounds a raw interval up to the nearest 1, 2, 2.5 or 5 × 10ⁿ. */\nexport function niceStep(raw: number): number {\n  if (!Number.isFinite(raw) || raw <= 0) return 1;\n  const magnitude = Math.pow(10, Math.floor(Math.log10(raw)));\n  const fraction = raw / magnitude;\n  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;\n  return cleanNumber(nice * magnitude);\n}\n\n/**\n * Linear scale whose bounds are multiples of a nice step, so every tick label\n * is a round number and the outermost ticks equal the values at the plot\n * edges. Bounds are only ever extended outward, never shrunk. A degenerate\n * range (`min === max`) is widened towards zero, or to [0, 1] when both are 0.\n *\n * `intervals` is the *target* number of steps; the result may have one more\n * or fewer because the bounds snap to the step.\n */\nexport function niceScale(min: number, max: number, intervals = 4): NiceScale {\n  let lo = Math.min(toFinite(min), toFinite(max));\n  let hi = Math.max(toFinite(min), toFinite(max));\n  if (lo === hi) {\n    if (lo > 0) lo = 0;\n    else if (lo < 0) hi = 0;\n    else hi = 1;\n  }\n  const step = niceStep((hi - lo) / Math.max(1, intervals));\n  // cleanNumber before floor/ceil: 0.3 / 0.1 is 2.9999999999999996, which would\n  // otherwise floor to 2 and pull the bound one step too far out.\n  const niceMin = cleanNumber(Math.floor(cleanNumber(lo / step)) * step);\n  const niceMax = cleanNumber(Math.ceil(cleanNumber(hi / step)) * step);\n  const count = Math.round((niceMax - niceMin) / step);\n  const ticks: number[] = [];\n  for (let i = 0; i <= count; i++) ticks.push(cleanNumber(niceMin + i * step));\n  return { min: niceMin, max: niceMax, step, ticks };\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-internal-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-color.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-palette.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-path.ts","../../../../libs/angular-ui-kit/src/lib/internal/chart/chart-scale.ts"],"sourcesContent":["/**\n * Colour helpers for text drawn on top of chart fills.\n */\n\n/** Parses `#rgb`, `#rrggbb`, `rgb()` and `rgba()`. Anything else → null. */\nexport function parseRgb(color: string): [number, number, number] | null {\n  const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (hex) {\n    const h = hex[1];\n    const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h;\n    return [0, 2, 4].map(i => parseInt(full.slice(i, i + 2), 16)) as [number, number, number];\n  }\n  const rgb = color.match(/^rgba?\\(([^)]+)\\)/i);\n  if (rgb) {\n    const p = rgb[1].split(',').map(s => parseFloat(s));\n    if (p.length >= 3 && p.every(n => !Number.isNaN(n))) return [p[0], p[1], p[2]];\n  }\n  return null;\n}\n\n/**\n * Ink that stays readable on `fill`, or `null` when that cannot be decided.\n *\n * A literal colour (`#…`, `rgb()`) is measured by its relative luminance and\n * gets a dark or light ink. A `var(--…)` token can't be resolved without the\n * DOM — and its resolution flips with the theme — so `null` is returned and\n * the caller should draw the label in `--color-text-primary` with a\n * `--color-surface` halo (`paint-order: stroke`), which reads on any fill in\n * both themes.\n */\nexport function readableInk(fill: string): string | null {\n  const rgb = parseRgb(fill);\n  if (!rgb) return null;\n  const [r, g, b] = rgb.map(c => {\n    const s = c / 255;\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);\n  });\n  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n  return luminance > 0.4 ? '#111827' : '#f9fafb';\n}\n","/**\n * Default categorical palette for the chart family.\n *\n * Every entry is a theme token whose light *and* dark resolutions sit clearly\n * against `--color-surface`: the 500 brand shades and the status defaults flip\n * to their pastel tints in the dark theme, the 700 shades to their light tints,\n * so consecutive hues stay distinguishable on both themes. (The 300 shades and\n * `-light` status tints some charts used before resolve to dark, low-contrast\n * colours on the dark theme, which is why they are not in this list.)\n *\n * Charts fall back to this list when a series/segment brings no `color` of its\n * own; per-item colours always win.\n *\n * 3.37 (request 057, 056 F-1, WCAG 1.4.11): entries 3 and 4 are the status\n * inks, not the status fills. `--color-success-default` measured 2.47–2.72:1\n * and `--color-warning-default` 2.05–2.26:1 on light pages; the inks reach\n * 5.30 and 6.03:1 there (8.40 and 7.65:1 dark). Every entry keeps 3:1 against\n * `--color-background` and `--color-surface` in both themes.\n */\nexport const CHART_PALETTE: readonly string[] = [\n  'var(--color-primary-500)',\n  'var(--color-secondary-500)',\n  'var(--color-text-success)',\n  'var(--color-text-warning)',\n  'var(--color-error-default)',\n  'var(--color-info-default)',\n  'var(--color-primary-700)',\n  'var(--color-secondary-700)',\n];\n\n/** Palette colour for the series/segment at `index`, wrapping around. */\nexport function chartColor(index: number): string {\n  return CHART_PALETTE[index % CHART_PALETTE.length];\n}\n","/**\n * SVG path builders shared by the line-shaped charts (line, area, sparkline).\n */\n\nexport interface ChartPoint {\n  x: number;\n  y: number;\n}\n\n/** `M x,y L x,y …` polyline through the points; '' for fewer than two points. */\nexport function linearPath(points: readonly ChartPoint[]): string {\n  if (points.length < 2) return '';\n  return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');\n}\n\n/**\n * Smooth cubic path through the points (Catmull-Rom → Bézier approximation);\n * '' for fewer than two points.\n */\nexport function smoothPath(points: readonly ChartPoint[]): string {\n  if (points.length < 2) return '';\n  let d = `M${points[0].x},${points[0].y}`;\n  for (let i = 0; i < points.length - 1; i++) {\n    const p0 = points[Math.max(i - 1, 0)];\n    const p1 = points[i];\n    const p2 = points[i + 1];\n    const p3 = points[Math.min(i + 2, points.length - 1)];\n    const cp1x = p1.x + (p2.x - p0.x) / 6;\n    const cp1y = p1.y + (p2.y - p0.y) / 6;\n    const cp2x = p2.x - (p3.x - p1.x) / 6;\n    const cp2y = p2.y - (p3.y - p1.y) / 6;\n    d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;\n  }\n  return d;\n}\n","/**\n * Numeric helpers shared by the chart family: a \"nice\" linear scale for axes\n * and grids, float-safe value formatting, and a NaN guard for caller data.\n *\n * Every chart used to place its grid on its own ad-hoc rounding\n * (`Math.ceil(max / 4)`, `Math.round(v * 10) / 10`, `toFixed`), which let the\n * top tick disagree with the value at the plot edge and leaked binary float\n * noise (`0.30000000000000004`) into tick labels. This module is the one\n * routine they all go through instead.\n */\n\n/** Signature of a chart's `formatValue` input. */\nexport type ChartValueFormatter = (value: number) => string;\n\n/** `value` if it is a finite number, otherwise `fallback` (NaN, ±Infinity, undefined, null…). */\nexport function toFinite(value: unknown, fallback = 0): number {\n  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n}\n\n/** Strips binary float noise (0.1 + 0.2 → 0.3) and normalises -0 to 0. */\nexport function cleanNumber(value: number): number {\n  if (!Number.isFinite(value)) return 0;\n  const v = Number(value.toPrecision(12));\n  return v === 0 ? 0 : v;\n}\n\n/** Default tick/value formatter: float-clean `String(value)`, no locale, no unit. */\nexport function formatChartValue(value: number): string {\n  return String(cleanNumber(value));\n}\n\nexport interface NiceScale {\n  /** Lower bound — a multiple of `step`, ≤ the requested min. */\n  min: number;\n  /** Upper bound — a multiple of `step`, ≥ the requested max. */\n  max: number;\n  /** Tick interval: 1, 2, 2.5 or 5 × 10ⁿ. */\n  step: number;\n  /** All tick values from `min` to `max` inclusive. */\n  ticks: number[];\n}\n\n/** Rounds a raw interval up to the nearest 1, 2, 2.5 or 5 × 10ⁿ. */\nexport function niceStep(raw: number): number {\n  if (!Number.isFinite(raw) || raw <= 0) return 1;\n  const magnitude = Math.pow(10, Math.floor(Math.log10(raw)));\n  const fraction = raw / magnitude;\n  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;\n  return cleanNumber(nice * magnitude);\n}\n\n/**\n * Linear scale whose bounds are multiples of a nice step, so every tick label\n * is a round number and the outermost ticks equal the values at the plot\n * edges. Bounds are only ever extended outward, never shrunk. A degenerate\n * range (`min === max`) is widened towards zero, or to [0, 1] when both are 0.\n *\n * `intervals` is the *target* number of steps; the result may have one more\n * or fewer because the bounds snap to the step.\n */\nexport function niceScale(min: number, max: number, intervals = 4): NiceScale {\n  let lo = Math.min(toFinite(min), toFinite(max));\n  let hi = Math.max(toFinite(min), toFinite(max));\n  if (lo === hi) {\n    if (lo > 0) lo = 0;\n    else if (lo < 0) hi = 0;\n    else hi = 1;\n  }\n  const step = niceStep((hi - lo) / Math.max(1, intervals));\n  // cleanNumber before floor/ceil: 0.3 / 0.1 is 2.9999999999999996, which would\n  // otherwise floor to 2 and pull the bound one step too far out.\n  const niceMin = cleanNumber(Math.floor(cleanNumber(lo / step)) * step);\n  const niceMax = cleanNumber(Math.ceil(cleanNumber(hi / step)) * step);\n  const count = Math.round((niceMax - niceMin) / step);\n  const ticks: number[] = [];\n  for (let i = 0; i <= count; i++) ticks.push(cleanNumber(niceMin + i * step));\n  return { min: niceMin, max: niceMax, step, ticks };\n}\n"],"mappings":"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"}

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

@@ -36,6 +36,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+let nextListId = 0;
 var ListComponent = class ListComponent {
 	itemTemplate = contentChild(ListItemTemplateDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
 	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
@@ -65,9 +66,13 @@ var ListComponent = class ListComponent {
 		this.pendingItemFocus = afterNextRender(() => {
 			this.pendingItemFocus = void 0;
 			const index = (this.items() ?? []).findIndex((item) => item.id === id);
-			((index < 0 ? null : this.listEl()?.nativeElement.children.item(index))?.querySelector(part === "action" ? ".lc-list__action-area button" : "a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true])"))?.focus();
+			((index < 0 ? null : this.listEl()?.nativeElement.children.item(index))?.querySelector(part === "action" ? ".lc-list__action-area button" : "a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true]), .lc-list__item-button:not([aria-disabled=true])"))?.focus();
 		}, { injector: this.injector });
 	}
+	uid = `lc-list-${nextListId++}`;
+	rowId(index) {
+		return `${this.uid}-row-${index}`;
+	}
 	isLinkRow(item) {
 		return !!item.href && !item.disabled;
 	}
@@ -217,8 +222,8 @@ var ListComponent = class ListComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
-		styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__chevron{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__chevron:dir(rtl){transform:scaleX(-1)}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"],
+		template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index; let i = $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable() && item.action && !itemTemplate()) {\n      <!-- 3.37 (request 057, 056 F-2): a clickable row with an action keeps the\n           action out of the row's button. The row's native button is stretched\n           over the row and named by it; the action area sits above it. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the row's native button is the control; its Enter/Space click bubbles here -->\n        <div [class]=\"getItemClasses(item) + ' lc-list__item--split'\" [id]=\"rowId(i)\" (click)=\"onItemClick(item)\">\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's text); text inside would repeat it -->\n          <button\n            type=\"button\"\n            class=\"lc-list__item-button\"\n            [attr.aria-labelledby]=\"rowId(i)\"\n            [attr.tabindex]=\"item.disabled ? -1 : null\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [attr.aria-current]=\"item.selected ? 'true' : null\"\n          ></button>\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+		styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;hyphens:auto;hyphenate-limit-chars:12 4 3;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__chevron{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__chevron:dir(rtl){transform:scaleX(-1)}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__item--split{position:relative;isolation:isolate}.lc-list__item-button{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:inherit;background:none;font:inherit;color:inherit;cursor:inherit;outline:none}.lc-list__item--split .lc-list__action-area{position:relative;z-index:1}.lc-list__item:has(>.lc-list__item-button:focus-visible){box-shadow:inset 0 0 0 2px var(--color-primary-500)}@media(forced-colors:active){.lc-list__item:has(>.lc-list__item-button:focus-visible){outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -292,8 +297,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT])],
-			template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
-			styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__chevron{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__chevron:dir(rtl){transform:scaleX(-1)}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"]
+			template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index; let i = $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable() && item.action && !itemTemplate()) {\n      <!-- 3.37 (request 057, 056 F-2): a clickable row with an action keeps the\n           action out of the row's button. The row's native button is stretched\n           over the row and named by it; the action area sits above it. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the row's native button is the control; its Enter/Space click bubbles here -->\n        <div [class]=\"getItemClasses(item) + ' lc-list__item--split'\" [id]=\"rowId(i)\" (click)=\"onItemClick(item)\">\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's text); text inside would repeat it -->\n          <button\n            type=\"button\"\n            class=\"lc-list__item-button\"\n            [attr.aria-labelledby]=\"rowId(i)\"\n            [attr.tabindex]=\"item.disabled ? -1 : null\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [attr.aria-current]=\"item.selected ? 'true' : null\"\n          ></button>\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+			styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;hyphens:auto;hyphenate-limit-chars:12 4 3;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__chevron{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__chevron:dir(rtl){transform:scaleX(-1)}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__item--split{position:relative;isolation:isolate}.lc-list__item-button{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:inherit;background:none;font:inherit;color:inherit;cursor:inherit;outline:none}.lc-list__item--split .lc-list__action-area{position:relative;z-index:1}.lc-list__item:has(>.lc-list__item-button:focus-visible){box-shadow:inset 0 0 0 2px var(--color-primary-500)}@media(forced-colors:active){.lc-list__item:has(>.lc-list__item-button:focus-visible){outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  AfterRenderRef,\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  Injector,\n  input,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  isDevMode,\n  output,\n  viewChild,\n  afterNextRender,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT } from '@lifecorner/angular-ui-kit/icons';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /**\n   * URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n   * full area (at least 44 px high) with real link semantics (middle click,\n   * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n   * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n   * `disabled` the row is the plain disabled row, no link. A custom\n   * `lcListItem` template must not hold controls in `href` rows.\n   */\n  href?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /**\n   * Whether the item is the current choice: a tinted row and, since 3.33,\n   * `aria-current=\"true\"` on the row element (the button with `clickable`,\n   * the link with `href`, the row otherwise). Pair it with a visible mark such\n   * as a badge; the tint alone is colour.\n   */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n */\nexport interface ListLinkClickEvent {\n  item: ListItem;\n  event: MouseEvent;\n}\n\n/**\n * The part of a row that `focusItem()` focuses (3.34): `row`, the row's\n * button (`clickable`) or link (`href`), or `action`, its built-in action\n * button.\n */\nexport type ListItemPart = 'row' | 'action';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n *   `linkClick` hands plain clicks to your router\n * - `focusItem(id, part)` (3.34): moves the focus to a row's button or link,\n *   or to its action, e.g. when the sheet that action opened closes\n *   (WCAG 2.4.3)\n * - `showChevron` (3.36): a decorative chevron at the end of every\n *   `clickable` or `href` row\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT])],\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /**\n   * Ends every row that opens something, a `clickable` row or an `href` row,\n   * with the kit's `chevron-right` (20 px, `--color-text-tertiary`) after its\n   * badge, metadata and action (3.36, quellen row 3). Decorative: hidden from\n   * screen readers. Plain rows get none, and neither do rows drawn by an\n   * `lcListItem` template (add the icon to the template there). Row height,\n   * target size, focus ring, badge and `actionClick` don't change.\n   * @default false\n   */\n  showChevron = input<boolean>(false);\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * A plain click (or Enter) on an `href` row: primary button, no\n   * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n   * link; call `event.preventDefault()` and navigate with your router for an\n   * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n   * the default; modifier and middle clicks are never emitted, so \"open in new\n   * tab\" keeps working.\n   */\n  readonly linkClick = output<ListLinkClickEvent>();\n\n  private readonly injector = inject(Injector);\n\n  /** The `role=\"list\"` element; each item renders exactly one child of it. */\n  private readonly listEl = viewChild<ElementRef<HTMLElement>>('listEl');\n\n  /** The `focusItem()` hook waiting for the next render. */\n  private pendingItemFocus?: AfterRenderRef;\n\n  constructor() {\n    effect(() => {\n      if (!isDevMode()) return;\n      // `items` may be bound to undefined (tolerated since 3.2).\n      for (const item of this.items() ?? []) {\n        if (this.isLinkRow(item) && item.action) {\n          console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n        }\n      }\n    });\n  }\n\n  /**\n   * Moves the focus into the row of the first item with this `id` after the\n   * next render (3.34). `'row'`: the row's button (`clickable`) or link\n   * (`href`). `'action'`: its built-in action button. Does nothing for an\n   * unknown `id`, for a row without that part (a plain row, a disabled row for\n   * `'row'`, no `action`, an `lcListItem` template's own controls), or when\n   * the list is destroyed first. A second call before that render replaces the\n   * first.\n   * @param id The `ListItem.id` of the row.\n   * @param part Which part of the row gets the focus.\n   */\n  focusItem(id: string, part: ListItemPart = 'row'): void {\n    this.pendingItemFocus?.destroy();\n    this.pendingItemFocus = afterNextRender(\n      () => {\n        this.pendingItemFocus = undefined;\n        const index = (this.items() ?? []).findIndex((item) => item.id === id);\n        const row = index < 0 ? null : this.listEl()?.nativeElement.children.item(index);\n        // querySelector skips the row element itself, so a plain row matches nothing.\n        const target = row?.querySelector<HTMLElement>(\n          part === 'action'\n            ? '.lc-list__action-area button'\n            : 'a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true])',\n        );\n        target?.focus();\n      },\n      { injector: this.injector },\n    );\n  }\n\n  /** Whether a row renders as a link: `href` set and not disabled. */\n  protected isLinkRow(item: ListItem): boolean {\n    return !!item.href && !item.disabled;\n  }\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n\n  /**\n   * A click on a link row: only a plain primary click reaches `linkClick`.\n   * The default (following the link) is left to the browser and the consumer.\n   */\n  protected onLinkClick(event: MouseEvent, item: ListItem): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;\n    this.linkClick.emit({ item, event });\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  AfterRenderRef,\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  Injector,\n  input,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  isDevMode,\n  output,\n  viewChild,\n  afterNextRender,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT } from '@lifecorner/angular-ui-kit/icons';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/** Counter for generated row ids: they follow creation order, so prerendered HTML is the same in every build. */\nlet nextListId = 0;\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /**\n   * URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n   * full area (at least 44 px high) with real link semantics (middle click,\n   * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n   * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n   * `disabled` the row is the plain disabled row, no link. A custom\n   * `lcListItem` template must not hold controls in `href` rows.\n   */\n  href?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /**\n   * Whether the item is the current choice: a tinted row and, since 3.33,\n   * `aria-current=\"true\"` on the row element (the button with `clickable`,\n   * the link with `href`, the row otherwise). Pair it with a visible mark such\n   * as a badge; the tint alone is colour.\n   */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n */\nexport interface ListLinkClickEvent {\n  item: ListItem;\n  event: MouseEvent;\n}\n\n/**\n * The part of a row that `focusItem()` focuses (3.34): `row`, the row's\n * button (`clickable`) or link (`href`), or `action`, its built-in action\n * button.\n */\nexport type ListItemPart = 'row' | 'action';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n *   `linkClick` hands plain clicks to your router\n * - `focusItem(id, part)` (3.34): moves the focus to a row's button or link,\n *   or to its action, e.g. when the sheet that action opened closes\n *   (WCAG 2.4.3)\n * - `showChevron` (3.36): a decorative chevron at the end of every\n *   `clickable` or `href` row\n * - 3.37: a `clickable` row with an `action` holds a native button stretched\n *   over the row (named by the row) beside its action, so no control sits\n *   inside another (WCAG 4.1.2); one Tab stop for the row, then the action\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT])],\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /**\n   * Ends every row that opens something, a `clickable` row or an `href` row,\n   * with the kit's `chevron-right` (20 px, `--color-text-tertiary`) after its\n   * badge, metadata and action (3.36, quellen row 3). Decorative: hidden from\n   * screen readers. Plain rows get none, and neither do rows drawn by an\n   * `lcListItem` template (add the icon to the template there). Row height,\n   * target size, focus ring, badge and `actionClick` don't change.\n   * @default false\n   */\n  showChevron = input<boolean>(false);\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * A plain click (or Enter) on an `href` row: primary button, no\n   * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n   * link; call `event.preventDefault()` and navigate with your router for an\n   * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n   * the default; modifier and middle clicks are never emitted, so \"open in new\n   * tab\" keeps working.\n   */\n  readonly linkClick = output<ListLinkClickEvent>();\n\n  private readonly injector = inject(Injector);\n\n  /** The `role=\"list\"` element; each item renders exactly one child of it. */\n  private readonly listEl = viewChild<ElementRef<HTMLElement>>('listEl');\n\n  /** The `focusItem()` hook waiting for the next render. */\n  private pendingItemFocus?: AfterRenderRef;\n\n  constructor() {\n    effect(() => {\n      if (!isDevMode()) return;\n      // `items` may be bound to undefined (tolerated since 3.2).\n      for (const item of this.items() ?? []) {\n        if (this.isLinkRow(item) && item.action) {\n          console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n        }\n      }\n    });\n  }\n\n  /**\n   * Moves the focus into the row of the first item with this `id` after the\n   * next render (3.34). `'row'`: the row's button (`clickable`) or link\n   * (`href`). `'action'`: its built-in action button. Does nothing for an\n   * unknown `id`, for a row without that part (a plain row, a disabled row for\n   * `'row'`, no `action`, an `lcListItem` template's own controls), or when\n   * the list is destroyed first. A second call before that render replaces the\n   * first.\n   * @param id The `ListItem.id` of the row.\n   * @param part Which part of the row gets the focus.\n   */\n  focusItem(id: string, part: ListItemPart = 'row'): void {\n    this.pendingItemFocus?.destroy();\n    this.pendingItemFocus = afterNextRender(\n      () => {\n        this.pendingItemFocus = undefined;\n        const index = (this.items() ?? []).findIndex((item) => item.id === id);\n        const row = index < 0 ? null : this.listEl()?.nativeElement.children.item(index);\n        // querySelector skips the row element itself, so a plain row matches nothing.\n        const target = row?.querySelector<HTMLElement>(\n          part === 'action'\n            ? '.lc-list__action-area button'\n            : 'a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true]), .lc-list__item-button:not([aria-disabled=true])',\n        );\n        target?.focus();\n      },\n      { injector: this.injector },\n    );\n  }\n\n  /** Generated id prefix, taken once per instance (module counter, the same in every prerender). */\n  private readonly uid = `lc-list-${nextListId++}`;\n\n  /**\n   * Id of row `index` of a `clickable` row with an `action` (3.37): the\n   * row's button is named by it (`aria-labelledby`).\n   */\n  protected rowId(index: number): string {\n    return `${this.uid}-row-${index}`;\n  }\n\n  /** Whether a row renders as a link: `href` set and not disabled. */\n  protected isLinkRow(item: ListItem): boolean {\n    return !!item.href && !item.disabled;\n  }\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n\n  /**\n   * A click on a link row: only a plain primary click reaches `linkClick`.\n   * The default (following the link) is left to the browser and the consumer.\n   */\n  protected onLinkClick(event: MouseEvent, item: ListItem): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;\n    this.linkClick.emit({ item, event });\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n\n    <!-- 3.36: a decorative chevron ends a clickable or linked row. -->\n    @if (showChevron() && (clickable() || !!item.href)) {\n      <lc-icon name=\"chevron-right\" class=\"lc-list__chevron\" size=\"sm\" [decorative]=\"true\" />\n    }\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index; let i = $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable() && item.action && !itemTemplate()) {\n      <!-- 3.37 (request 057, 056 F-2): a clickable row with an action keeps the\n           action out of the row's button. The row's native button is stretched\n           over the row and named by it; the action area sits above it. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the row's native button is the control; its Enter/Space click bubbles here -->\n        <div [class]=\"getItemClasses(item) + ' lc-list__item--split'\" [id]=\"rowId(i)\" (click)=\"onItemClick(item)\">\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's text); text inside would repeat it -->\n          <button\n            type=\"button\"\n            class=\"lc-list__item-button\"\n            [attr.aria-labelledby]=\"rowId(i)\"\n            [attr.tabindex]=\"item.disabled ? -1 : null\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [attr.aria-current]=\"item.selected ? 'true' : null\"\n          ></button>\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":"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"}