@lifecorner/angular-ui-kit 3.23.0 → 3.24.0

package/fesm2022/lifecorner-angular-ui-kit-progress-ring.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-progress-ring.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\n\nexport type ProgressRingColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressRingSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-progress-ring',\n  standalone: true,\n  templateUrl: './progress-ring.component.html',\n  styleUrls: ['./progress-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Progress ring component for circular progress indication.\n *\n * Features:\n * - Circular SVG progress arc (0–100%)\n * - Color theme variants (primary, secondary, success, warning, error)\n * - Size presets (xs, sm, md, lg)\n * - Optional percentage value display\n * - Animated stroke transitions\n * - Accessible `progressbar` role with `aria-valuenow` and a configurable label\n *\n * @example\n * ```html\n * <lc-progress-ring [value]=\"65\" color=\"success\" [showValue]=\"true\" />\n * ```\n */\nexport class ProgressRingComponent {\n  /** Value between 0 and 100. */\n  value = input<number>(0);\n\n  /** Color theme. */\n  color = input<ProgressRingColor>('primary');\n\n  /** Size preset. */\n  size = input<ProgressRingSize>('md');\n\n  /** Show percentage text in center. */\n  showValue = input<boolean>(true);\n\n  /**\n   * Alias of `showValue`, named like `lc-progress-bar`'s `showLabel`. When\n   * set it wins over `showValue`.\n   */\n  showLabel = input<boolean | undefined>(undefined);\n\n  /** Accessible name of the progress ring. */\n  ariaLabel = input<string>('Progress');\n\n  private readonly SIZE_MAP: Record<ProgressRingSize, number> = { xs: 32, sm: 48, md: 64, lg: 96 };\n  private readonly STROKE_MAP: Record<ProgressRingSize, number> = { xs: 3, sm: 4, md: 5, lg: 7 };\n\n  protected readonly svgSize = computed(() => this.SIZE_MAP[this.size()]);\n  protected readonly strokeW = computed(() => this.STROKE_MAP[this.size()]);\n  protected readonly viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`);\n  protected readonly center = computed(() => this.svgSize() / 2);\n  protected readonly radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2);\n  protected readonly circumference = computed(() => 2 * Math.PI * this.radius());\n\n  /** `value` clamped to the 0–100 range (drives arc, text and ARIA). */\n  protected readonly clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\n\n  protected readonly shouldShowValue = computed(() => this.showLabel() ?? this.showValue());\n\n  protected readonly dashOffset = computed(() => {\n    const c = this.circumference();\n    return c - (this.clampedValue() / 100) * c;\n  });\n\n  protected readonly fontSize = computed(() => {\n    const map: Record<ProgressRingSize, string> = { xs: '0.5rem', sm: '0.625rem', md: '0.875rem', lg: '1.25rem' };\n    return map[this.size()];\n  });\n\n  protected readonly displayValue = computed(() => `${Math.round(this.clampedValue())}%`);\n}\n","<svg\n  [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\"\n  class=\"lc-progress-ring\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\" class=\"lc-progress-ring__track\"\n  />\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    [attr.stroke-dasharray]=\"circumference()\" [attr.stroke-dashoffset]=\"dashOffset()\"\n    fill=\"none\" stroke-linecap=\"round\"\n    [class]=\"'lc-progress-ring__value lc-progress-ring__value--' + color()\"\n    [attr.transform]=\"'rotate(-90 ' + center() + ' ' + center() + ')'\"\n  />\n  @if (shouldShowValue()) {\n    <text [attr.x]=\"center()\" [attr.y]=\"center()\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-progress-ring__text\" [style.font-size]=\"fontSize()\">\n      {{ displayValue() }}\n    </text>\n  }\n</svg>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-progress-ring.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\n\nexport type ProgressRingColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressRingSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-progress-ring',\n  standalone: true,\n  templateUrl: './progress-ring.component.html',\n  styleUrls: ['./progress-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Progress ring component for circular progress indication.\n *\n * Features:\n * - Circular SVG progress arc (0–100%)\n * - Color theme variants (primary, secondary, success, warning, error)\n * - Size presets (xs, sm, md, lg)\n * - Optional percentage value display\n * - Animated stroke transitions\n * - Accessible `progressbar` role with `aria-valuenow` and a configurable label\n *\n * @example\n * ```html\n * <lc-progress-ring [value]=\"65\" color=\"success\" [showValue]=\"true\" />\n * ```\n */\nexport class ProgressRingComponent {\n  /** Value between 0 and 100. */\n  value = input<number>(0);\n\n  /** Color theme. */\n  color = input<ProgressRingColor>('primary');\n\n  /** Size preset. */\n  size = input<ProgressRingSize>('md');\n\n  /** Show percentage text in center. */\n  showValue = input<boolean>(true);\n\n  /**\n   * Alias of `showValue`, named like `lc-progress-bar`'s `showLabel`. When\n   * set it wins over `showValue`.\n   */\n  showLabel = input<boolean | undefined>(undefined);\n\n  /** Accessible name of the progress ring. */\n  ariaLabel = input<string>('Progress');\n\n  private readonly SIZE_MAP: Record<ProgressRingSize, number> = { xs: 32, sm: 48, md: 64, lg: 96 };\n  private readonly STROKE_MAP: Record<ProgressRingSize, number> = { xs: 3, sm: 4, md: 5, lg: 7 };\n\n  protected readonly svgSize = computed(() => this.SIZE_MAP[this.size()]);\n  protected readonly strokeW = computed(() => this.STROKE_MAP[this.size()]);\n  protected readonly viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`);\n  protected readonly center = computed(() => this.svgSize() / 2);\n  protected readonly radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2);\n  protected readonly circumference = computed(() => 2 * Math.PI * this.radius());\n\n  /** `value` clamped to the 0–100 range (drives arc, text and ARIA). */\n  protected readonly clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\n\n  protected readonly shouldShowValue = computed(() => this.showLabel() ?? this.showValue());\n\n  protected readonly dashOffset = computed(() => {\n    const c = this.circumference();\n    return c - (this.clampedValue() / 100) * c;\n  });\n\n  protected readonly fontSize = computed(() => {\n    const map: Record<ProgressRingSize, string> = { xs: '0.5rem', sm: '0.625rem', md: '0.875rem', lg: '1.25rem' };\n    return map[this.size()];\n  });\n\n  protected readonly displayValue = computed(() => `${Math.round(this.clampedValue())}%`);\n}\n","<svg\n  [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\"\n  class=\"lc-progress-ring\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\" class=\"lc-progress-ring__track\"\n  />\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    [attr.stroke-dasharray]=\"circumference()\" [attr.stroke-dashoffset]=\"dashOffset()\"\n    fill=\"none\" stroke-linecap=\"round\"\n    [class]=\"'lc-progress-ring__value lc-progress-ring__value--' + color()\"\n    [attr.transform]=\"'rotate(-90 ' + center() + ' ' + center() + ')'\"\n  />\n  @if (shouldShowValue()) {\n    <text [attr.x]=\"center()\" [attr.y]=\"center()\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-progress-ring__text\" [style.font-size]=\"fontSize()\">\n      {{ displayValue() }}\n    </text>\n  }\n</svg>\n"],"mappings":"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"}

