@lifecorner/angular-ui-kit 3.20.0 → 3.21.1

package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs

@@ -60,7 +60,7 @@ var StatusDotComponent = class StatusDotComponent {
 		},
 		ngImport: i0,
 		template: "<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
-		styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"],
+		styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-on-success-subtle)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-on-warning-subtle)}.lc-status-dot--blocked{color:var(--color-on-error-subtle)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
-			styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"]
+			styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-on-success-subtle)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-on-warning-subtle)}.lc-status-dot--blocked{color:var(--color-on-error-subtle)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-status-dot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.ts","../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';\nexport type StatusDotSize = 'sm' | 'md';\n\n/**\n * Status dot — the small traffic-light atom used in list rows, rails and\n * boards to signal an item's state at a glance.\n *\n * Features:\n * - Five semantic tones: done (success), run (brand teal), wait (warning),\n *   blocked (error), open (neutral)\n * - Optional pulse animation for \"in progress\" states (static under\n *   prefers-reduced-motion)\n * - Decorative by default (aria-hidden); pass `label` to expose the state\n *   to assistive technology\n *\n * @example\n * ```html\n * <lc-status-dot tone=\"run\" [pulse]=\"true\" label=\"In Arbeit\" />\n * <lc-status-dot tone=\"blocked\" />\n * ```\n */\n@Component({\n  selector: 'lc-status-dot',\n  standalone: true,\n  imports: [],\n  templateUrl: './status-dot.component.html',\n  styleUrl: './status-dot.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic tone class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusDotComponent {\n  /** Semantic tone of the dot */\n  readonly tone = input<StatusDotTone>('open');\n\n  /** Size of the dot (sm = 6px for dense list rows, md = 8px) */\n  readonly size = input<StatusDotSize>('md');\n\n  /**\n   * Pulse animation for \"in progress\" states. Renders static under\n   * prefers-reduced-motion.\n   * @default false\n   */\n  readonly pulse = input(false);\n\n  /**\n   * Accessible label for the state (e.g. \"In Arbeit\"). Without it the dot is\n   * treated as decorative and hidden from assistive technology.\n   */\n  readonly label = input('');\n\n  readonly dotClasses = computed(() => {\n    const classes = ['lc-status-dot', `lc-status-dot--${this.tone()}`, `lc-status-dot--${this.size()}`];\n    if (this.pulse()) {\n      classes.push('lc-status-dot--pulse');\n    }\n    return classes.join(' ');\n  });\n}\n","<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n"],"mappings":";;AAgCA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMpB,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,aAAa,eAAc;EAClC,MAAM,UAAU;GAAC;GAAiB,kBAAkB,KAAK,KAAI;GAAM,kBAAkB,KAAK,KAAI;EAAI;EAClG,IAAI,KAAK,MAAK,GACZ,QAAQ,KAAK,sBAAsB;EAErC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CA1BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UChC/B;EAMA,QAAA,CAAA,g8BAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AD0Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAT9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAA;GAAE,eAGI,kBAAkB;GAAI,iBACpB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,g8BAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-status-dot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.ts","../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';\nexport type StatusDotSize = 'sm' | 'md';\n\n/**\n * Status dot — the small traffic-light atom used in list rows, rails and\n * boards to signal an item's state at a glance.\n *\n * Features:\n * - Five semantic tones: done (success), run (brand teal), wait (warning),\n *   blocked (error), open (neutral)\n * - Optional pulse animation for \"in progress\" states (static under\n *   prefers-reduced-motion)\n * - Decorative by default (aria-hidden); pass `label` to expose the state\n *   to assistive technology\n *\n * @example\n * ```html\n * <lc-status-dot tone=\"run\" [pulse]=\"true\" label=\"In Arbeit\" />\n * <lc-status-dot tone=\"blocked\" />\n * ```\n */\n@Component({\n  selector: 'lc-status-dot',\n  standalone: true,\n  imports: [],\n  templateUrl: './status-dot.component.html',\n  styleUrl: './status-dot.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic tone class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusDotComponent {\n  /** Semantic tone of the dot */\n  readonly tone = input<StatusDotTone>('open');\n\n  /** Size of the dot (sm = 6px for dense list rows, md = 8px) */\n  readonly size = input<StatusDotSize>('md');\n\n  /**\n   * Pulse animation for \"in progress\" states. Renders static under\n   * prefers-reduced-motion.\n   * @default false\n   */\n  readonly pulse = input(false);\n\n  /**\n   * Accessible label for the state (e.g. \"In Arbeit\"). Without it the dot is\n   * treated as decorative and hidden from assistive technology.\n   */\n  readonly label = input('');\n\n  readonly dotClasses = computed(() => {\n    const classes = ['lc-status-dot', `lc-status-dot--${this.tone()}`, `lc-status-dot--${this.size()}`];\n    if (this.pulse()) {\n      classes.push('lc-status-dot--pulse');\n    }\n    return classes.join(' ');\n  });\n}\n","<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n"],"mappings":";;AAgCA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMpB,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,aAAa,eAAc;EAClC,MAAM,UAAU;GAAC;GAAiB,kBAAkB,KAAK,KAAI;GAAM,kBAAkB,KAAK,KAAI;EAAI;EAClG,IAAI,KAAK,MAAK,GACZ,QAAQ,KAAK,sBAAsB;EAErC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CA1BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UChC/B;EAMA,QAAA,CAAA,89BAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AD0Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAT9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAA;GAAE,eAGI,kBAAkB;GAAI,iBACpB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,89BAAA;EAAA,CAAA"}

package/package.json

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

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

@@ -657,3 +657,242 @@ describe('Component pairings of 3.20 (request 027)', () => {
     });
   });
 });
+
+// Request 029 (3.21.1): the follow-up candidates of 027 design §5. Status
+// colours used as text, icon, glyph, border or progress fill read the inks
+// --color-on-<v>-subtle in both themes (WCAG 1.4.3 4.5:1 for text, 1.4.11 3:1
+// for graphics). The shared fills, rails and line tints stay; the card and
+// notification chips sit on --color-<v>-subtle (design 029 D-1).
+describe('Component pairings of 3.21.1 (request 029)', () => {
+  const lib = (path: string) => resolve(__dirname, '../lib', path);
+  const sheets = {
+    nc: compile(lib('notification-center/notification-center.component.scss')).css,
+    card: compile(lib('card/card.component.scss')).css,
+    markdown: compile(lib('markdown/markdown.component.scss')).css,
+    dot: compile(lib('status-dot/status-dot.component.scss')).css,
+    pipeline: compile(lib('pipeline/pipeline.component.scss')).css,
+    upload: compile(lib('file-upload/file-upload.component.scss')).css,
+    rating: compile(lib('rating/rating.component.scss')).css,
+    log: compile(lib('log-viewer/log-viewer.component.scss')).css,
+    diff: compile(lib('diff-viewer/diff-viewer.component.scss')).css,
+    dep: compile(lib('dependency-viewer/dependency-viewer.component.scss')).css,
+    kanban: compile(lib('kanban-board/kanban-board.component.scss')).css,
+    progress: compile(lib('progress-bar/progress-bar.component.scss')).css,
+  };
+  type Sheet = keyof typeof sheets;
+  const rulesOf = (css: string) => [...css.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((m) => ({ selector: m[1].trim(), body: m[2] }));
+  const rule = (sheet: Sheet, selector: string) => {
+    const found = rulesOf(sheets[sheet]).filter((r) => r.selector === selector);
+    expect(found).toHaveLength(1);
+    return found[0].body;
+  };
+  /** The declarations of a rule body, property → value. */
+  const decls = (body: string): Record<string, string> =>
+    Object.fromEntries([...body.matchAll(/([\w-]+):\s*([^;]+);/g)].map((m) => [m[1], m[2].trim()]));
+  const ink = (v: string) => `var(--color-on-${v}-subtle)`;
+  const sub = (v: string) => `var(--color-${v}-subtle)`;
+  const fills = (sheet: Sheet, selector: string) => decls(rule(sheet, selector));
+
+  const swaps: [Sheet, string, Record<string, string>][] = [
+    ...(['info', 'success', 'warning', 'error'] as const).map((v): [Sheet, string, Record<string, string>] => ['nc', `.lc-nc__item-icon--${v}`, { color: ink(v) }]),
+    ['nc', '.lc-nc__item-priority--high', { background: sub('warning'), color: ink('warning') }],
+    ['nc', '.lc-nc__item-priority--urgent', { background: sub('error'), color: ink('error') }],
+    ...(['success', 'warning', 'error'] as const).map((v): [Sheet, string, Record<string, string>] => ['card', `.card__badge--${v}`, { 'background-color': sub(v), color: ink(v) }]),
+    ['markdown', '.lc-markdown__mermaid-error', { color: ink('error') }],
+    ['dot', '.lc-status-dot--done', { color: ink('success') }],
+    ['dot', '.lc-status-dot--wait', { color: ink('warning') }],
+    ['dot', '.lc-status-dot--blocked', { color: ink('error') }],
+    ['pipeline', '.lc-pipeline__step--warning .lc-pipeline__node', { 'border-color': ink('warning'), color: ink('warning') }],
+    ['pipeline', '.lc-pipeline__step--error .lc-pipeline__node', { 'border-color': ink('error'), color: ink('error') }],
+    ['pipeline', '.lc-pipeline__step--complete .lc-pipeline__node', { 'background-color': 'var(--color-primary-500)', color: 'var(--color-surface)' }],
+    ['upload', '.file-upload__file-remove:hover', { background: 'rgba(157, 14, 14, 0.18)', color: ink('error') }],
+    ['rating', '.rating__icon--filled', { color: ink('warning') }],
+    ['rating', '.rating__icon-fill', { color: ink('warning') }],
+    ['log', '.lc-log-viewer__line--info .lc-log-viewer__level', { color: ink('info') }],
+    ['log', '.lc-log-viewer__line--warn .lc-log-viewer__level', { color: ink('warning') }],
+    ['log', '.lc-log-viewer__line--error .lc-log-viewer__level', { color: ink('error') }],
+    ['log', '.lc-log-viewer__level-pill--error', { 'background-color': 'rgba(157, 14, 14, 0.18)', color: ink('error') }],
+    ['log', '.lc-log-viewer__level-pill--warn', { 'background-color': 'rgba(225, 160, 64, 0.18)', color: ink('warning') }],
+    ['log', '.lc-log-viewer__level-pill--active', { 'box-shadow': 'inset 0 0 0 1px currentColor' }],
+    ['diff', '.lc-diff__stat--add', { color: ink('success') }],
+    ['diff', '.lc-diff__stat--del', { color: ink('error') }],
+    ['diff', '.lc-diff__line--added .lc-diff__prefix', { color: ink('success') }],
+    ['diff', '.lc-diff__line--removed .lc-diff__prefix', { color: ink('error') }],
+    ...(['success', 'warning', 'error'] as const).map((v): [Sheet, string, Record<string, string>] => ['dep', `.dep-viewer__detail-status--${v}`, { color: ink(v) }]),
+    ['kanban', '.lc-kanban__column-limit--over', { color: ink('error') }],
+    ...(['success', 'warning', 'error', 'info'] as const).flatMap((v): [Sheet, string, Record<string, string>][] => [
+      ['progress', `.progress-bar--${v} .progress-bar__fill`, { 'background-color': ink(v) }],
+      ['progress', `.progress-bar-circular--${v} .progress-bar-circular__fill`, { stroke: ink(v) }],
+    ]),
+  ];
+
+  it.each(swaps)('AC-1…10: %s %s reads the status ink (no raw colour)', (sheet, selector, expectedDecls) => {
+    const found = fills(sheet, selector);
+    for (const [property, value] of Object.entries(expectedDecls)) expect(found[property]).toBe(value);
+  });
+
+  it('AC-4: the notification type icons carry no hex fallback any more', () => {
+    expect(sheets.nc).not.toMatch(/#3b82f6|#22c55e|#f59e0b|#ef4444/i);
+  });
+
+  it('D-2: the level pills stay at full opacity; the pressed pill gets an outline in forced colours', () => {
+    expect(fills('log', '.lc-log-viewer__level-pill').opacity).toBeUndefined();
+    expect(fills('log', '.lc-log-viewer__level-pill--active').opacity).toBeUndefined();
+    expect(sheets.log).toMatch(
+      /@media \(forced-colors: active\) \{\s*\.lc-log-viewer__level-pill--active:not\(:focus-visible\) \{\s*outline: 2px solid Highlight;\s*outline-offset: 1px;\s*\}/,
+    );
+  });
+
+  it('AC-10: the progress track is unchanged; primary and secondary stay raw', () => {
+    // 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);
+  });
+
+  it('AC-9: kanban priorities, dependency relations, arrows and node borders read the inks', () => {
+    const source = (path: string) => readFileSync(lib(path), 'utf8');
+    const kanban = source('kanban-board/kanban-board.component.ts');
+    const depTs = source('dependency-viewer/dependency-viewer.component.ts');
+    const depHtml = source('dependency-viewer/dependency-viewer.component.html');
+    for (const text of [kanban, depTs, depHtml]) {
+      expect(text).not.toMatch(/--color-(success|warning|error|info)-default/);
+      expect(text).not.toMatch(/#3b82f6/i);
+    }
+    const priorities: [string, string][] = [['critical', 'error'], ['high', 'warning'], ['medium', 'info'], ['low', 'success']];
+    for (const [priority, v] of priorities) {
+      expect(kanban).toContain(`case '${priority}': return '${ink(v)}';`);
+    }
+    const relations: [string, string][] = [['blocks', 'error'], ['references', 'info'], ['requires', 'warning'], ['implements', 'success']];
+    for (const [relation, v] of relations) {
+      expect(depTs).toMatch(new RegExp(`${relation}:\\s*\\{ color: '${ink(v).replace(/[()]/g, '\\$&')}'`));
+      expect(depHtml).toMatch(new RegExp(`<marker id="arrow-${relation}"[^>]*><path [^>]*fill="${ink(v).replace(/[()]/g, '\\$&')}"/>`));
+    }
+    for (const v of ['success', 'warning', 'error']) {
+      expect(depTs).toMatch(new RegExp(`${v}:\\s*\\{ bg: '[^']+', border: '${ink(v).replace(/[()]/g, '\\$&')}'`));
+    }
+  });
+
+  /**
+   * Design 029 §5, per palette [light, dark]: the minimum over every listed
+   * element and its real backgrounds. Text 4.85 L (card success chip) and 4.60
+   * D (NC high on the panel top, card warning on surface-2); graphics 3.52 L
+   * (diff +, dependency success border) and 4.83 D (NC warning icon on an
+   * unread row). F-1: the NC high chip on an unread row in dark stays 3.67.
+   */
+  const expected = { text: [4.85, 4.6], graphic: [3.52, 4.83], ncUnread: [5.52, 3.67], completeGlyph: [4.36, 9.12] };
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+
+  /**
+   * Design 029 §2/§5 (r1, review finding 1): the terminal is always dark, so
+   * its levels use its own palette in both themes. The nested block of 3.21.0
+   * compiled to `.lc-log-viewer__line--<lv> .lc-log-viewer--terminal
+   * .lc-log-viewer__level` (a line outside the terminal), never matched, and
+   * left the terminal levels on the theme's colours (light ink: warn 2.40).
+   */
+  const terminalLevels: [string, string, number][] = [
+    ['debug', '#9399b2', 5.81],
+    ['info', '#89b4fa', 7.78],
+    ['warn', '#f9e2af', 11.43],
+    ['error', '#f38ba8', 6.19],
+  ];
+
+  it('AC-9 (r1): the terminal levels read the terminal palette at (0,3,0); the dead selector shape is gone', () => {
+    for (const [lv, hexValue] of terminalLevels) {
+      // Three classes beat the log variant's `.lc-log-viewer__line--<lv> .lc-log-viewer__level` (0,2,0).
+      expect(fills('log', `.lc-log-viewer--terminal .lc-log-viewer__line--${lv} .lc-log-viewer__level`)).toEqual({ color: hexValue });
+    }
+    expect(sheets.log).not.toMatch(/\.lc-log-viewer__line--[\w-]+ \.lc-log-viewer--terminal/);
+  });
+
+  it('AC-9 (r1): the terminal levels reach 4.5:1 on the terminal and its warn and error line tints, in both themes', () => {
+    const terminal = parse(fills('log', '.lc-log-viewer--terminal')['background-color']);
+    const lineTint = (lv: string) => over(parse(fills('log', `.lc-log-viewer--terminal .lc-log-viewer__line--${lv}`)['background-color']), terminal);
+    const bases: Record<string, Rgba> = { debug: terminal, info: terminal, warn: lineTint('warn'), error: lineTint('error') };
+    for (const [lv, hexValue, expectedRatio] of terminalLevels) {
+      const level = ratio(hexValue, bases[lv]);
+      expect(floor(level)).toBe(expectedRatio);
+      expect(level).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+
+  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 S = c('--color-surface');
+    const S2 = c('--color-surface-2');
+    const BG = c('--color-background');
+    const LOW = c('--color-background-low');
+    const SUN = c('--color-surface-sunken');
+    const TILE = c('--color-muted-tile');
+    const hov = (base: Rgba) => over(c('--color-surface-hover'), base);
+    const sel = (base: Rgba) => over(c('--color-surface-selected'), base);
+    /** A token or literal from a rule body, composited over `base`. */
+    const layer = (value: string, base: Rgba) => {
+      const ref = value.match(/^var\((--[\w-]+)\)$/);
+      return over(ref ? c(ref[1]) : parse(value), base);
+    };
+    const inkOf = (v: string) => c(`--color-on-${v}-subtle`);
+    const lowest = (fg: Rgba, bases: Rgba[]) => Math.min(...bases.map((bg) => ratio(over(fg, bg), bg)));
+
+    const panel = [S2, S, hov(S)];
+    const unread = [sel(S2), sel(S)];
+    const chip = (sheet: Sheet, selector: string, v: string, bases: Rgba[]) => {
+      const d = fills(sheet, selector);
+      return lowest(inkOf(v), bases.map((b) => layer(d.background ?? d['background-color'], b)));
+    };
+    const tint = (sheet: Sheet, selector: string, property: string, base: Rgba) => layer(fills(sheet, selector)[property], base);
+
+    const text = () => [
+      chip('nc', '.lc-nc__item-priority--high', 'warning', panel),
+      chip('nc', '.lc-nc__item-priority--urgent', 'error', panel),
+      // A selected card's background is --color-surface-selected over the page.
+      ...(['success', 'warning', 'error'] as const).map((v) => chip('card', `.card__badge--${v}`, v, [S, S2, hov(S), sel(BG), TILE])),
+      lowest(inkOf('error'), [BG, S, S2, LOW, SUN]),
+      lowest(inkOf('info'), [S, hov(S), tint('log', '.lc-log-viewer__line:hover', 'background-color', S)]),
+      lowest(inkOf('warning'), [tint('log', '.lc-log-viewer--log .lc-log-viewer__line--warn', 'background-color', S)]),
+      lowest(inkOf('error'), [tint('log', '.lc-log-viewer--log .lc-log-viewer__line--error', 'background-color', S)]),
+      lowest(inkOf('warning'), [tint('log', '.lc-log-viewer__level-pill--warn', 'background-color', S)]),
+      lowest(inkOf('error'), [tint('log', '.lc-log-viewer__level-pill--error', 'background-color', S)]),
+      lowest(inkOf('success'), [S2]),
+      lowest(inkOf('error'), [S2]),
+      ...['success', 'warning', 'error', 'info'].map((v) => lowest(inkOf(v), [S, S2])),
+      lowest(inkOf('error'), [layer('var(--color-error-50)', S), layer('var(--color-error-50)', BG)]),
+    ];
+
+    const graphic = () => [
+      ...['success', 'warning', 'error', 'info'].map((v) => lowest(inkOf(v), [...panel, ...unread])),
+      ...['success', 'warning', 'error'].map((v) => lowest(inkOf(v), [S, BG, S2])),
+      lowest(inkOf('error'), [tint('upload', '.file-upload__file-remove:hover', 'background', S2)]),
+      ...['success', 'error'].map((v) => lowest(inkOf(v), [layer(`var(--color-${v}-50)`, S), layer(`var(--color-${v}-50)`, BG)])),
+      ...['success', 'warning', 'error'].map((v) => lowest(inkOf(v), [layer(`var(--color-${v}-50)`, S), S])),
+      ...['success', 'warning', 'error', 'info'].map((v) => lowest(inkOf(v), [S])),
+      ...['success', 'warning', 'error', 'info'].map((v) => lowest(inkOf(v), [hov(S), hov(BG), hov(S2)])),
+    ];
+
+    it('AC-1/2/3/9: every listed status text reaches 4.5:1 on its real backgrounds', () => {
+      const min = Math.min(...text());
+      expect(floor(min)).toBe(expected.text[i]);
+      expect(min).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-4…10: every listed status icon, glyph, border and progress fill reaches 3:1', () => {
+      const min = Math.min(...graphic());
+      expect(floor(min)).toBe(expected.graphic[i]);
+      expect(min).toBeGreaterThanOrEqual(3);
+    });
+
+    it('D-4: the pipeline complete check reaches 3:1 on its node fill', () => {
+      const glyph = ratio(c('--color-surface'), c('--color-primary-500'));
+      expect(floor(glyph)).toBe(expected.completeGlyph[i]);
+      expect(glyph).toBeGreaterThanOrEqual(3);
+    });
+
+    it('F-1 (known): the NC priority chips on an unread row', () => {
+      const min = Math.min(
+        chip('nc', '.lc-nc__item-priority--high', 'warning', unread),
+        chip('nc', '.lc-nc__item-priority--urgent', 'error', unread),
+      );
+      expect(floor(min)).toBe(expected.ncUnread[i]);
+    });
+  });
+});

package/types/lifecorner-angular-ui-kit-bar-chart.d.ts

@@ -1,12 +1,29 @@
-import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
 import * as i0 from "@angular/core";
 export interface BarChartItem {
   /** Bar value. Negative values draw downward (left) from the zero baseline. */
   value: number;
   label?: string;
   color?: string;
+  /**
+   * The text shown as this bar's value and read in the generated aria label,
+   * instead of `formatValue(value, item)`, for example "313.000,00 · 54,8 %".
+   * The kit shows it as given and never formats or computes it. An empty
+   * string shows no value for this bar.
+   */
+  valueText?: string;
 }
 export type BarChartOrientation = 'vertical' | 'horizontal';
+/**
+ * How the category labels are set: `'axis'` (one line of SVG text on the
+ * category axis) or `'wrap'` (HTML text that wraps and follows the text size).
+ */
+export type BarChartLabelLayout = 'axis' | 'wrap';
+/**
+ * Signature of `lc-bar-chart`'s `formatValue`. A bar's value label passes the
+ * bar's item; an axis tick passes the tick only (`item` is `undefined`).
+ * One-argument formatters keep working.
+ */
+export type BarChartValueFormatter = (value: number, item?: BarChartItem) => string;
 export declare class BarChartComponent {
   private readonly _el;
   private readonly _destroyRef;
@@ -20,28 +37,71 @@ export declare class BarChartComponent {
    * `width` is the viewBox width until the container has been measured and,
    * when set, the host's `max-width`, so the chart never grows past it. Leave
    * unset for a fully fluid chart.
+   * @default undefined
    */
   width: import("@angular/core").InputSignal<number | undefined>;
-  /** Chart height in pixels. */
+  /**
+   * Chart height in pixels. A horizontal `'wrap'` chart takes the height of
+   * its rows; a vertical `'wrap'` chart adds its label row below this height.
+   * @default 200
+   */
   height: import("@angular/core").InputSignal<number>;
-  /** Bar orientation. */
+  /**
+   * Bar orientation.
+   * @default 'vertical'
+   */
   orientation: import("@angular/core").InputSignal<BarChartOrientation>;
-  /** Show value labels on bars. */
+  /**
+   * Show value labels on bars. In horizontal `'wrap'` rows the value sits at
+   * the end of the label line.
+   * @default true
+   */
   showValues: import("@angular/core").InputSignal<boolean>;
-  /** Show axis labels. */
+  /**
+   * Show axis labels.
+   * @default true
+   */
   showLabels: import("@angular/core").InputSignal<boolean>;
-  /** Show grid lines. */
+  /**
+   * How the category labels are set. `'axis'`: one line of SVG text on the
+   * category axis, in a fixed 40 px band left of a horizontal bar or centred
+   * under a vertical column. Long labels can run out of the chart. `'wrap'`:
+   * HTML text that wraps to the room it needs and follows the text size. A
+   * horizontal chart becomes a list of rows: the label and the value on one
+   * line (the value moves under the label when both don't fit), and below
+   * them the bar across the full width. The longest bar fills the width, and
+   * `height`, `barGap` and `showGrid` don't apply. A vertical chart keeps its
+   * plot and wraps each label within its column, under the chart.
+   * @default 'axis'
+   */
+  labelLayout: import("@angular/core").InputSignal<BarChartLabelLayout>;
+  /**
+   * Show grid lines. Not used by horizontal `'wrap'` rows.
+   * @default true
+   */
   showGrid: import("@angular/core").InputSignal<boolean>;
-  /** Gap between bars as ratio (0-1). */
+  /**
+   * Gap between bars as ratio (0-1). Not used by horizontal `'wrap'` rows.
+   * @default 0.3
+   */
   barGap: import("@angular/core").InputSignal<number>;
-  /** Use a single color for all bars. */
+  /**
+   * Use a single color for all bars.
+   * @default ''
+   */
   color: import("@angular/core").InputSignal<string>;
-  /** Formats value labels and axis ticks. Defaults to a float-safe `String(value)`. */
-  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Formats the value labels and the axis ticks. For a bar it gets the bar's
+   * item as the second argument; for an axis tick it gets the tick only
+   * (`item` is `undefined`). An item's `valueText` takes precedence.
+   * @default float-safe `String(value)`
+   */
+  formatValue: import("@angular/core").InputSignal<BarChartValueFormatter>;
   /**
    * Accessible name of the chart. Defaults to a generated summary that lists
    * every bar's label and value, so assistive technology hears the data and
    * not just "Bar chart".
+   * @default ''
    */
   ariaLabel: import("@angular/core").InputSignal<string>;
   private readonly PADDING_LEFT;
@@ -51,7 +111,19 @@ export declare class BarChartComponent {
   protected readonly effectiveWidth: import("@angular/core").Signal<number>;
   protected readonly viewBox: import("@angular/core").Signal<string>;
   protected readonly isVertical: import("@angular/core").Signal<boolean>;
+  /** Horizontal `'wrap'`: HTML rows instead of the SVG plot. */
+  protected readonly wrapRows: import("@angular/core").Signal<boolean>;
+  /** Vertical `'wrap'`: the SVG plot, with the category labels as an HTML row under it. */
+  protected readonly wrapColumns: import("@angular/core").Signal<boolean>;
+  /**
+   * Room under the plot. `'axis'` keeps 30 for the SVG labels; vertical
+   * `'wrap'` labels sit under the SVG, so only 2 are left, or 18 when a
+   * negative bar's value label hangs below it.
+   */
+  private readonly paddingBottom;
   private readonly plot;
+  /** A bar's text: `valueText`, else `formatValue(value, item)`. */
+  private textOf;
   /**
    * One scale for grid *and* bars: bounds are nice multiples of the tick step,
    * always include zero, and extend below zero when the data does — so the top
@@ -95,6 +167,24 @@ export declare class BarChartComponent {
   }>;
   /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */
   protected readonly plotBottom: import("@angular/core").Signal<number>;
+  /**
+   * Bounds of the horizontal `'wrap'` rows: zero is always inside, and the
+   * longest bar fills the track.
+   */
+  private readonly rowBounds;
+  /**
+   * Horizontal `'wrap'` rows. Bar `x` and `width` are percentages of the
+   * track, so the server HTML is final before the container is measured.
+   */
+  protected readonly rows: import("@angular/core").Signal<{
+    label: string;
+    valueText: string;
+    color: string;
+    x: string;
+    width: string;
+  }[]>;
+  /** Position of the zero line in the `'wrap'` rows; `null` without negative values. */
+  protected readonly rowZero: import("@angular/core").Signal<string | null>;
   protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "lc-bar-chart", never, {
@@ -128,6 +218,11 @@ export declare class BarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelLayout": {
+      "alias": "labelLayout";
+      "required": false;
+      "isSignal": true;
+    };
     "showGrid": {
       "alias": "showGrid";
       "required": false;