@lifecorner/angular-ui-kit 3.27.1 → 3.28.0

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

@@ -1790,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/touch-targets-contrast.spec.ts

@@ -181,7 +181,10 @@ describe('Touch targets, hover borders and contrast (request 043)', () => {
         .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);
+      // Request 044 (F-31): --color-border (1.23:1 light) left the allow-list;
+      // the filled hovers moved to --color-text-secondary as well.
+      expect(borders.length).toBeGreaterThan(0);
+      expect(borders.every((b) => b === 'var(--color-text-secondary)')).toBe(true);
     });
 
     it('AC-3: the outline hover border (--color-text-secondary) is ≥ 3:1 on the page, the surface and surface-2', () => {

package/types/lifecorner-angular-ui-kit-app-shell.d.ts

@@ -52,6 +52,12 @@ export type AppShellNavPlacement = 'below-header' | 'full-height';
  * content). The land and the footer run under the nav; the footer's content
  * starts at the nav width.
  *
+ * Toasts (3.28, AS-34): in the browser the shell tells `lc-toast-outlet` —
+ * wherever the app puts it, also after `</lc-app-shell>` — where its header
+ * ends and where the shown bar starts, so top toasts sit below the header and
+ * bottom toasts 16 px above the bar (from 1024 px: above the safe-area
+ * inset). `--lc-toast-outlet-offset-top` / `-bottom` override both.
+ *
  * CSS hooks (set them on `lc-app-shell` or any ancestor):
  * - `--lc-app-shell-nav-width` — the nav column from 1024 px. Default
  *   `240px` (`248px` from 1440, `280px` from 1920).
@@ -104,6 +110,7 @@ export declare class AppShellComponent {
   readonly navPlacement: import("@angular/core").InputSignal<AppShellNavPlacement>;
   protected readonly shellClasses: import("@angular/core").Signal<string>;
   private readonly shell;
+  private readonly headerSlot;
   private readonly barSlot;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
@@ -133,6 +140,14 @@ export type AppPagePaddingX = 'default' | 'header';
  * - `none` 0, `sm` 8 px, `md` 16 px at every width.
  */
 export type AppPagePaddingTop = 'default' | 'none' | 'sm' | 'md';
+/**
+ * Width of `lc-app-page`'s content from 1280 px (3.28, AS-36).
+ * - `default`: the content column, centred, capped at `contentMaxWidth`.
+ * - `wide`: the standard column of a page with a right column, the right
+ *   column left empty, and `[page-wide]` children running over it, up to
+ *   928 px. Below 1280 px, and next to a named right column, as `default`.
+ */
+export type AppPageContentWidth = 'default' | 'wide';
 /**
  * A page inside `lc-app-shell`: the `<main>` landmark with the page's content
  * centred at a reading width, and an optional right column docked to the
@@ -150,6 +165,16 @@ export type AppPagePaddingTop = 'default' | 'none' | 'sm' | 'md';
  *   inside main instead (e.g. a member row). It renders only with an
  *   accessible name — `asideLabelledby` (the id of its heading) or
  *   `asideAriaLabel`.
+ * - `reserveAside` keeps that column from 1280 px — width, tint and hairline —
+ *   with no content and no landmark (`aria-hidden="true"`), so a page without
+ *   right-column content keeps the same column as a page with one (3.28,
+ *   AS-35). A named aside wins.
+ * - `contentWidth="wide"` (3.28, AS-36) lays the page out like a page with a
+ *   right column, leaves the column empty and untinted, and lets children
+ *   marked `[page-wide]` (e.g. a table's wrapper) run over it, up to 928 px;
+ *   the other children (the page header, the next-step card) keep the
+ *   standard column, so the title doesn't move between pages. Next to a named
+ *   aside, and below 1280 px, it renders like `'default'`.
  * - `busy` marks the page as loading: `aria-busy="true"` on `<main>` while a
  *   skeleton stands in for the content (AS-12). No visual change.
  * - `paddingX="header"` lines the content up with `lc-header` (3.15): its
@@ -220,8 +245,37 @@ export declare class AppPageComponent {
    * @default 'default'
    */
   readonly paddingTop: import("@angular/core").InputSignal<AppPagePaddingTop>;
+  /**
+   * Keeps the right column from 1280 px (360 · 400 · 460 px,
+   * `--lc-app-page-aside-width`) with its tint and hairline but no content
+   * and no landmark (`aria-hidden="true"`, no role), so pages without
+   * right-column content share one column with pages that have one. A named
+   * aside (`asideLabelledby` / `asideAriaLabel`) wins; `contentWidth="wide"`
+   * leaves the column empty and untinted. Below 1280 px nothing shows.
+   * @default false
+   */
+  readonly reserveAside: import("@angular/core").InputSignal<boolean>;
+  /**
+   * `'wide'`, from 1280 px: the page keeps the standard column of a page with
+   * a right column, the column stays empty and untinted, and `[page-wide]`
+   * children run over it, up to 928 px (or `contentMaxWidth` when it is not
+   * `880px`; `none` means the whole column). The other children keep the
+   * standard column. With a named aside, `'wide'` has no effect. Below
+   * 1280 px `'wide'` renders like `'default'`.
+   * @default 'default'
+   */
+  readonly contentWidth: import("@angular/core").InputSignal<AppPageContentWidth>;
   /** The right column renders only when it has an accessible name. */
   protected readonly hasAside: import("@angular/core").Signal<boolean>;
+  /** `contentWidth="wide"` takes effect only without a named aside, which it yields to. */
+  protected readonly wide: import("@angular/core").Signal<boolean>;
+  /** The empty, unnamed column (`reserveAside`), unless a named aside or `wide` takes the space. */
+  protected readonly reserved: import("@angular/core").Signal<boolean>;
+  /**
+   * The cap of `[page-wide]` children: `null` keeps the CSS's 928 px (also
+   * for the default `contentMaxWidth`), `none` means the whole column.
+   */
+  protected readonly wideMax: import("@angular/core").Signal<string | null>;
   protected readonly pageClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<AppPageComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AppPageComponent, "lc-app-page", never, {
@@ -260,5 +314,15 @@ export declare class AppPageComponent {
       "required": false;
       "isSignal": true;
     };
+    "reserveAside": {
+      "alias": "reserveAside";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*", "[page-aside]"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-internal-overlay.d.ts

@@ -28,4 +28,25 @@ export declare class OverlayStackService {
   claim(id: string, event: Event): boolean;
   static ɵfac: i0.ɵɵFactoryDeclaration<OverlayStackService, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * The space a fixed overlay keeps free at the top and the bottom of the
+ * viewport, as CSS lengths (3.28, AS-34). `lc-app-shell` writes them in the
+ * browser: `top` is its header's bottom edge, `bottom` the shown bottom bar's
+ * top edge, measured from the viewport's bottom (or the safe-area insets when
+ * there is no header or no bar). `lc-toast-outlet` reads them, so its stacks
+ * clear the header and the bar even when the app renders the outlet outside
+ * the shell (no custom property can inherit there).
+ *
+ * `null` means "no shell": on the server, before the shell has measured,
+ * without ResizeObserver and after the shell is destroyed. Internal to the
+ * library; not part of the public API and without a semver guarantee.
+ */
+export declare class OverlayInsetsService {
+  /** CSS length kept free above top-edge overlays, e.g. `'56px'`. */
+  readonly top: import("@angular/core").WritableSignal<string | null>;
+  /** CSS length kept free below bottom-edge overlays, e.g. `'102px'`. */
+  readonly bottom: import("@angular/core").WritableSignal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<OverlayInsetsService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }

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

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
 import { Signal } from "@angular/core";
+import { OverlayInsetsService } from "@lifecorner/angular-ui-kit/internal/overlay";
 export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToastAction {
@@ -181,11 +182,35 @@ type ToastLive = 'polite' | 'assertive';
  * into an *existing* live region — one `polite` for success/info toasts and one
  * `assertive` for error/warning toasts. Dismissing a toast (close button,
  * action, auto-dismiss) removes it from the service.
+ *
+ * Offsets (3.28, AS-34): with `lc-app-shell` in the app (the outlet may sit
+ * before or after it), the `top-*` stacks start below the shell's header and
+ * the `bottom-*` stacks end above its bottom bar, each with the stack's 16 px
+ * padding as the gap. The shell measures both in the browser (the header's
+ * bottom edge with the top inset; the shown bar's top edge, from the
+ * viewport's bottom, with the bottom inset). From 1024 px, where the bar is
+ * hidden, the bottom offset is the safe-area inset. Without a shell, and in
+ * prerendered HTML, both are `0px`, as before. Every stack is at most as high
+ * as the space between the offsets and scrolls when its toasts need more
+ * (200 % text), so each toast stays reachable. In the shell, prefer the
+ * `bottom-*` positions: a top toast can still cover a page title placed
+ * right under the header.
+ *
+ * CSS hooks (set them on `lc-toast-outlet` or any ancestor, e.g. `:root`;
+ * each wins over the shell's value; write lengths, `0px` rather than `0`):
+ * - `--lc-toast-outlet-offset-top` — the space kept free above the `top-*`
+ *   stacks. Default `0px`; with `lc-app-shell`: its header's bottom edge, or
+ *   `env(safe-area-inset-top, 0px)` without a header.
+ * - `--lc-toast-outlet-offset-bottom` — the space kept free below the
+ *   `bottom-*` stacks. Default `0px`; with `lc-app-shell`: the shown bottom
+ *   bar's top edge, measured from the viewport's bottom, or
+ *   `env(safe-area-inset-bottom, 0px)` when no bar shows.
  */
 export declare class ToastOutletComponent {
   protected readonly positions: readonly ToastPosition[];
   protected readonly liveLevels: readonly ToastLive[];
   private readonly toastService;
+  protected readonly insets: OverlayInsetsService;
   /** Accessible name of every toast's close button (forwarded to lc-toast). */
   readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
   /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */