@lifecorner/angular-ui-kit 3.27.0 → 3.27.2

package/src/styles/_theme-light.scss

@@ -14,9 +14,14 @@
 @use './tokens/animation' as *;
 @use './tokens/size' as *;
 
-// Default theme (light) on :root
-:root,
-:root.light {
+// Every colour token of the light theme: --color-*, --gradient-*, --shadow-*,
+// --elevation-*, --accent-line and --app-background-image (request 043, F-25).
+// The root rule below emits them, and `.lc-header--light` emits them a second
+// time: derived tokens (`--color-primary: var(--color-primary-500)`) resolve
+// where they are declared, so only the full set on the header gives its slot
+// content (buttons, links, the theme toggle, the account menu) the light
+// values inside a dark page.
+@mixin -light-theme-colors {
   // ============================================================================
   // Colors - Primary
   // ============================================================================
@@ -91,65 +96,6 @@
   --color-accent-rust: #{$color-accent-rust};
   --color-accent-violet: #{$color-accent-violet};
 
-  // ============================================================================
-  // Spacing
-  // ============================================================================
-  --spacing-0: #{$spacing-0};
-  --spacing-0-5: #{$spacing-0-5};
-  --spacing-1: #{$spacing-1};
-  --spacing-1-5: #{$spacing-1-5};
-  --spacing-2: #{$spacing-2};
-  --spacing-2-5: #{$spacing-2-5};
-  --spacing-3: #{$spacing-3};
-  --spacing-3-5: #{$spacing-3-5};
-  --spacing-4: #{$spacing-4};
-  --spacing-5: #{$spacing-5};
-  --spacing-6: #{$spacing-6};
-  --spacing-7: #{$spacing-7};
-  --spacing-8: #{$spacing-8};
-  --spacing-9: #{$spacing-9};
-  --spacing-10: #{$spacing-10};
-  --spacing-11: #{$spacing-11};
-  --spacing-12: #{$spacing-12};
-  --spacing-14: #{$spacing-14};
-  --spacing-16: #{$spacing-16};
-
-  // ============================================================================
-  // Typography - Font Families
-  // ============================================================================
-  --typography-font-family-base: #{$typography-font-family-base};
-  --typography-font-family-mono: #{$typography-font-family-mono};
-
-  // ============================================================================
-  // Typography - Font Sizes
-  // ============================================================================
-  --typography-font-size-xs: #{$typography-font-size-xs};
-  --typography-font-size-sm: #{$typography-font-size-sm};
-  --typography-font-size-base: #{$typography-font-size-base};
-  --typography-font-size-lg: #{$typography-font-size-lg};
-  --typography-font-size-xl: #{$typography-font-size-xl};
-  --typography-font-size-2xl: #{$typography-font-size-2xl};
-  --typography-font-size-3xl: #{$typography-font-size-3xl};
-  --typography-font-size-4xl: #{$typography-font-size-4xl};
-  --typography-font-size-5xl: #{$typography-font-size-5xl};
-  --typography-font-size-6xl: #{$typography-font-size-6xl};
-  --typography-font-size-7xl: #{$typography-font-size-7xl};
-
-  // ============================================================================
-  // Typography - Font Weights
-  // ============================================================================
-  --typography-font-weight-normal: #{$typography-font-weight-normal};
-  --typography-font-weight-medium: #{$typography-font-weight-medium};
-  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
-  --typography-font-weight-bold: #{$typography-font-weight-bold};
-
-  // ============================================================================
-  // Typography - Line Heights
-  // ============================================================================
-  --typography-line-height-tight: #{$typography-line-height-tight};
-  --typography-line-height-normal: #{$typography-line-height-normal};
-  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
-
   // ============================================================================
   // Elevation (Box Shadows) — light-tuned
   // ============================================================================
@@ -162,58 +108,6 @@
   --elevation-3: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.10);
   --elevation-4: 0 8px 8px -4px rgba(16, 24, 40, 0.04), 0 20px 24px -4px rgba(16, 24, 40, 0.10);
 
-  // ============================================================================
-  // Border Radius
-  // ============================================================================
-  --border-radius-none: #{$border-radius-none};
-  --border-radius-sm: #{$border-radius-sm};
-  --border-radius-md: #{$border-radius-md};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-xl: #{$border-radius-xl};
-  --border-radius-2xl: #{$border-radius-2xl};
-  --border-radius-full: #{$border-radius-full};
-
-  // ============================================================================
-  // Animation
-  // ============================================================================
-  --animation-duration-base: #{$animation-duration-fast};
-  --animation-easing-ease-in: #{$animation-easing-ease-in};
-  --animation-easing-ease-out: #{$animation-easing-ease-out};
-  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
-
-  // ============================================================================
-  // Size - Interactive Elements
-  // ============================================================================
-  --size-interactive-xs-height: #{$size-interactive-xs-height};
-  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
-  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
-  
-  --size-interactive-sm-height: #{$size-interactive-sm-height};
-  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
-  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
-  
-  --size-interactive-md-height: #{$size-interactive-md-height};
-  --size-interactive-md-padding: #{$size-interactive-md-padding};
-  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
-  
-  --size-interactive-lg-height: #{$size-interactive-lg-height};
-  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
-  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
-
-  // ============================================================================
-  // Size - Minimum Touch Target
-  // ============================================================================
-  --size-min-touch-width: #{$size-min-touch-width};
-  --size-min-touch-height: #{$size-min-touch-height};
-
-  // ============================================================================
-  // Layout - Content Width
-  // ============================================================================
-  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
-  // app shell that centres its own content against the same custom property
-  // stays in lockstep with the container instead of hard-coding a width.
-  --lc-content-max-width: #{$size-content-max-width};
-
   // ============================================================================
   // Semantic Color Mappings for Light Theme (DS2.0 — mirrors dark token names)
   // ============================================================================
@@ -415,6 +309,147 @@
   --color-skeleton: #e6eff1;
   --color-skeleton-highlight: #f2f7f8;
 
+  // Semantic color scale aliases — map the numeric scale some components use
+  // onto the three canonical semantic shades so they always resolve.
+  --color-error-50: #{$color-error-light};
+  --color-error-100: #{$color-error-light};
+  --color-error-500: var(--color-error-default);
+  --color-error-600: var(--color-error-default);
+  --color-error-700: var(--color-error-dark);
+  --color-error-800: #5a0707; // Darker shade for active state
+  --color-success-50: #{$color-success-light};
+  --color-success-100: #{$color-success-light};
+  --color-success-500: var(--color-success-default);
+  --color-success-600: var(--color-success-default);
+  --color-success-700: var(--color-success-dark);
+  --color-warning-50: #{$color-warning-light};
+  --color-warning-100: #{$color-warning-light};
+  --color-warning-500: var(--color-warning-default);
+  --color-warning-600: var(--color-warning-default);
+  --color-warning-700: var(--color-warning-dark);
+  --color-info-50: #{$color-info-light};
+  --color-info-100: #{$color-info-light};
+  --color-info-500: var(--color-info-default);
+  --color-info-600: var(--color-info-default);
+  --color-info-700: var(--color-info-dark);
+}
+
+// Default theme (light) on :root
+:root,
+:root.light {
+  @include -light-theme-colors;
+
+  // ============================================================================
+  // Spacing
+  // ============================================================================
+  --spacing-0: #{$spacing-0};
+  --spacing-0-5: #{$spacing-0-5};
+  --spacing-1: #{$spacing-1};
+  --spacing-1-5: #{$spacing-1-5};
+  --spacing-2: #{$spacing-2};
+  --spacing-2-5: #{$spacing-2-5};
+  --spacing-3: #{$spacing-3};
+  --spacing-3-5: #{$spacing-3-5};
+  --spacing-4: #{$spacing-4};
+  --spacing-5: #{$spacing-5};
+  --spacing-6: #{$spacing-6};
+  --spacing-7: #{$spacing-7};
+  --spacing-8: #{$spacing-8};
+  --spacing-9: #{$spacing-9};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-14: #{$spacing-14};
+  --spacing-16: #{$spacing-16};
+
+  // ============================================================================
+  // Typography - Font Families
+  // ============================================================================
+  --typography-font-family-base: #{$typography-font-family-base};
+  --typography-font-family-mono: #{$typography-font-family-mono};
+
+  // ============================================================================
+  // Typography - Font Sizes
+  // ============================================================================
+  --typography-font-size-xs: #{$typography-font-size-xs};
+  --typography-font-size-sm: #{$typography-font-size-sm};
+  --typography-font-size-base: #{$typography-font-size-base};
+  --typography-font-size-lg: #{$typography-font-size-lg};
+  --typography-font-size-xl: #{$typography-font-size-xl};
+  --typography-font-size-2xl: #{$typography-font-size-2xl};
+  --typography-font-size-3xl: #{$typography-font-size-3xl};
+  --typography-font-size-4xl: #{$typography-font-size-4xl};
+  --typography-font-size-5xl: #{$typography-font-size-5xl};
+  --typography-font-size-6xl: #{$typography-font-size-6xl};
+  --typography-font-size-7xl: #{$typography-font-size-7xl};
+
+  // ============================================================================
+  // Typography - Font Weights
+  // ============================================================================
+  --typography-font-weight-normal: #{$typography-font-weight-normal};
+  --typography-font-weight-medium: #{$typography-font-weight-medium};
+  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
+  --typography-font-weight-bold: #{$typography-font-weight-bold};
+
+  // ============================================================================
+  // Typography - Line Heights
+  // ============================================================================
+  --typography-line-height-tight: #{$typography-line-height-tight};
+  --typography-line-height-normal: #{$typography-line-height-normal};
+  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
+
+  // ============================================================================
+  // Border Radius
+  // ============================================================================
+  --border-radius-none: #{$border-radius-none};
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+  --border-radius-2xl: #{$border-radius-2xl};
+  --border-radius-full: #{$border-radius-full};
+
+  // ============================================================================
+  // Animation
+  // ============================================================================
+  --animation-duration-base: #{$animation-duration-fast};
+  --animation-easing-ease-in: #{$animation-easing-ease-in};
+  --animation-easing-ease-out: #{$animation-easing-ease-out};
+  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
+
+  // ============================================================================
+  // Size - Interactive Elements
+  // ============================================================================
+  --size-interactive-xs-height: #{$size-interactive-xs-height};
+  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
+  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
+  
+  --size-interactive-sm-height: #{$size-interactive-sm-height};
+  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
+  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
+  
+  --size-interactive-md-height: #{$size-interactive-md-height};
+  --size-interactive-md-padding: #{$size-interactive-md-padding};
+  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
+  
+  --size-interactive-lg-height: #{$size-interactive-lg-height};
+  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
+  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
+
+  // ============================================================================
+  // Size - Minimum Touch Target
+  // ============================================================================
+  --size-min-touch-width: #{$size-min-touch-width};
+  --size-min-touch-height: #{$size-min-touch-height};
+
+  // ============================================================================
+  // Layout - Content Width
+  // ============================================================================
+  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
+  // app shell that centres its own content against the same custom property
+  // stays in lockstep with the container instead of hard-coding a width.
+  --lc-content-max-width: #{$size-content-max-width};
+
   // ============================================================================
   // Short Aliases for Common Usage (Component Convenience)
   // ============================================================================
@@ -441,28 +476,13 @@
   --line-height-normal: var(--typography-line-height-normal);
   --line-height-relaxed: var(--typography-line-height-relaxed);
   --animation-timing-ease: var(--animation-easing-ease-in-out);
-  
-  // Semantic color scale aliases — map the numeric scale some components use
-  // onto the three canonical semantic shades so they always resolve.
-  --color-error-50: #{$color-error-light};
-  --color-error-100: #{$color-error-light};
-  --color-error-500: var(--color-error-default);
-  --color-error-600: var(--color-error-default);
-  --color-error-700: var(--color-error-dark);
-  --color-error-800: #5a0707; // Darker shade for active state
-  --color-success-50: #{$color-success-light};
-  --color-success-100: #{$color-success-light};
-  --color-success-500: var(--color-success-default);
-  --color-success-600: var(--color-success-default);
-  --color-success-700: var(--color-success-dark);
-  --color-warning-50: #{$color-warning-light};
-  --color-warning-100: #{$color-warning-light};
-  --color-warning-500: var(--color-warning-default);
-  --color-warning-600: var(--color-warning-default);
-  --color-warning-700: var(--color-warning-dark);
-  --color-info-50: #{$color-info-light};
-  --color-info-100: #{$color-info-light};
-  --color-info-500: var(--color-info-default);
-  --color-info-600: var(--color-info-default);
-  --color-info-700: var(--color-info-dark);
+}
+
+// `<lc-header theme="light">` keeps the light palette inside a dark page
+// (request 043, F-25): its slot buttons and primary inks measured 1.05:1
+// (outline) and 1.59:1 (link) there; with the tokens re-declared they match a
+// light page (17.12:1, 6.21:1). A root-level token override does not reach
+// inside a themed header.
+.lc-header--light {
+  @include -light-theme-colors;
 }

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

@@ -44,7 +44,9 @@ const rings: [string, string, string][] = [
   ['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'],
-  ['select/select.component.scss', '.lc-select__clear', '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'],
@@ -171,14 +173,21 @@ describe('Focus indicators (request 042)', () => {
 
   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).
+    // Request 044 (F-31, design D-3) changed the three filled rows on purpose:
+    // their hover border is --color-text-secondary too (it was --color-border,
+    // 1.23:1 light, or none in the textarea), the 3:1 boundary of the outline.
     const hovers: [string, string, Record<string, string>][] = [
-      ['textarea/textarea.component.scss', '.lc-textarea--outline:hover:not(:disabled):not(:read-only):not(:focus)', { 'border-color': 'var(--color-primary-400)' }],
-      ['textarea/textarea.component.scss', '.lc-textarea--filled:hover:not(:disabled):not(:read-only):not(:focus)', { 'background-color': 'var(--color-surface-hover)' }],
-      ['datepicker/datepicker.component.scss', '.lc-datepicker:hover:not(:disabled):not([readonly]):not(:focus)', { 'border-color': 'var(--color-primary-400)' }],
-      ['datepicker/datepicker.component.scss', '.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):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(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
-      ['select/select.component.scss', '.lc-select:hover:not(.lc-select--disabled):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
-      ['select/select.component.scss', '.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
+      ['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)', 'border-color': 'var(--color-text-secondary)' }],
+      ['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-text-secondary)' }],
+      ['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-text-secondary)' }],
       ['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)' }],

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 }]),
@@ -1778,3 +1790,105 @@ describe('Component pairings of 3.25.0 (request 039)', () => {
     });
   });
 });
