@lifecorner/angular-ui-kit 3.26.0 → 3.27.1

package/src/styles/focus-indicators.spec.ts

@@ -0,0 +1,205 @@
+import { compile } from 'sass';
+import { resolve } from 'path';
+
+/**
+ * Request 042 (3.27, design 042 D-1 to D-9): the guard for F-18 and F-19.
+ * Every element of design §6.1 rows B–F has a `:focus-visible` indicator of its
+ * own (kit ring: 2 px `--color-primary-500`), `Highlight` in forced colours;
+ * the global button reset only takes the ring from mouse focus; a field's hover
+ * rule never applies while it is focused. Read from the compiled SCSS sources.
+ */
+const sheets = new Map<string, string>();
+const css = (file: string): string => {
+  if (!sheets.has(file)) sheets.set(file, compile(resolve(__dirname, file.startsWith('_') ? file : `../lib/${file}`)).css);
+  return sheets.get(file) as string;
+};
+
+const rulesOf = (text: string) =>
+  [...text.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].replace(/\s+/g, ' ').trim()]));
+const forcedBlock = /@media \(forced-colors: active\) \{((?:[^{}]*\{[^{}]*\})*)\s*\}/g;
+
+/** Every rule naming `selector`, merged in source order, forced-colours blocks left out. */
+const fills = (file: string, selector: string): Record<string, string> => {
+  const found = rulesOf(css(file).replace(forcedBlock, '')).filter((r) => r.selectors.includes(selector));
+  expect([file, selector, found.length > 0]).toEqual([file, selector, true]);
+  return Object.assign({}, ...found.map((r) => decls(r.body)));
+};
+/** The same, inside the forced-colours blocks only. */
+const forcedFills = (file: string, selector: string): Record<string, string> => {
+  const inner = [...css(file).matchAll(forcedBlock)].map((m) => m[1]).join('\n');
+  return Object.assign({}, ...rulesOf(inner).filter((r) => r.selectors.includes(selector)).map((r) => decls(r.body)));
+};
+
+const RING = '2px solid var(--color-primary-500)';
+
+/** Design 042 §3: [sheet, element class, outline offset]. Rows B–D, kanban (D-3), remove (D-8), dep canvas (D-7). */
+const rings: [string, string, string][] = [
+  ['rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__toolbar-btn', '2px'],
+  ['rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__mode-btn', '2px'],
+  ['document-viewer/document-viewer.component.scss', '.doc-viewer__btn', '2px'],
+  ['document-viewer/document-viewer.component.scss', '.doc-viewer__download-btn', '2px'],
+  ['filter-bar/filter-bar.component.scss', '.lc-filter-bar__toggle-btn', '-2px'],
+  // 2px → 0 by review 043 r1 F3: the button grew from 20 to 24 px (2 px padding
+  // inside a −2 px margin), so offset 0 draws the ring where 2 px round 20 px did.
+  ['select/select.component.scss', '.lc-select__clear', '0'],
+  ['gallery/gallery.component.scss', '.gallery__filter-btn', '2px'],
+  ['log-viewer/log-viewer.component.scss', '.lc-log-viewer__level-pill', '2px'],
+  ['callout/callout.component.scss', '.callout__dismiss', '2px'],
+  ['notification-center/notification-center.component.scss', '.lc-nc__action-btn', '2px'],
+  ['notification-center/notification-center.component.scss', '.lc-nc__filter', '2px'],
+  ['tabs/tabs.component.scss', '.lc-tabs__panel', '-2px'],
+  ['chat/chat.component.scss', '.lc-chat__attachment', '2px'],
+  ['chat/chat.component.scss', '.lc-chat__attach-btn', '2px'],
+  ['chat/chat.component.scss', '.lc-chat__send-btn', '2px'],
+  ['chat/chat.component.scss', '.lc-chat__pending-remove', '2px'],
+  ['description-list/description-list.component.scss', '.lc-dl__link', '2px'],
+  ['color-picker/color-picker.component.scss', '.color-picker__native', '2px'],
+  ['table/table.component.scss', '.lc-table__checkbox', '2px'],
+  ['number-input/number-input.component.scss', '.number-input__button', '-2px'],
+  ['tag-input/tag-input.component.scss', '.lc-tag-input__tag-remove', '2px'],
+  ['file-upload/file-upload.component.scss', '.file-upload__file-remove', '2px'],
+  // Review 042 r1: inset, an outside ring measured 2.19:1 on an over-limit column (light).
+  ['kanban-board/kanban-board.component.scss', '.lc-kanban__card', '-2px'],
+  ['dependency-viewer/dependency-viewer.component.scss', '.dep-viewer__canvas--scroll', '-2px'],
+];
+
+describe('Focus indicators (request 042)', () => {
+  describe('D-1: the global button reset', () => {
+    it('AC-5: takes the outline from mouse focus only, so a button with no ring of its own keeps the browser ring on Tab', () => {
+      const reset = css('_reset.scss');
+      expect(reset).toMatch(/\nbutton:focus:not\(:focus-visible\) \{\s*outline: none;\s*\}/);
+      expect(reset).not.toMatch(/\nbutton:focus \{/);
+    });
+  });
+
+  describe('D-2: the kit ring on every §6.1 B–D element', () => {
+    it.each(rings)('AC-2: %s %s draws a solid 2 px primary-500 outline (offset %s), no halo', (file, cls, offset) => {
+      const ring = fills(file, `${cls}:focus-visible`);
+      expect([ring.outline, ring['outline-offset']]).toEqual([RING, offset]);
+      expect(ring['box-shadow']).toBeUndefined();
+      expect(ring.transition).toBeUndefined();
+    });
+
+    it.each(rings)('AC-3: %s %s turns Highlight in forced colours', (file, cls) => {
+      expect(forcedFills(file, `${cls}:focus-visible`)['outline-color']).toBe('Highlight');
+    });
+
+    it.each(rings)('AC-4: %s %s draws no ring on mouse focus (no outline on a bare :focus rule)', (file, cls) => {
+      const bare = rulesOf(css(file).replace(forcedBlock, '')).filter((r) => r.selectors.includes(`${cls}:focus`));
+      for (const r of bare) expect([cls, decls(r.body).outline ?? 'none']).toEqual([cls, 'none']);
+    });
+
+    it('AC-2: the dimmed buttons turn fully opaque on focus (the ring is not dimmed with them)', () => {
+      expect(fills('callout/callout.component.scss', '.callout__dismiss').opacity).toBe('0.6');
+      expect(fills('callout/callout.component.scss', '.callout__dismiss:focus-visible').opacity).toBe('1');
+      expect(fills('tag-input/tag-input.component.scss', '.lc-tag-input__tag-remove').opacity).toBe('0.7');
+      expect(fills('tag-input/tag-input.component.scss', '.lc-tag-input__tag-remove:focus-visible').opacity).toBe('1');
+    });
+
+    // Offset 2px → -2px by review 042 r1: outside, the ring sat on the column tint
+    // (2.19:1 on an over-limit column, light); inset it sits on the card (4.36 / 9.12).
+    it('AC-2: the kanban card drops its 20 % halo (1.28:1) for an inset ring on the card and keeps the border change', () => {
+      expect(fills('kanban-board/kanban-board.component.scss', '.lc-kanban__card:focus-visible')).toEqual({
+        outline: RING,
+        'outline-offset': '-2px',
+        'border-color': 'var(--color-primary-500)',
+      });
+    });
+  });
+
+  describe('D-3: indicators that forced colours drop', () => {
+    const forced: [string, string, Record<string, string>][] = [
+      ['toggle-group/toggle-group.component.scss', '.lc-toggle-group__btn:focus-visible', { outline: '2px solid Highlight', 'outline-offset': '-2px' }],
+      ['list/list.component.scss', '.lc-list__item:focus-visible', { outline: '2px solid Highlight', 'outline-offset': '-2px' }],
+      ['gantt-chart/gantt-chart.component.scss', '.lc-gantt__bar:focus-visible', { outline: '2px solid Highlight', 'outline-offset': '2px' }],
+      ['split-pane/split-pane.component.scss', '.lc-split-pane__separator:focus-visible', { outline: '2px solid Highlight', 'outline-offset': '-2px' }],
+      ['scatter-plot/scatter-plot.component.scss', '.lc-scatter-plot__dot:focus-visible', { stroke: 'Highlight' }],
+    ];
+
+    it.each(forced)('AC-3: %s %s has its own forced-colours indicator', (file, selector, expected) => {
+      expect(forcedFills(file, selector)).toEqual(expected);
+    });
+
+    it('AC-7: their normal-mode indicators are unchanged', () => {
+      expect(fills('toggle-group/toggle-group.component.scss', '.lc-toggle-group__btn:focus-visible')['box-shadow']).toBe('inset 0 0 0 2px var(--color-primary-500)');
+      expect(fills('list/list.component.scss', '.lc-list__item:focus-visible')['box-shadow']).toBe('inset 0 0 0 2px var(--color-primary-500)');
+      expect(fills('gantt-chart/gantt-chart.component.scss', '.lc-gantt__bar:focus-visible')['box-shadow']).toBe('0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500)');
+      expect(fills('split-pane/split-pane.component.scss', '.lc-split-pane__separator:focus-visible::before').background).toBe('var(--color-primary-500)');
+      expect(fills('scatter-plot/scatter-plot.component.scss', '.lc-scatter-plot__dot:focus-visible').stroke).toBe('var(--color-text-primary)');
+    });
+  });
+
+  describe('D-9: the rich-text editing surface', () => {
+    const frame = '.lc-rich-text-editor:has(.lc-rich-text-editor__rich:focus-visible, .lc-rich-text-editor__textarea:focus-visible)';
+    const file = 'rich-text-editor/rich-text-editor.component.scss';
+
+    it('AC-2: the frame shows the field ring (lc-input pattern); the surfaces keep outline: none', () => {
+      expect(fills(file, frame)).toEqual({ 'border-color': 'var(--color-primary-500)', outline: RING, 'outline-offset': '0px' });
+      expect(fills(file, '.lc-rich-text-editor__rich').outline).toBe('none');
+      expect(fills(file, '.lc-rich-text-editor__textarea').outline).toBe('none');
+    });
+
+    it('AC-3: the ancestor ring has its own Highlight rule', () => {
+      expect(forcedFills(file, frame)).toEqual({ 'border-color': 'Highlight', 'outline-color': 'Highlight' });
+    });
+  });
+
+  describe('D-4: the light header on a dark page', () => {
+    const file = 'header/header.component.scss';
+    const own = ['.lc-header__nav-link', '.lc-header__logo', '.lc-header__context-info', '.lc-header__profile-trigger'];
+
+    it('AC-2: the header-owned rings read the private ring colour, primary-500 by default', () => {
+      for (const cls of own) {
+        expect([cls, fills(file, `${cls}:focus-visible`).outline]).toEqual([cls, '2px solid var(--_lc-header-ring, var(--color-primary-500))']);
+      }
+    });
+
+    it('AC-2: theme="light" pins the light primary-500: 4.36:1 on its white bar in both themes (dark primary-500 was 1.89)', () => {
+      const light = fills(file, '.lc-header--light');
+      expect([light['--_lc-header-ring'], light['--lc-header-bg']]).toEqual(['#208497', '#ffffff']);
+      const lum = (hex: string) =>
+        [1, 3, 5]
+          .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+          .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+          .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+      expect(Math.floor(((lum('#ffffff') + 0.05) / (lum('#208497') + 0.05)) * 100) / 100).toBe(4.36);
+    });
+  });
+
+  describe('D-6: focus wins over hover in every field with the pattern (F-19)', () => {
+    // [sheet, hover selector after the fix, declarations it keeps]
+    // Request 043 (F-23, design D-5) changed the first seven rows on purpose:
+    // they also exclude the error class (an error field kept no error border
+    // under the pointer), and the textarea/datepicker outline hover moved from
+    // --color-primary-400 (1.89:1 light) to --color-text-secondary (7.55:1).
+    const hovers: [string, string, Record<string, string>][] = [
+      ['textarea/textarea.component.scss', '.lc-textarea--outline:hover:not(:disabled):not(:read-only):not(.lc-textarea--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['textarea/textarea.component.scss', '.lc-textarea--filled:hover:not(:disabled):not(:read-only):not(.lc-textarea--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)' }],
+      ['datepicker/datepicker.component.scss', '.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['datepicker/datepicker.component.scss', '.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
+      ['input/input.component.scss', '.input-container:hover:not(.input-disabled):not(.input-readonly):not(.input-invalid):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['select/select.component.scss', '.lc-select:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['select/select.component.scss', '.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
+      ['search-input/search-input.component.scss', '.search-input:hover:not(.search-input--disabled):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['tag-input/tag-input.component.scss', '.lc-tag-input__container:hover:not(.lc-tag-input__container--focused)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['date-range-picker/date-range-picker.component.scss', '.lc-drp__field:hover:not(.lc-drp__field--disabled):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
+    ];
+
+    it.each(hovers)('AC-6/AC-7: %s %s keeps its look and excludes focus', (file, selector, expected) => {
+      expect(fills(file, selector)).toEqual(expected);
+    });
+
+    it.each(hovers)('AC-6: %s has no other hover rule on that field', (file, selector) => {
+      const field = selector.slice(0, selector.indexOf(':hover'));
+      const others = rulesOf(css(file).replace(forcedBlock, ''))
+        .flatMap((r) => r.selectors)
+        .filter((s) => s.startsWith(`${field}:hover`) && s !== selector);
+      expect(others).toEqual([]);
+    });
+  });
+});

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

@@ -981,9 +981,21 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
     ['diff', '.lc-diff__num', { color: secondary }],
     // F-4: the lc-badge primary pair with a primary border.
     ['card', '.card__badge--primary', { 'background-color': 'var(--color-primary-subtle)', color: 'var(--color-on-primary-subtle)', border: '1px solid var(--color-primary-500)' }],
-    // F-5: a 40 px hit area into half of each gap; the visible pill is unchanged.
+    // F-5: a hit area into half of each gap; the visible pill is unchanged.
+    // Request 043 (F-22) raised it from 40 to 44 px high (and at least 44 wide):
+    // the spacing exception is no longer relied on.
     ['log', '.lc-log-viewer__level-pill', { position: 'relative', padding: '0.125rem 0.5rem', 'font-size': '0.6875rem' }],
-    ['log', '.lc-log-viewer__level-pill::before', { content: '""', position: 'absolute', 'inset-inline': '-0.125rem', top: 'calc(50% - 20px)', bottom: 'calc(50% - 20px)' }],
+    [
+      'log',
+      '.lc-log-viewer__level-pill::before',
+      {
+        content: '""',
+        position: 'absolute',
+        'inset-inline': 'min(-0.125rem, (100% - var(--size-min-touch-height, 2.75rem)) / 2)',
+        top: 'calc(50% - var(--size-min-touch-height, 2.75rem) / 2)',
+        bottom: 'calc(50% - var(--size-min-touch-height, 2.75rem) / 2)',
+      },
+    ],
     // F-7: three text steps instead of opacity, in the log and the terminal.
     ['log', '.lc-log-viewer__line--debug', { color: secondary }],
     ...meta.map((m): Row => ['log', `.lc-log-viewer__${m}`, { color: secondary }]),

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

@@ -58,3 +58,43 @@ describe('Theme modes', () => {
     expect(tokens['--app-background-image']).toContain('rgba(78, 63, 132, 0.14)');
   });
 });
+
+/**
+ * Request 043 (F-25, design D-7): a header with `theme="light"` / `"dark"`
+ * re-declares every colour token of that theme, so its slot content (buttons,
+ * links, the theme toggle, the account menu) resolves the header's palette
+ * instead of the page's. Derived tokens resolve where they are declared, so
+ * the set must be complete.
+ */
+describe('Theme scope of a themed header', () => {
+  const COLOUR = /^--(color-|gradient-|shadow-|elevation-|accent-line$|app-background-image$)/;
+  const colours = (tokens: Record<string, string>) =>
+    Object.fromEntries(Object.entries(tokens).filter(([name]) => COLOUR.test(name)));
+
+  it('AC-6: .lc-header--light declares exactly the colour tokens of the light root (172), with the same values', () => {
+    const root = tokensOf(light, ':root,');
+    const header = tokensOf(light, '\n.lc-header--light {');
+    expect(Object.keys(header)).toHaveLength(172);
+    expect(header).toEqual(colours(root));
+  });
+
+  it('AC-7: .lc-header--dark declares exactly the colour tokens of the dark root (172), with the same values', () => {
+    const root = tokensOf(dark, ':root.dark,');
+    const header = tokensOf(dark, '\n.lc-header--dark {');
+    expect(Object.keys(header)).toHaveLength(172);
+    expect(header).toEqual(colours(root));
+  });
+
+  it('AC-12: the root rules still declare the full token set (252 per theme), colours and the rest', () => {
+    expect(Object.keys(tokensOf(light, ':root,'))).toHaveLength(252);
+    expect(Object.keys(tokensOf(dark, ':root.dark,'))).toHaveLength(252);
+    expect(Object.keys(colours(tokensOf(light, ':root,')))).toHaveLength(172);
+  });
+
+  it('scopes only the header: each theme file emits the header rule once, after its root rules', () => {
+    expect(light.match(/\.lc-header--light \{/g)).toHaveLength(1);
+    expect(dark.match(/\.lc-header--dark \{/g)).toHaveLength(1);
+    expect(light.indexOf('.lc-header--light {')).toBeGreaterThan(light.indexOf(':root,'));
+    expect(dark.indexOf('.lc-header--dark {')).toBeGreaterThan(dark.indexOf(':root.system {'));
+  });
+});

package/src/styles/touch-targets-contrast.spec.ts

@@ -0,0 +1,286 @@
+import { compile } from 'sass';
+import { resolve } from 'path';
+
+/**
+ * Request 043 (3.27.1, design 043 D-1 to D-10): the follow-ups F-22 to F-27 of
+ * the 042 sweep, read from the compiled SCSS and the theme files. Hit areas
+ * grow without paint and the visible boxes keep their size (D-1, D-3); the
+ * dense toolbars get real 44 px buttons (D-2); field hover keeps 3:1 and never
+ * hides the error state (D-5); the rich-text frame is a field boundary (D-6);
+ * the F-26 inks and the kanban tint reach their contrast (D-8, D-10).
+ */
+const sheets = new Map<string, string>();
+const css = (file: string): string => {
+  if (!sheets.has(file)) sheets.set(file, compile(resolve(__dirname, file.startsWith('_') ? file : `../lib/${file}`)).css);
+  return sheets.get(file) as string;
+};
+const forcedBlock = /@media \(forced-colors: active\) \{((?:[^{}]*\{[^{}]*\})*)\s*\}/g;
+const rulesOf = (text: string) =>
+  [...text.replace(forcedBlock, '').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].replace(/\s+/g, ' ').trim()]));
+/** Every rule naming `selector`, merged in source order, forced-colours blocks left out. */
+const fills = (file: string, selector: string): Record<string, string> => {
+  const found = rulesOf(css(file)).filter((r) => r.selectors.includes(selector));
+  expect([file, selector, found.length > 0]).toEqual([file, selector, true]);
+  return Object.assign({}, ...found.map((r) => decls(r.body)));
+};
+
+// ── Colours: the root rule of each theme file, var() followed ─────────────
+type Rgba = [number, number, number, number];
+function rootTokens(file: string, selector: string): Record<string, string> {
+  const text = css(file);
+  const open = text.indexOf('{', text.indexOf(selector));
+  const tokens: Record<string, string> = {};
+  for (const m of text.slice(open, text.indexOf('}', open)).matchAll(/(--[\w-]+):\s*([^;]+);/g)) tokens[m[1]] = m[2].replace(/\s+/g, ' ').trim();
+  return tokens;
+}
+const themes: [string, Record<string, string>][] = [
+  ['light', rootTokens('_theme-light.scss', ':root,')],
+  ['dark', rootTokens('_theme-dark.scss', ':root.dark,')],
+];
+function parse(value: string): Rgba {
+  const rgba = value.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+  if (rgba) return [Number(rgba[1]), Number(rgba[2]), Number(rgba[3]), rgba[4] === undefined ? 1 : Number(rgba[4])];
+  if (!/^#[0-9a-f]{6}$/i.test(value)) throw new Error(`not a colour: ${value}`);
+  return [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16)).concat(1) as Rgba;
+}
+/** A declared value (`var(--x)`, `var(--x, fallback)`, hex, rgba) in one theme. */
+function colour(tokens: Record<string, string>, value: string, depth = 0): Rgba {
+  const ref = value.trim().match(/^var\((--[\w-]+)(?:,\s*(.+))?\)$/);
+  if (!ref) return parse(value.trim());
+  if (depth > 10) throw new Error(`${value} does not resolve`);
+  return tokens[ref[1]] !== undefined ? colour(tokens, tokens[ref[1]], depth + 1) : colour(tokens, ref[2], depth + 1);
+}
+const over = (top: Rgba, base: Rgba): Rgba => [0, 1, 2].map((i) => top[i] * top[3] + base[i] * (1 - top[3])).concat(1) as Rgba;
+const mix = (a: Rgba, share: number, b: Rgba): Rgba => [0, 1, 2].map((i) => a[i] * share + b[i] * (1 - share)).concat(1) as Rgba;
+const lum = (c: Rgba) =>
+  c
+    .slice(0, 3)
+    .map((v) => v / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+    .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+/** WCAG ratio, floored to two decimals (as the design's measure script). */
+const ratio = (a: Rgba, b: Rgba) => {
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
+  return Math.floor(((hi + 0.05) / (lo + 0.05)) * 100) / 100;
+};
+
+const TOUCH = 'var(--size-min-touch-height, 2.75rem)';
+
+describe('Touch targets, hover borders and contrast (request 043)', () => {
+  it('the touch size token is 44 px in both themes', () => {
+    for (const [, t] of themes) expect(t['--size-min-touch-height']).toBe('2.75rem');
+  });
+
+  describe('D-1 / D-3: hit areas without paint; the visible control keeps its size (AC-1, AC-2)', () => {
+    const centred = { 'inset-inline': `min(0px, (100% - ${TOUCH}) / 2)`, top: `calc(50% - ${TOUCH} / 2)`, bottom: `calc(50% - ${TOUCH} / 2)` };
+    // [sheet, control, its hit area, the visible box that must not change]
+    const areas: [string, string, Record<string, string>, Record<string, string>][] = [
+      ['notification-center/notification-center.component.scss', '.lc-nc__action-btn', centred, { padding: '4px 8px', 'font-size': '0.75rem' }],
+      ['notification-center/notification-center.component.scss', '.lc-nc__filter', centred, { padding: '4px 10px', 'font-size': '0.6875rem', 'white-space': 'nowrap' }],
+      [
+        'log-viewer/log-viewer.component.scss',
+        '.lc-log-viewer__level-pill',
+        { 'inset-inline': `min(-0.125rem, (100% - ${TOUCH}) / 2)`, top: centred.top, bottom: centred.bottom },
+        { padding: '0.125rem 0.5rem', 'font-size': '0.6875rem' },
+      ],
+      ['callout/callout.component.scss', '.callout__dismiss', { inset: `calc((1.5rem - ${TOUCH}) / 2)` }, { width: '1.5rem', height: '1.5rem' }],
+      ['chat/chat.component.scss', '.lc-chat__send-btn', { inset: `calc((2rem - ${TOUCH}) / 2)` }, { width: '2rem', height: '2rem' }],
+      ['chat/chat.component.scss', '.lc-chat__attach-btn', { inset: `calc((2rem - ${TOUCH}) / 2)` }, { width: '2rem', height: '2rem' }],
+      // D-3: 24 × 24 (WCAG 2.5.8 by size): 44 would cover the next chip row.
+      ['tag-input/tag-input.component.scss', '.lc-tag-input__tag-remove', { inset: '-0.25rem' }, { width: '16px', height: '16px' }],
+    ];
+
+    it.each(areas)('%s %s: a positioned host and a transparent ::before with exactly the hit-area box', (file, cls, area, box) => {
+      expect(fills(file, cls).position).toBe('relative');
+      expect(fills(file, `${cls}::before`)).toEqual({ content: '""', position: 'absolute', ...area });
+      const host = fills(file, cls);
+      for (const [property, value] of Object.entries(box)) expect([cls, property, host[property]]).toEqual([cls, property, value]);
+    });
+
+    // Review 043 r1 F3: the select × was a 20 px box with a 24 px `::before`; axe
+    // `target-size` reads the element's own box and flagged it (×12). It is now a
+    // 24 px box whose 2 px padding the negative margin takes back: the layout
+    // footprint, the 20 px hover fill (content-box) and the ring (offset 0 on 24 px
+    // = 2 px round 20 px) are unchanged; 44 px would leave the field.
+    it('the select × is a 24 × 24 px box with the 20 px layout, hover fill and ring of 3.27.0', () => {
+      const file = 'select/select.component.scss';
+      expect(fills(file, '.lc-select__clear')).toMatchObject({
+        width: '1.5rem',
+        height: '1.5rem',
+        margin: '-0.125rem',
+        padding: '0.125rem',
+        'background-clip': 'content-box',
+        'border-radius': 'calc(var(--border-radius-sm) + 0.125rem)',
+      });
+      expect(rulesOf(css(file)).some((r) => r.selectors.includes('.lc-select__clear::before'))).toBe(false);
+      expect(fills(file, '.lc-select__clear:focus-visible')['outline-offset']).toBe('0');
+      expect(fills(file, '.lc-select__clear:hover')['background-clip']).toBeUndefined();
+    });
+
+    it('the 24 px areas are 24 px: 1.5rem with 24 − 2 × 2 = 20 in the layout (select ×) and 16 + 2 × 4 (tag ×)', () => {
+      expect(1.5 * 16).toBe(24);
+      expect(1.5 * 16 - 2 * 0.125 * 16).toBe(20);
+      expect(16 + 2 * 0.25 * 16).toBe(24);
+    });
+
+    it('the rows the hit areas sit in grew just enough: NC filters 9 px (26.5 + 2 × 8.75), log toolbar 8 px', () => {
+      expect(fills('notification-center/notification-center.component.scss', '.lc-nc__filters').padding).toBe('9px 16px');
+      expect(fills('log-viewer/log-viewer.component.scss', '.lc-log-viewer__toolbar').padding).toBe('0.5rem');
+    });
+  });
+
+  describe('D-2: real 44 px buttons where the pitch leaves no room (AC-1, AC-2)', () => {
+    it('rich-text toolbar buttons are 44 × 44, mode buttons at least 44 × 44', () => {
+      const btn = fills('rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__toolbar-btn');
+      expect([btn.width, btn.height]).toEqual([TOUCH, TOUCH]);
+      const mode = fills('rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__mode-btn');
+      expect([mode['min-width'], mode['min-height'], mode.padding]).toEqual([TOUCH, TOUCH, 'var(--spacing-1) var(--spacing-2)']);
+    });
+
+    it('document-viewer tools are 44 × 44 and the toolbar wraps instead of overflowing', () => {
+      const file = 'document-viewer/document-viewer.component.scss';
+      const btn = fills(file, '.doc-viewer__btn');
+      expect([btn.width, btn.height]).toEqual([TOUCH, TOUCH]);
+      expect(fills(file, '.doc-viewer__toolbar')['flex-wrap']).toBe('wrap');
+      expect(fills(file, '.doc-viewer__toolbar-left')).toMatchObject({ flex: '1 1 10rem', 'min-width': '0' });
+      expect(fills(file, '.doc-viewer__toolbar-right')).toMatchObject({
+        'flex-wrap': 'wrap',
+        'justify-content': 'flex-end',
+        'row-gap': 'var(--spacing-1)',
+        'flex-shrink': '1',
+        'min-width': '0',
+        'margin-inline-start': 'auto',
+      });
+    });
+  });
+
+  describe('D-5: field hover (F-23, AC-3, AC-4)', () => {
+    // [sheet, the field's selector prefix, its error class]
+    const fields: [string, RegExp, string][] = [
+      ['input/input.component.scss', /^\.input-container[:.]/, '.input-invalid'],
+      ['select/select.component.scss', /^\.lc-select[:.]/, '.lc-select--error'],
+      ['textarea/textarea.component.scss', /^\.lc-textarea--(outline|filled)[:.]/, '.lc-textarea--error'],
+      ['datepicker/datepicker.component.scss', /^\.lc-datepicker[:.]/, '.lc-datepicker--error'],
+    ];
+
+    it.each(fields)('AC-4: %s: every hover rule on the field skips the error state', (file, field, error) => {
+      const hovers = rulesOf(css(file))
+        .flatMap((r) => r.selectors)
+        .filter((s) => field.test(s) && s.includes(':hover'));
+      expect(hovers.length).toBeGreaterThan(0);
+      for (const s of hovers) expect([s, s.includes(`:not(${error})`)]).toEqual([s, true]);
+    });
+
+    it.each(fields)('AC-3: %s: no hover border below 3:1 (primary-400 is gone)', (file, field) => {
+      const borders = rulesOf(css(file))
+        .filter((r) => r.selectors.some((s) => field.test(s) && s.includes(':hover')))
+        .map((r) => decls(r.body)['border-color'])
+        .filter(Boolean);
+      expect(borders.every((b) => b === 'var(--color-text-secondary)' || b === 'var(--color-border)')).toBe(true);
+    });
+
+    it('AC-3: the outline hover border (--color-text-secondary) is ≥ 3:1 on the page, the surface and surface-2', () => {
+      const got = themes.map(([, t]) =>
+        ['--color-background', '--color-surface', '--color-surface-2'].map((bg) => ratio(colour(t, 'var(--color-text-secondary)'), colour(t, `var(${bg})`))),
+      );
+      expect(got).toEqual([
+        [7.55, 7.55, 7.23],
+        [12.16, 11.15, 9.25],
+      ]);
+    });
+
+    it('AC-4: the error border at rest (and so under the pointer) is ≥ 3:1: 8.39 light, 9.47 dark on the page', () => {
+      expect(themes.map(([, t]) => ratio(colour(t, 'var(--color-error-600)'), colour(t, 'var(--color-background)')))).toEqual([8.39, 9.47]);
+    });
+  });
+
+  describe('D-6: the rich-text frame is a field boundary (F-24, AC-5)', () => {
+    it('uses lc-input’s --color-field-border: 4.83 light, 7.31 / 6.70 dark (page / surface)', () => {
+      expect(fills('rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor').border).toBe('1px solid var(--color-field-border)');
+      expect(fills('input/input.component.scss', '.input-container').border).toBe('1px solid var(--color-field-border)');
+      const got = themes.map(([, t]) =>
+        ['--color-background', '--color-surface'].map((bg) => ratio(colour(t, 'var(--color-field-border)'), colour(t, `var(${bg})`))),
+      );
+      expect(got).toEqual([
+        [4.83, 4.83],
+        [7.31, 6.7],
+      ]);
+    });
+  });
+
+  describe('D-8: inks (F-26, AC-8)', () => {
+    it('RTE mode .active and the gallery --active chip use the fill pair: 6.21:1 in both themes', () => {
+      expect(fills('rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__mode-btn.active')).toEqual({
+        'background-color': 'var(--color-primary-fill)',
+        color: 'var(--color-on-primary)',
+      });
+      expect(fills('gallery/gallery.component.scss', '.gallery__filter-btn--active')).toEqual({
+        background: 'var(--color-primary-fill)',
+        'border-color': 'var(--color-primary-500)',
+        color: 'var(--color-on-primary)',
+      });
+      expect(themes.map(([, t]) => ratio(colour(t, 'var(--color-on-primary)'), colour(t, 'var(--color-primary-fill)')))).toEqual([6.21, 6.21]);
+    });
+
+    it('gallery hover: the active chip darkens to the fill hover (9.13:1), an inactive chip takes the link ink', () => {
+      const file = 'gallery/gallery.component.scss';
+      expect(fills(file, '.gallery__filter-btn--active:hover')).toMatchObject({ background: 'var(--color-primary-fill-hover)', color: 'var(--color-on-primary)' });
+      expect(fills(file, '.gallery__filter-btn:hover').color).toBe('var(--color-link)');
+      expect(themes.map(([, t]) => ratio(colour(t, 'var(--color-on-primary)'), colour(t, 'var(--color-primary-fill-hover)')))).toEqual([9.13, 9.13]);
+      expect(themes.map(([, t]) => ratio(colour(t, 'var(--color-link)'), colour(t, 'var(--color-background)')))).toEqual([6.21, 11.78]);
+    });
+
+    it('tag chip text on its tint over surface-2: 7.18 light, 6.34 dark (the dark value is today’s)', () => {
+      const chip = fills('tag-input/tag-input.component.scss', '.lc-tag-input__tag');
+      expect(chip.color).toBe('var(--color-on-primary-subtle)');
+      const got = themes.map(([, t]) => {
+        const bg = over(parse(chip.background), colour(t, 'var(--color-surface-2)'));
+        return ratio(colour(t, chip.color), bg);
+      });
+      expect(got).toEqual([7.18, 6.34]);
+      expect(colour(themes[1][1], 'var(--color-on-primary-subtle)')).toEqual(colour(themes[1][1], 'var(--color-primary-500)'));
+    });
+
+    it('chat monogram on its 18 % tint: 7.00 light, 5.11 dark (unchanged)', () => {
+      const mono = fills('chat/chat.component.scss', '.lc-chat__monogram');
+      expect([mono.color, mono.background]).toEqual([
+        'var(--color-on-primary-subtle)',
+        'color-mix(in srgb, var(--color-primary-500) 18%, var(--color-surface-2))',
+      ]);
+      const got = themes.map(([, t]) => ratio(colour(t, mono.color), mix(colour(t, 'var(--color-primary-500)'), 0.18, colour(t, 'var(--color-surface-2)'))));
+      expect(got).toEqual([7, 5.11]);
+    });
+
+    it('no raw white is left in the changed rules', () => {
+      for (const [file, selector] of [
+        ['rich-text-editor/rich-text-editor.component.scss', '.lc-rich-text-editor__mode-btn.active'],
+        ['gallery/gallery.component.scss', '.gallery__filter-btn--active'],
+        ['gallery/gallery.component.scss', '.gallery__filter-btn--active:hover'],
+      ]) {
+        expect(Object.values(fills(file, selector)).join(' ')).not.toMatch(/#fff|\bwhite\b/i);
+      }
+    });
+  });
+
+  describe('D-10: the over-limit kanban column (F-27, AC-10)', () => {
+    it('is --color-error-subtle: the title (text-secondary) reads 6.58 light, ≥ 4.5 dark on the page and the surface', () => {
+      const file = 'kanban-board/kanban-board.component.scss';
+      expect(fills(file, '.lc-kanban__column--over-limit').background).toBe('var(--color-error-subtle)');
+      expect(fills(file, '.lc-kanban__column-header').color).toBe('var(--color-text-secondary)');
+      const got = themes.map(([, t]) =>
+        ['--color-background', '--color-surface'].map((bg) => ratio(colour(t, 'var(--color-text-secondary)'), over(colour(t, 'var(--color-error-subtle)'), colour(t, `var(${bg})`)))),
+      );
+      expect(got[0]).toEqual([6.58, 6.58]);
+      expect(Math.min(...got[1])).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('the inset card ring sits on the card surface: 4.36 light, 9.12 dark', () => {
+      expect(themes.map(([, t]) => ratio(colour(t, 'var(--color-primary-500)'), colour(t, 'var(--color-surface)')))).toEqual([4.36, 9.12]);
+    });
+  });
+});

package/types/lifecorner-angular-ui-kit-dependency-viewer.d.ts

@@ -269,19 +269,30 @@ export declare class DependencyViewerComponent {
    * `contain` fits both axes, so everything is visible at once but a big graph
    * shrinks to get there. `fit-width` fits the width only and lets the viewer grow
    * as tall as the graph needs, so the nodes keep a readable size and the *page*
-   * scrolls; the graph itself never scrolls internally. Past roughly 20 nodes a
-   * process view generally wants `fit-width`.
+   * scrolls; past `minNodeSize`, a graph wider than the frame scrolls sideways
+   * inside it. Past roughly 20 nodes a process view generally wants `fit-width`.
    */
   readonly fitMode: import("@angular/core").InputSignal<DependencyFitMode | null>;
   /**
    * Smallest node width, in px, that fitting may shrink to. Below it the fit stops
    * scaling down and lets the graph overflow instead — which `fit-width` turns into
-   * page scroll, and `contain` into clipping. Pair it with `fit-width`.
+   * sideways scrolling of the frame (pinned to the start, see `regionLabel`), and
+   * `contain` into clipping. Pair it with `fit-width`.
    *
    * Nodes are 160px wide unscaled (wider — up to 240px — when the graph's labels
-   * need it), so e.g. `80` allows shrinking to half size.
+   * need it), so e.g. `80` allows shrinking to half size. `200` keeps the 12 px
+   * labels at 10 px or more whatever the node width (160–240 px): the phone
+   * recipe is `fitMode="fit-width"` with `minNodeSize` 200.
    */
   readonly minNodeSize: import("@angular/core").InputSignal<number | null>;
+  /**
+   * Accessible name of the canvas while it scrolls sideways (`fitMode="fit-width"`
+   * with a `minNodeSize` the frame can't hold). It is then a focusable
+   * `role="region"`, scrolled with the arrow keys. Set a short, localised name
+   * that is unique on the page. Not used otherwise.
+   * @default 'Dependency graph'
+   */
+  readonly regionLabel: import("@angular/core").InputSignal<string>;
   /**
    * Viewport navigation: drag-to-pan, wheel-zoom and the toolbar's zoom buttons.
    * `false` freezes the viewport — node selection, expansion and collapse keep
@@ -378,6 +389,19 @@ export declare class DependencyViewerComponent {
   protected effectiveFitMode: import("@angular/core").Signal<DependencyFitMode>;
   /** The host only gives up its configured height when the fit made it grow. */
   protected hostHeight: import("@angular/core").Signal<string>;
+  /**
+   * Horizontal extent of the graph, in layout units, while `fit-width` is held
+   * at `minNodeSize` and the graph is wider than the frame; `null` otherwise.
+   * The canvas then scrolls sideways instead of clipping both ends.
+   */
+  private scrollBox;
+  /** Whether the canvas scrolls sideways (see `scrollBox`). */
+  protected scrolling: import("@angular/core").Signal<boolean>;
+  /**
+   * Scroll width of the canvas: the graph's right edge at the current pan and
+   * zoom. The svg's own box is unscaled, so it can't be the scroll extent.
+   */
+  protected scrollWidth: import("@angular/core").Signal<string | null>;
   /** `minNodeSize` expressed as the scale it forbids fitting to go below. */
   private minFitScale;
   constructor();
@@ -500,6 +524,11 @@ export declare class DependencyViewerComponent {
       "required": false;
       "isSignal": true;
     };
+    "regionLabel": {
+      "alias": "regionLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "interactive": {
       "alias": "interactive";
       "required": false;

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

@@ -78,7 +78,12 @@ export declare class FileUploadComponent {
    * @default 'Max:'
    */
   maxSizeLabel: import("@angular/core").InputSignal<string>;
-  /** Accessible name of a selected file's remove button. */
+  /**
+   * Accessible name of a selected file's remove button, followed by the file
+   * name ("Remove file bericht.csv"), so each button in the list has its own
+   * name.
+   * @default 'Remove file'
+   */
   removeFileAriaLabel: import("@angular/core").InputSignal<string>;
   /**
    * BCP 47 locale of the shown sizes (max line, drop zone name, file list):