package/package.json

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

package/src/styles/_theme-dark.scss

@@ -51,6 +51,10 @@
   --color-secondary-700: #{$color-secondary-200};
   --color-secondary-800: #{$color-secondary-100};
   --color-secondary-900: #{$color-secondary-50};
+  // Secondary data marks (progress fill, ring arc), not a text colour: the raw
+  // 500 step, at least 3:1 against the track and the page and 1.92:1 apart from
+  // --color-info (request 036: the ring's inverted secondary-600 was 1.07:1).
+  --color-secondary-graphic: #{$color-secondary-500};
 
   // ============================================================================
   // Colors - Neutral (Inverted for dark mode)

package/src/styles/_theme-light.scss

@@ -44,6 +44,10 @@
   --color-secondary-700: #{$color-secondary-700};
   --color-secondary-800: #{$color-secondary-800};
   --color-secondary-900: #{$color-secondary-900};
+  // Secondary data marks (progress fill, ring arc), not a text colour: at
+  // least 3:1 against the --color-surface-hover track and the page in both
+  // themes (request 036, F-11: the bar fill was secondary-500, 2.83:1).
+  --color-secondary-graphic: #{$color-secondary-600};
 
   // ============================================================================
   // Colors - Neutral (Grays)

package/src/styles/theme-contrast.spec.ts

@@ -743,11 +743,13 @@ describe('Component pairings of 3.21.1 (request 029)', () => {
     );
   });
 
-  it('AC-10: the progress track is unchanged; primary and secondary stay raw', () => {
+  it('AC-10: the progress track is unchanged; primary stays raw (secondary: request 036)', () => {
     // The base rule (the forced-colours block repeats the selector with an outline).
     expect(sheets.progress).toMatch(/\n\.progress-bar__track \{\s*flex: 1;\s*background-color: var\(--color-surface-hover\);/);
     expect(fills('progress', '.progress-bar--primary .progress-bar__fill')['background-color']).toMatch(/^#[0-9a-f]{6}$/i);
-    expect(fills('progress', '.progress-bar--secondary .progress-bar__fill')['background-color']).toMatch(/^#[0-9a-f]{6}$/i);
+    // 036 (F-11): the raw secondary-500 was 2.83:1 against the light track;
+    // secondary now reads the data-mark token (4.19 light, 4.05 dark).
+    expect(fills('progress', '.progress-bar--secondary .progress-bar__fill')['background-color']).toBe('var(--color-secondary-graphic)');
   });
 
   it('AC-9: kanban priorities, dependency relations, arrows and node borders read the inks', () => {
@@ -967,7 +969,8 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
     ['nc', '.lc-nc__item--unread .lc-nc__item-priority--low', { 'background-image': flat('--color-surface-hover') }],
     // F-2: the ring arcs take the progress-bar inks.
     ['ring', '.lc-progress-ring__value--primary', { stroke: 'var(--color-primary-500)' }],
-    ['ring', '.lc-progress-ring__value--secondary', { stroke: 'var(--color-secondary-600)' }],
+    // 036: secondary reads the data-mark token (dark secondary-600 was 1.07:1 from info).
+    ['ring', '.lc-progress-ring__value--secondary', { stroke: 'var(--color-secondary-graphic)' }],
     ...['success', 'warning', 'error', 'info'].map((v): Row => ['ring', `.lc-progress-ring__value--${v}`, { stroke: ink(v) }]),
     // F-3: subtle line tints, secondary line numbers.
     ['diff', '.lc-diff__line--added', { background: 'var(--color-success-subtle)' }],
@@ -1021,9 +1024,11 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
     // The dash style still tells the relations apart (not colour alone).
     expect(depTs).toMatch(/\n {2}uses:\s*\{ color: '[^']+', dashed: true,/);
     expect(depTs).toMatch(/\n {2}extends:\s*\{ color: '[^']+', dashed: true,/);
-    // Out of scope (follow-up F-9): `depends` and the tree edges keep their neutral lines.
-    expect(relationColor('depends')).toBe('var(--color-neutral-400)');
-    expect(depTs.match(/color: 'var\(--color-neutral-300\)', dashed: false, isCrossRef: false/g)).toHaveLength(2);
+    // Follow-up F-9, done in request 036: `depends` reads the secondary text
+    // (neutral-400 was 2.53:1 light) and the tree edges the field border
+    // (neutral-300 was 1.47:1 light); their contrast is in the 036 block.
+    expect(relationColor('depends')).toBe('var(--color-text-secondary)');
+    expect(depTs.match(/color: 'var\(--color-field-border\)', dashed: false, isCrossRef: false/g)).toHaveLength(2);
   });
 
   // The shared status values of 3.22.3, per palette [light, dark] (AC-2).
@@ -1043,12 +1048,15 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
    * `+` (4.85 L, 5.17 D). Graphic minimum: the card border on hover and
    * selected and the `uses` cross-reference line (3.75 L), the `uses` line
    * (4.76 D). The terminal is always dark: 5.28 (debug level and meta).
+   * Request 036: the dark ring secondary moved from the inverted
+   * secondary-600 (8.35, 1.07:1 from info) to --color-secondary-graphic
+   * (4.05), which is now the dark graphic minimum.
    */
   const expected = {
     text: [4.85, 5.17],
-    graphic: [3.75, 4.76],
+    graphic: [3.75, 4.05],
     ncUnread: { high: [5.52, 5.55], urgent: [10.97, 8.37], low: [5.3, 5.99], category: [5.3, 5.99] },
-    ringTrack: { primary: [3.96, 6.69], secondary: [4.19, 8.35], success: [4.81, 6.15], warning: [5.47, 5.6], error: [11.43, 6.37], info: [9.22, 7.8] },
+    ringTrack: { primary: [3.96, 6.69], secondary: [4.19, 4.05], success: [4.81, 6.15], warning: [5.47, 5.6], error: [11.43, 6.37], info: [9.22, 7.8] },
     diff: {
       numAdded: [6.91, 6.86], numRemoved: [6.58, 9.26], numContext: [7.23, 9.25],
       plus: [4.85, 5.17], minus: [10.97, 7.21], contentAdded: [16.24, 9.75], contentRemoved: [15.46, 13.16],
@@ -1267,3 +1275,278 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
     expect(levels).toEqual([5.81, 7.78, 11.43, 6.19]);
   });
 });
+
+describe('Component pairings of 3.23.1 (request 036)', () => {
+  const lib = (path: string) => resolve(__dirname, '../lib', path);
+  const sheets = {
+    dl: compile(lib('description-list/description-list.component.scss')).css,
+    nc: compile(lib('notification-center/notification-center.component.scss')).css,
+    dep: compile(lib('dependency-viewer/dependency-viewer.component.scss')).css,
+    log: compile(lib('log-viewer/log-viewer.component.scss')).css,
+    progress: compile(lib('progress-bar/progress-bar.component.scss')).css,
+    ring: compile(lib('progress-ring/progress-ring.component.scss')).css,
+  };
+  type Sheet = keyof typeof sheets;
+  const depTs = readFileSync(lib('dependency-viewer/dependency-viewer.component.ts'), 'utf8');
+  const depHtml = readFileSync(lib('dependency-viewer/dependency-viewer.component.html'), 'utf8');
+
+  /** Every rule as its selector list and body (`a, b { … }` names both). */
+  const rulesOf = (css: string) =>
+    [...css.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((m) => ({
+      selectors: m[1].split(/,(?![^(]*\))/).map((s) => s.trim()),
+      body: m[2],
+    }));
+  const decls = (body: string): Record<string, string> =>
+    Object.fromEntries([...body.matchAll(/([\w-]+):\s*([^;]+);/g)].map((m) => [m[1], m[2].trim()]));
+  const forcedBlock = /@media \(forced-colors: active\) \{((?:[^{}]*\{[^{}]*\})*)\s*\}/g;
+  /**
+   * The declarations of every rule that names `selector`, merged in source
+   * order; rules in forced-colours blocks are left out (`Mark` is no colour).
+   */
+  const fills = (sheet: Sheet, selector: string): Record<string, string> => {
+    const found = rulesOf(sheets[sheet].replace(forcedBlock, '')).filter((r) => r.selectors.includes(selector));
+    expect(found.length).toBeGreaterThan(0);
+    return Object.assign({}, ...found.map((r) => decls(r.body)));
+  };
+  /** The body of the `@media (forced-colors: active)` blocks of a sheet. */
+  const forced = (sheet: Sheet) => [...sheets[sheet].matchAll(forcedBlock)].map((m) => m[1]).join('\n');
+  const relationColor = (relation: string) => {
+    const found = depTs.match(new RegExp(`\\n  ${relation}:\\s*\\{ color: '([^']+)'`));
+    expect(found).not.toBeNull();
+    return (found as RegExpMatchArray)[1];
+  };
+
+  const secondary = 'var(--color-text-secondary)';
+  const graphic = 'var(--color-secondary-graphic)';
+  type Row = [Sheet, string, Record<string, string>];
+
+  const declared: Row[] = [
+    // A (BA-10): the link and primary inks, a 2 px outline instead of the halo.
+    ['dl', '.lc-dl__value--primary', { color: 'var(--color-on-primary-subtle)', 'font-weight': 'var(--font-weight-semibold)' }],
+    ['dl', '.lc-dl__link', { color: 'var(--color-link)', 'text-decoration': 'none' }],
+    ['dl', '.lc-dl__link:hover', { color: 'var(--color-link-hover)', 'text-decoration': 'underline' }],
+    ['dl', '.lc-dl__row--clickable:focus-visible', { outline: '2px solid var(--color-primary-500)', 'outline-offset': '2px' }],
+    // F-8: unread message and time in the secondary ink.
+    ['nc', '.lc-nc__item--unread .lc-nc__item-message', { color: secondary }],
+    ['nc', '.lc-nc__item--unread .lc-nc__item-time', { color: secondary }],
+    // F-10: an opaque marker with its own ink.
+    ['log', '.lc-log-viewer__match', { 'background-color': 'var(--color-warning)', color: 'var(--color-on-warning)' }],
+    ['log', '.lc-log-viewer--terminal .lc-log-viewer__match', { 'background-color': '#f9e2af', color: '#1e1e2e' }],
+    // F-13: gray is Overlay2 (Mocha) and Subtext1 (Latte).
+    ['log', '.ansi-gray', { color: '#9399b2' }],
+    ['log', ':root.light .lc-log-viewer--log .ansi-gray', { color: '#5c5f77' }],
+    // F-11 and the ring: the secondary data-mark token.
+    ['progress', '.progress-bar--secondary .progress-bar__fill', { 'background-color': graphic }],
+    ['progress', '.progress-bar-circular--secondary .progress-bar-circular__fill', { stroke: graphic }],
+    ['ring', '.lc-progress-ring__value--secondary', { stroke: graphic }],
+  ];
+
+  it.each(declared)('AC-1…13: %s %s declares the design 036 values', (sheet, selector, expectedDecls) => {
+    const found = fills(sheet, selector);
+    for (const [property, value] of Object.entries(expectedDecls)) expect(found[property]).toBe(value);
+  });
+
+  it('AC-2: the clickable row has no halo any more; forced colours draw the outline in Highlight', () => {
+    const clickable = rulesOf(sheets.dl).filter((r) => r.selectors.some((s) => s.includes('lc-dl__row--clickable')));
+    for (const r of clickable) expect(decls(r.body)['box-shadow']).toBeUndefined();
+    expect(sheets.dl).not.toMatch(/color-mix/);
+    expect(forced('dl')).toMatch(/\.lc-dl__row--clickable:focus-visible \{\s*outline-color: Highlight;\s*\}/);
+  });
+
+  it('AC-9: forced colours paint every search match, the terminal one too, with Mark / MarkText', () => {
+    expect(forced('log')).toMatch(
+      /\.lc-log-viewer__match,\s*\.lc-log-viewer--terminal \.lc-log-viewer__match \{\s*background-color: Mark;\s*color: MarkText;\s*\}/,
+    );
+  });
+
+  it('AC-8: depends, the structural edges and both arrows read the secondary text; tree edges the field border', () => {
+    expect(relationColor('depends')).toBe(secondary);
+    expect(depTs).toContain(`color: edge.structural ? '${secondary}' : style.color,`);
+    expect(depTs.match(/color: 'var\(--color-field-border\)', dashed: false, isCrossRef: false/g)).toHaveLength(2);
+    for (const id of ['default', 'depends']) {
+      expect(depHtml).toMatch(new RegExp(`<marker id="arrow-${id}"[^>]*><path [^>]*fill="var\\(--color-text-secondary\\)"/>`));
+    }
+    expect(depTs).not.toMatch(/--color-neutral-400/);
+    expect(depHtml).not.toMatch(/--color-neutral-400/);
+    // `depends` stays solid; the relations stay apart by dash and label too.
+    expect(depTs).toMatch(/\n {2}depends:\s*\{ color: '[^']+', dashed: false,/);
+  });
+
+  it('AC-12: the log tool buttons stay 28 × 28 (WCAG 2.5.8 by size)', () => {
+    const btn = fills('log', '.lc-log-viewer__tool-btn');
+    expect([btn.width, btn.height]).toEqual(['28px', '28px']);
+  });
+
+  /**
+   * Design 036 §5, floored, per palette [light, dark]. Pages: background,
+   * surface, surface-2; a hovered row is --color-surface-hover over them; an
+   * unread NC row is --color-surface-selected over surface and surface-2; the
+   * progress track is --color-surface-hover over the pages.
+   */
+  const expected = {
+    dl: {
+      linkPage: [5.94, 8.96], linkHover: [5.64, 7.92], linkHoverInkPage: [8.74, 10.53], linkHoverInkHover: [8.29, 9.3],
+      primaryPage: [8.74, 7.57], primaryHover: [8.29, 6.69], ring: [4.17, 7.57],
+    },
+    ncUnread: [6.49, 7.05],
+    dep: { dependsLabel: [7.55, 11.15], dependsLine: [7.55, 11.15], dependsCrossRef: [4.52, 7.55], dependsLegend: [7.23, 9.25], treeSurface: [4.83, 6.7], treeSurface2: [4.62, 5.56] },
+    dependsVsUses: [1.29, 1.66],
+    match: [7.85, 7.85],
+    secondary: { track: [4.19, 4.05], page: [4.41, 4.59], vsInfo: [2.19, 1.92] },
+    // The log variant's gray: Latte in light, Mocha in dark; plain surface and the worst line.
+    ansiGray: { plain: [6.25, 6.11], worst: [4.63, 4.55] },
+  };
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    const c = (name: string) => color(tokens, name);
+    const value = (text: string): Rgba => {
+      const ref = text.match(/^var\((--[\w-]+)\)$/);
+      return ref ? c(ref[1]) : parse(text);
+    };
+    const lowest = (fg: Rgba, bases: Rgba[]) => Math.min(...bases.map((bg) => ratio(over(fg, bg), bg)));
+    const S = c('--color-surface');
+    const S2 = c('--color-surface-2');
+    const BG = c('--color-background');
+    const pages = [BG, S, S2];
+    const hovered = pages.map((p) => over(c('--color-surface-hover'), p));
+    let cache: ReturnType<typeof measure> | undefined;
+    /** Every §5 cell, measured once on first use (inside a test, not at collection). */
+    const measured = () => (cache ??= measure());
+
+    function measure() {
+      const dlInk = (selector: string) => value(fills('dl', selector).color);
+      const ringInk = value(fills('dl', '.lc-dl__row--clickable:focus-visible').outline.replace(/^2px solid /, ''));
+      const dl = {
+        linkPage: lowest(dlInk('.lc-dl__link'), pages),
+        linkHover: lowest(dlInk('.lc-dl__link'), hovered),
+        linkHoverInkPage: lowest(dlInk('.lc-dl__link:hover'), pages),
+        linkHoverInkHover: lowest(dlInk('.lc-dl__link:hover'), hovered),
+        primaryPage: lowest(dlInk('.lc-dl__value--primary'), pages),
+        primaryHover: lowest(dlInk('.lc-dl__value--primary'), hovered),
+        // The outline sits 2 px outside the row, on the card or the page.
+        ring: lowest(ringInk, pages),
+      };
+
+      const unreadRows = [S, S2].map((row) => over(c('--color-surface-selected'), row));
+      const ncUnread = Math.min(
+        lowest(value(fills('nc', '.lc-nc__item--unread .lc-nc__item-message').color), unreadRows),
+        lowest(value(fills('nc', '.lc-nc__item--unread .lc-nc__item-time').color), unreadRows),
+      );
+
+      // Labels on their surface halo, lines on the viewer surface (cross-refs
+      // at their opacity), legend lines on the legend's surface-2.
+      const halo = value(fills('dep', '.dep-viewer__edge-label').stroke);
+      const lineOpacity = Number(fills('dep', '.dep-viewer__edge--cross-ref').opacity);
+      const legend = value(fills('dep', '.dep-viewer__legend').background);
+      const depends = value(relationColor('depends'));
+      const tree = c('--color-field-border');
+      const dep = {
+        dependsLabel: lowest(depends, [halo]),
+        dependsLine: lowest(depends, [S]),
+        dependsCrossRef: lowest([depends[0], depends[1], depends[2], depends[3] * lineOpacity], [S]),
+        dependsLegend: lowest(depends, [legend]),
+        treeSurface: lowest(tree, [S]),
+        treeSurface2: lowest(tree, [S2]),
+      };
+      const dependsVsUses = ratio(depends, value(relationColor('uses')));
+
+      const mark = fills('log', '.lc-log-viewer__match');
+      const match = ratio(value(mark.color), value(mark['background-color']));
+
+      const track = value(fills('progress', '.progress-bar__track')['background-color']);
+      const bar = value(fills('progress', '.progress-bar--secondary .progress-bar__fill')['background-color']);
+      const ringTrack = value(fills('ring', '.lc-progress-ring__track').stroke);
+      const arc = (v: string) => value(fills('ring', `.lc-progress-ring__value--${v}`).stroke);
+      const secondaryCells = {
+        track: Math.min(lowest(bar, pages.map((p) => over(track, p))), lowest(arc('secondary'), pages.map((p) => over(ringTrack, p)))),
+        page: Math.min(lowest(bar, pages), lowest(arc('secondary'), pages)),
+        vsInfo: ratio(arc('secondary'), arc('info')),
+      };
+
+      // The log variant: surface, the warn and error tints, each with and without hover.
+      const logBg = value(fills('log', '.lc-log-viewer--log')['background-color']);
+      const hover = parse(fills('log', '.lc-log-viewer__line:hover')['background-color']);
+      const tintOf = (lv: string) => over(parse(fills('log', `.lc-log-viewer--log .lc-log-viewer__line--${lv}`)['background-color']), logBg);
+      const logLines = [logBg, tintOf('warn'), tintOf('error')].flatMap((b) => [b, over(hover, b)]);
+      const gray = parse(fills('log', i === 0 ? ':root.light .lc-log-viewer--log .ansi-gray' : '.ansi-gray').color);
+      const ansiGray = { plain: lowest(gray, [logBg]), worst: lowest(gray, logLines) };
+
+      return { dl, ncUnread, dep, dependsVsUses, match, secondaryCells, ansiGray };
+    }
+
+    it('AC-1, AC-2: dl link and primary values reach 4.5:1 on the page and a hovered row; the focus ring 3:1', () => {
+      const { dl } = measured();
+      for (const key of Object.keys(dl) as (keyof typeof dl)[]) {
+        expect([key, floor(dl[key])]).toEqual([key, expected.dl[key][i]]);
+      }
+      expect(Math.min(dl.linkPage, dl.linkHover, dl.linkHoverInkPage, dl.linkHoverInkHover, dl.primaryPage, dl.primaryHover)).toBeGreaterThanOrEqual(4.5);
+      expect(dl.ring).toBeGreaterThanOrEqual(3);
+    });
+
+    it('AC-7: the NC unread message and time reach 4.5:1 on every unread row', () => {
+      const { ncUnread } = measured();
+      expect(floor(ncUnread)).toBe(expected.ncUnread[i]);
+      expect(ncUnread).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-8: the depends label reaches 4.5:1; depends, cross-ref, legend and tree lines 3:1', () => {
+      const { dep, dependsVsUses } = measured();
+      for (const key of Object.keys(dep) as (keyof typeof dep)[]) {
+        expect([key, floor(dep[key])]).toEqual([key, expected.dep[key][i]]);
+      }
+      expect(dep.dependsLabel).toBeGreaterThanOrEqual(4.5);
+      expect(Math.min(...Object.values(dep))).toBeGreaterThanOrEqual(3);
+      expect(floor(dependsVsUses)).toBe(expected.dependsVsUses[i]);
+    });
+
+    it('AC-9: the search match ink reaches 4.5:1 on its opaque marker', () => {
+      const { match } = measured();
+      expect(floor(match)).toBe(expected.match[i]);
+      expect(match).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-10, AC-11: the secondary bar fill and ring arc reach 3:1 on the track and the page, 1.5:1 from info', () => {
+      const { secondaryCells } = measured();
+      for (const key of Object.keys(secondaryCells) as (keyof typeof secondaryCells)[]) {
+        expect([key, floor(secondaryCells[key])]).toEqual([key, expected.secondary[key][i]]);
+      }
+      expect(Math.min(secondaryCells.track, secondaryCells.page)).toBeGreaterThanOrEqual(3);
+      expect(secondaryCells.vsInfo).toBeGreaterThanOrEqual(1.5);
+    });
+
+    it('AC-13: the log variant gray ANSI text reaches 4.5:1 on every line', () => {
+      const { ansiGray } = measured();
+      expect([floor(ansiGray.plain), floor(ansiGray.worst)]).toEqual([expected.ansiGray.plain[i], expected.ansiGray.worst[i]]);
+      expect(ansiGray.worst).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-15: the shared status values keep their hex; the new token has the design 036 values', () => {
+      const shared: Record<string, [string, string]> = {
+        '--color-success': ['#8ea475', '#8ea475'],
+        '--color-error': ['#9d0e0e', '#9d0e0e'],
+        '--color-warning': ['#e1a040', '#e1a040'],
+        '--color-info': ['#3b6588', '#3b6588'],
+        '--color-secondary-graphic': ['#5a798c', '#7097af'],
+      };
+      for (const [name, hexes] of Object.entries(shared)) expect([name, hex(tokens, name)]).toEqual([name, hexes[i]]);
+    });
+  });
+
+  it('AC-9, AC-13: the terminal match reads 12.90:1 on every line; gray 4.5:1 on every line', () => {
+    const T = parse(fills('log', '.lc-log-viewer--terminal')['background-color']);
+    const hover = parse(fills('log', '.lc-log-viewer__line:hover')['background-color']);
+    const tint = (lv: string) => over(parse(fills('log', `.lc-log-viewer--terminal .lc-log-viewer__line--${lv}`)['background-color']), T);
+    const lines = [T, tint('warn'), tint('error')].flatMap((b) => [b, over(hover, b)]);
+    const mark = fills('log', '.lc-log-viewer--terminal .lc-log-viewer__match');
+    const gray = parse(fills('log', '.ansi-gray').color);
+    const lowest = (fg: Rgba, bases: Rgba[]) => Math.min(...bases.map((bg) => ratio(fg, bg)));
+    const terminal = {
+      match: ratio(parse(mark.color), parse(mark['background-color'])),
+      grayPlain: ratio(gray, T),
+      grayWorst: lowest(gray, lines),
+    };
+    expect(Object.fromEntries(Object.entries(terminal).map(([k, v]) => [k, floor(v)]))).toEqual({ match: 12.9, grayPlain: 5.81, grayWorst: 4.61 });
+    expect(Math.min(...Object.values(terminal))).toBeGreaterThanOrEqual(4.5);
+  });
+});

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

@@ -1,3 +1,4 @@
+import { Params } from "@angular/router";
 import * as i0 from "@angular/core";
 /** Visual variant of `lc-card`. */
 export type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';
@@ -12,6 +13,8 @@ export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
  * - Border radius options (none, sm, md, lg, xl, full)
  * - Optional title display, with an optional leading icon tile
  * - Content projection for flexible body content
+ * - Link mode (3.24): `href` or `route` make the whole card a real link,
+ *   the title stays a heading
  *
  * @example
  * ```html
@@ -23,6 +26,12 @@ export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
  * <lc-card title="Repository" subtitle="Checkout &amp; profile" icon="git-branch">
  *   ...
  * </lc-card>
+ *
+ * <!-- An overview card that opens a page: heading h2 with a link inside -->
+ * <lc-card title="SAP-Ist" variant="outlined" [headingLevel]="2"
+ *          [route]="['/quellen', 'sap-ist']" [queryParams]="{ ansicht: 'laeufe' }">
+ *   ...
+ * </lc-card>
  * ```
  */
 export declare class CardComponent {
@@ -75,7 +84,8 @@ export declare class CardComponent {
    *   `--shadow-auth-card`, no accent line — the sign-in card
    * - dashed: the muted "coming soon" tile — `--color-muted-tile` fill, 1 px
    *   dashed `--color-muted-tile-border`, secondary ink, icons in
-   *   `--color-muted-tile-icon`. Never clickable: `clickable` is ignored
+   *   `--color-muted-tile-icon`. Never clickable: `clickable` is ignored;
+   *   `href` and `route` are ignored too
    * @default 'elevated'
    */
   variant: import("@angular/core").InputSignal<CardVariant>;
@@ -85,7 +95,8 @@ export declare class CardComponent {
    */
   padding: import("@angular/core").InputSignal<"sm" | "md" | "none" | "xs" | "lg">;
   /**
-   * Whether the card is clickable (hover effects, cursor pointer)
+   * Whether the card is clickable (hover effects, cursor pointer). Has no
+   * effect on a link card (`href`/`route`).
    * @default false
    */
   clickable: import("@angular/core").InputSignal<boolean>;
@@ -107,18 +118,60 @@ export declare class CardComponent {
    */
   headingLevel: import("@angular/core").InputSignal<CardHeadingLevel>;
   /**
-   * ARIA label for accessibility
+   * Accessible name. On a link card (`href`/`route`) it names the link
+   * instead of the card; it must contain the visible title (WCAG 2.5.3) and
+   * the heading reads it too, so keep it short. Without it the link is named
+   * by the title, and the card's content (badge, list) is read as normal
+   * content. On other cards it labels the card.
+   * @default undefined
    */
   ariaLabel: import("@angular/core").InputSignal<string | undefined>;
   /**
-   * Emitted when card is clicked (if clickable)
+   * URL the card links to (3.24, quellen row 1). The card becomes a real
+   * link: the built-in `title` is an `<a href>` inside its heading, and the
+   * link covers the whole card (click, Enter, middle click, "open in new
+   * tab", "copy link"). No router needed; works in prerendered HTML. Wins
+   * over `route`. Ignored by `dashed`. On a link card `clickable` has no
+   * effect and `cardClick` is not emitted.
+   * @default undefined
+   */
+  href: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * In-app route the card links to through the Angular router (`RouterLink`
+   * commands: `'/quellen/usm'` or `['/quellen', id]`), relative to the
+   * consumer's route, rendered as a real `<a href>` like `href`. Needs the
+   * app's router (`provideRouter`); without one, use `href`. `''` and `null`
+   * mean no link.
+   * @default undefined
+   */
+  route: import("@angular/core").InputSignal<string | readonly unknown[] | null | undefined>;
+  /**
+   * Query parameters of `route`, as `RouterLink`'s `queryParams`
+   * (`{ ansicht: 'laeufe' }`). Ignored with `href` (write the query into the
+   * URL).
+   * @default undefined
+   */
+  queryParams: import("@angular/core").InputSignal<Params | null | undefined>;
+  /**
+   * Emitted when a `clickable` card is clicked or activated with Enter or
+   * Space. Not emitted on a link card (`href`/`route`): the link navigates by
+   * itself (one navigation); bind the native `(click)` for analytics.
    */
   readonly cardClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  /**
+   * How the card links (3.24): `href` wins over `route`; `''`/`null` routes
+   * are no link, and the dashed "coming soon" tile never links.
+   */
+  protected readonly linkMode: import("@angular/core").Signal<"href" | "route" | null>;
   /**
    * Whether the card acts as a button: `clickable`, except for the dashed
-   * "coming soon" tile, which is never interactive.
+   * "coming soon" tile, which is never interactive, and a link card, whose
+   * anchor is the only interactive element.
    */
   protected isClickable: import("@angular/core").Signal<boolean>;
+  /** `ariaLabel` on the card; on a link card it names the anchor instead. */
+  protected readonly cardAriaLabel: import("@angular/core").Signal<string | undefined>;
+  constructor();
   /**
    * Compute card CSS classes based on inputs
    */
@@ -207,6 +260,21 @@ export declare class CardComponent {
       "required": false;
       "isSignal": true;
     };
+    "href": {
+      "alias": "href";
+      "required": false;
+      "isSignal": true;
+    };
+    "route": {
+      "alias": "route";
+      "required": false;
+      "isSignal": true;
+    };
+    "queryParams": {
+      "alias": "queryParams";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "cardClick": "cardClick";
   }, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;

package/types/lifecorner-angular-ui-kit-file-upload.d.ts

@@ -6,6 +6,16 @@ export interface FileUploadFile {
   size: number;
   type: string;
 }
+/** Why `lc-file-upload` rejected a file. */
+export type FileUploadRejectionCode = 'size' | 'type';
+/** Payload of `lc-file-upload`'s `fileRejected`. */
+export interface FileUploadRejection {
+  file: File;
+  /** Fixed English text ("File type not accepted", "File too large"); translate from `code`. */
+  reason: string;
+  /** `'type'`: matches no `accept` token (checked first); `'size'`: over `maxSizeBytes`. */
+  code: FileUploadRejectionCode;
+}
 /**
  * File upload / dropzone component with drag & drop support.
  *
@@ -21,11 +31,21 @@ export interface FileUploadFile {
  */
 export declare class FileUploadComponent {
   /**
-   * Accepted file types (e.g. ".pdf,.jpg,image/*").
+   * Accepted types, comma-separated, case-insensitive: extensions (`.csv`),
+   * MIME types (`text/csv`), wildcards (`image/*`); `*\/*` accepts every type.
+   * Since 3.24 checked for picked and dropped files alike; a file matching no
+   * token is rejected with `code: 'type'`. Tokens that are neither, such as a
+   * MIME type with parameters (`text/csv;charset=utf-8`), are ignored, as by
+   * the browser's picker; none left = every type. Prefer extensions: systems report MIME
+   * types differently (a CSV can arrive as `application/vnd.ms-excel`).
+   * @default ''
    */
   accept: import("@angular/core").InputSignal<string>;
   /**
-   * Allow multiple files.
+   * Allow multiple files. `false`: one file. A new pick or drop replaces the
+   * selection with its first accepted file; if all its files are rejected
+   * (size or type), the selection is cleared and `filesSelected` emits `[]`.
+   * `true`: accepted files are added to the selection.
    * @default false
    */
   multiple: import("@angular/core").InputSignal<boolean>;
@@ -60,17 +80,24 @@ export declare class FileUploadComponent {
   maxSizeLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of a selected file's remove button. */
   removeFileAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * BCP 47 locale of the shown sizes (max line, drop zone name, file list):
+   * `'de-DE'` gives "20,0 MB". Units stay B/KB/MB (1024 base). Empty keeps
+   * the built-in notation ("20.0 MB"); an invalid locale falls back to it.
+   * @default ''
+   */
+  locale: import("@angular/core").InputSignal<string>;
   /**
    * Emitted with selected files after validation.
    */
   readonly filesSelected: import("@angular/core").OutputEmitterRef<FileUploadFile[]>;
   /**
-   * Emitted when a file is rejected (too large or wrong type).
+   * Emitted once per rejected file, before `filesSelected`. `code`: `'type'`
+   * (matches no `accept` token; checked first) or `'size'` (over
+   * `maxSizeBytes`). `reason` is a fixed English text ("File type not
+   * accepted", "File too large"); translate from `code`.
    */
-  readonly fileRejected: import("@angular/core").OutputEmitterRef<{
-    file: File;
-    reason: string;
-  }>;
+  readonly fileRejected: import("@angular/core").OutputEmitterRef<FileUploadRejection>;
   protected isDragOver: import("@angular/core").WritableSignal<boolean>;
   protected selectedFiles: import("@angular/core").WritableSignal<FileUploadFile[]>;
   protected readonly fileInputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
@@ -80,6 +107,13 @@ export declare class FileUploadComponent {
    * accepted and max lines it shows, comma-separated.
    */
   protected readonly dropzoneAriaLabel: import("@angular/core").Signal<string>;
+  /**
+   * The size notation of `locale` (3.24): whole bytes, KB/MB to one decimal.
+   * Null keeps the built-in `toFixed` notation (no or an invalid locale).
+   */
+  private readonly sizeFormats;
+  /** The `accept` tokens the check knows, lower-cased; empty = every type. */
+  private readonly acceptTokens;
   protected onDragOver(event: DragEvent): void;
   protected onDragLeave(event: DragEvent): void;
   protected onDrop(event: DragEvent): void;
@@ -87,6 +121,8 @@ export declare class FileUploadComponent {
   protected openFilePicker(): void;
   protected removeFile(index: number): void;
   protected formatSize(bytes: number): string;
+  /** Why `file` is rejected: type first, then size; null when it is accepted. */
+  private rejectionOf;
   private processFiles;
   static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "lc-file-upload", never, {
@@ -130,6 +166,11 @@ export declare class FileUploadComponent {
       "required": false;
       "isSignal": true;
     };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "filesSelected": "filesSelected";
     "fileRejected": "fileRejected";