+
+/**
+ * Request 044 (3.27.2, F-31, design 044 §5): the filled select, textarea and
+ * datepicker draw the field boundary of the outline variant, --color-field-border
+ * at rest and --color-text-secondary on hover (it was transparent at rest and
+ * --color-border, 1.23 / 1.29, or nothing on hover). Pages are the background,
+ * surface and surface-2; the field's own fill (--color-surface-sunken at rest,
+ * --color-surface-hover on hover) is composited over each page.
+ */
+describe('Component pairings of 3.27.2 (request 044)', () => {
+  const lib = (path: string) => resolve(__dirname, '../lib', path);
+  const fields = {
+    select: {
+      css: compile(lib('select/select.component.scss')).css,
+      rest: '.lc-select.lc-select--filled',
+      hover: '.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus)',
+      error: '.lc-select.lc-select--error',
+    },
+    textarea: {
+      css: compile(lib('textarea/textarea.component.scss')).css,
+      rest: '.lc-textarea--filled',
+      hover: '.lc-textarea--filled:hover:not(:disabled):not(:read-only):not(.lc-textarea--error):not(:focus)',
+      error: '.lc-textarea--error',
+    },
+    datepicker: {
+      css: compile(lib('datepicker/datepicker.component.scss')).css,
+      rest: '.lc-datepicker.lc-datepicker--filled',
+      hover: '.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus)',
+      error: '.lc-datepicker.lc-datepicker--filled.lc-datepicker--error',
+    },
+  };
+  type Field = keyof typeof fields;
+  const names = Object.keys(fields) as Field[];
+
+  const forcedBlock = /@media \(forced-colors: active\) \{((?:[^{}]*\{[^{}]*\})*)\s*\}/g;
+  const rulesOf = (css: string) =>
+    [...css.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 = (field: Field, selector: string): Record<string, string> => {
+    const found = rulesOf(fields[field].css).filter((r) => r.selectors.includes(selector));
+    expect([field, selector, found.length > 0]).toEqual([field, selector, true]);
+    return Object.assign({}, ...found.map((r) => decls(r.body)));
+  };
+  const token = (value: string) => value.match(/^var\((--[\w-]+)\)$/)?.[1] ?? `not a token: ${value}`;
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+
+  it.each(names)('AC-8, AC-9: filled %s: field border on the sunken fill at rest, text-secondary on the hover fill', (field) => {
+    const rest = fills(field, fields[field].rest);
+    const hover = fills(field, fields[field].hover);
+    expect([rest['background-color'], rest['border-color']]).toEqual(['var(--color-surface-sunken)', 'var(--color-field-border)']);
+    expect([hover['background-color'], hover['border-color']]).toEqual(['var(--color-surface-hover)', 'var(--color-text-secondary)']);
+    expect(fills(field, fields[field].error)['border-color']).toBe('var(--color-error-600)');
+  });
+
+  // [light, dark] per page (background, surface, surface-2), design 044 §5.
+  const expected = {
+    restOnPage: [[4.83, 4.83, 4.62], [7.31, 6.7, 5.56]],
+    restOnFill: [[4.39, 4.39, 4.39], [7.02, 7.02, 7.02]],
+    hoverOnPage: [[7.55, 7.55, 7.23], [12.16, 11.15, 9.25]],
+    hoverOnFill: [[6.86, 6.86, 6.86], [11.05, 9.97, 8.17]],
+    // §5 quotes the page (background) only: 8.39 light, 9.47 dark.
+    errorOnPage: [[8.39, 8.39, 8.02], [9.47, 8.68, 7.21]],
+    errorOnFill: [[7.62, 7.62, 7.62], [9.09, 9.09, 9.09]],
+  };
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    const c = (name: string) => color(tokens, name);
+
+    function measure(field: Field) {
+      const pages = ['--color-background', '--color-surface', '--color-surface-2'].map(c);
+      const rest = fills(field, fields[field].rest);
+      const hover = fills(field, fields[field].hover);
+      const error = fills(field, fields[field].error);
+      const on = (ink: string, bases: Rgba[]) => bases.map((b) => floor(ratio(over(c(token(ink)), b), b)));
+      const restFill = pages.map((p) => over(c(token(rest['background-color'])), p));
+      const hoverFill = pages.map((p) => over(c(token(hover['background-color'])), p));
+      return {
+        restOnPage: on(rest['border-color'], pages),
+        restOnFill: on(rest['border-color'], restFill),
+        hoverOnPage: on(hover['border-color'], pages),
+        hoverOnFill: on(hover['border-color'], hoverFill),
+        errorOnPage: on(error['border-color'], pages),
+        errorOnFill: on(error['border-color'], restFill),
+      };
+    }
+
+    it.each(names)('AC-8, AC-9: filled %s: the design 044 §5 ratios, all ≥ 3:1, hover ≥ rest', (field) => {
+      const m = measure(field);
+      for (const key of Object.keys(expected) as (keyof typeof expected)[]) {
+        expect([key, m[key]]).toEqual([key, expected[key][i]]);
+        expect(Math.min(...m[key])).toBeGreaterThanOrEqual(3);
+      }
+      m.hoverOnPage.forEach((r, page) => expect(r).toBeGreaterThanOrEqual(m.restOnPage[page]));
+      m.hoverOnFill.forEach((r, page) => expect(r).toBeGreaterThanOrEqual(m.restOnFill[page]));
+    });
+  });
+});

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 {'));
+  });
+});