@lifecorner/angular-ui-kit 3.18.0 → 3.19.1

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

@@ -1,4 +1,5 @@
 import { compile } from 'sass';
+import { readFileSync } from 'fs';
 import { resolve } from 'path';
 
 /**
@@ -359,3 +360,149 @@ describe('Component pairings of 3.17 (request 021)', () => {
     });
   });
 });
+
+// Request 024 (3.19): the lc-menu danger item (020 review S2: --color-error was
+// 2.06:1 on the dark menu) and the restyled lc-table pager. The token names
+// come from the compiled stylesheets, the values from the themes.
+describe('Component pairings of 3.19 (request 024)', () => {
+  const menuScss = readFileSync(resolve(__dirname, '../lib/menu/menu.component.scss'), 'utf8');
+  const menuCss = compile(resolve(__dirname, '../lib/menu/menu.component.scss')).css;
+  const tableCss = compile(resolve(__dirname, '../lib/table/table.component.scss')).css;
+  const body = (css: string, selector: string) => {
+    const at = css.indexOf(`\n${selector} {`);
+    expect(at).toBeGreaterThan(-1);
+    return css.slice(at, css.indexOf('}', at));
+  };
+
+  it('AC-8: the danger item reads --color-text-error, its hover --color-error-subtle; no raw colour', () => {
+    expect(body(menuCss, '.lc-menu__item--danger')).toMatch(/\scolor: var\(--color-text-error\);/);
+    expect(body(menuCss, '.lc-menu__item--danger:hover:not(.lc-menu__item--disabled)')).toMatch(
+      /background-color: var\(--color-error-subtle\);/,
+    );
+    expect(menuCss).not.toMatch(/--danger--disabled/);
+    expect(menuScss).not.toMatch(/rgba\(|#[0-9a-f]{3,8}\b/i);
+  });
+
+  it('AC-4: the pager reads the field border, the second surface and the kit ring', () => {
+    const btn = body(tableCss, '.lc-table-pagination__btn');
+    expect(btn).toMatch(/border: 1px solid var\(--color-field-border\);/);
+    expect(btn).toMatch(/background-color: var\(--color-surface-2\);/);
+    expect(btn).toMatch(/\scolor: var\(--color-text-primary\);/);
+    expect(body(tableCss, '.lc-table-pagination__btn:focus-visible')).toMatch(/outline: 2px solid var\(--color-primary-500\);/);
+  });
+
+  /** Design 024 §5, per palette [light, dark]: the minimum over both panel ends. */
+  const expected = { dangerRest: [12.05, 7.21], dangerHover: [10.98, 7.21], dangerFocus: [11.44, 6.37] };
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    const page = color(tokens, '--color-background');
+    /** A token over `base` (translucent ones composited), on the opaque page. */
+    const on = (name: string, base: Rgba = page) => over(color(tokens, name), base);
+    /** The menu panel's ends: --color-surface and --color-surface-2 (its gradient runs between them). */
+    const panels = [on('--color-surface'), on('--color-surface-2', on('--color-surface'))];
+    const ink = (fill: Rgba) => ratio(on('--color-text-error', fill), fill);
+
+    it('AC-8: danger text at rest, on hover and on focus reaches 4.5:1 on the menu', () => {
+      const rest = Math.min(...panels.map(ink));
+      const hover = Math.min(...panels.map((p) => ink(on('--color-error-subtle', p))));
+      const focus = Math.min(...panels.map((p) => ink(on('--color-surface-hover', p))));
+      expect(rest).toBeCloseTo(expected.dangerRest[i], 2);
+      expect(hover).toBeCloseTo(expected.dangerHover[i], 2);
+      expect(focus).toBeCloseTo(expected.dangerFocus[i], 2);
+      expect(Math.min(rest, hover, focus)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-8: the focus ring (--color-primary-500) reaches 3:1 on the focused danger item', () => {
+      for (const p of panels) {
+        const fill = on('--color-surface-hover', p);
+        expect(ratio(on('--color-primary-500', fill), fill)).toBeGreaterThanOrEqual(3);
+      }
+    });
+
+    it.each(['--color-background', '--color-surface'])('AC-4: pager border 3:1, ring 3:1 and glyph 4.5:1 on %s', (ground) => {
+      const g = on(ground);
+      expect(ratio(on('--color-field-border', g), g)).toBeGreaterThanOrEqual(3);
+      expect(ratio(on('--color-primary-500', g), g)).toBeGreaterThanOrEqual(3);
+      const fill = on('--color-surface-2', g);
+      expect(ratio(on('--color-text-primary', fill), fill)).toBeGreaterThanOrEqual(4.5);
+    });
+  });
+});
+
+// Request 025 (3.19.1): the lc-notification-center filter chips and unread
+// badge (024 review finding 4, axe color-contrast: white on the level colours
+// was 1.89 to 4.37:1, the badge 1.99:1 in dark).
+describe('Component pairings of 3.19.1 (request 025)', () => {
+  const ncCss = compile(resolve(__dirname, '../lib/notification-center/notification-center.component.scss')).css;
+  const body = (selector: string) => {
+    const at = ncCss.indexOf(`\n${selector} {`);
+    expect(at).toBeGreaterThan(-1);
+    return ncCss.slice(at, ncCss.indexOf('}', at));
+  };
+
+  it('AC-7: the chips and the badge read tokens only; one pressed style for every level', () => {
+    expect(body('.lc-nc__filter')).toMatch(/\scolor: var\(--color-text-secondary\);/);
+    expect(body('.lc-nc__filter:hover:not(.lc-nc__filter--active)')).toMatch(/background: var\(--color-surface-2\);/);
+    const active = body('.lc-nc__filter--active');
+    expect(active).toMatch(/background: var\(--color-primary-fill\);/);
+    expect(active).toMatch(/\scolor: var\(--color-on-primary\);/);
+    expect(active).toMatch(/border-color: var\(--color-primary-500\);/);
+    const badge = body('.lc-nc__badge');
+    expect(badge).toMatch(/background: var\(--color-error-fill\);/);
+    expect(badge).toMatch(/\scolor: var\(--color-on-error\);/);
+    // No per-level pressed colours, and no raw colour in the chip or badge rules.
+    expect(ncCss).not.toMatch(/\.lc-nc__filter--(error|warning|success|info)\.lc-nc__filter--active/);
+    const chipRules = [...ncCss.matchAll(/(^|\n)([^{}\n]*\.lc-nc__(filter|badge)[^{}]*)\{([^{}]*)\}/g)];
+    expect(chipRules.length).toBeGreaterThanOrEqual(4);
+    for (const rule of chipRules) expect(rule[4]).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|:\s*white\b/i);
+  });
+
+  it('AC-13: in forced colours the pressed chip keeps a Highlight outline unless it is focused', () => {
+    const at = ncCss.indexOf('@media (forced-colors: active)');
+    expect(at).toBeGreaterThan(-1);
+    const media = ncCss.slice(at, ncCss.indexOf('}\n}', at));
+    expect(media).toMatch(/\.lc-nc__filter--active:not\(:focus-visible\) \{/);
+    expect(media).toMatch(/outline: 2px solid Highlight;/);
+    expect(media).toMatch(/outline-offset: 1px;/);
+  });
+
+  /** Design 025 §5, per palette [light, dark]: the minimum over both panel ends. */
+  const expected = { rest: [7.23, 9.26], active: [6.21, 6.21], rim: [4.18, 7.58], badge: [8.39, 8.39] };
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    const page = color(tokens, '--color-background');
+    const on = (name: string, base: Rgba = page) => over(color(tokens, name), base);
+    /** The panel's ends: --color-surface and --color-surface-2 (its gradient runs between them). */
+    const panels = [on('--color-surface'), on('--color-surface-2', on('--color-surface'))];
+
+    it('AC-7: chip text at rest and on hover reaches 4.5:1 on the panel', () => {
+      const rest = Math.min(...panels.map((p) => ratio(on('--color-text-secondary', p), p)));
+      const hover = Math.min(
+        ...panels.map((p) => {
+          const fill = on('--color-surface-2', p);
+          return ratio(on('--color-text-secondary', fill), fill);
+        }),
+      );
+      expect(rest).toBeCloseTo(expected.rest[i], 2);
+      expect(hover).toBeCloseTo(expected.rest[i], 2);
+      expect(Math.min(rest, hover)).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-7: the pressed chip: text 4.5:1 on its fill, rim 3:1 on the panel', () => {
+      const fill = on('--color-primary-fill');
+      const text = ratio(on('--color-on-primary', fill), fill);
+      const rim = Math.min(...panels.map((p) => ratio(on('--color-primary-500', p), p)));
+      expect(text).toBeCloseTo(expected.active[i], 2);
+      expect(rim).toBeCloseTo(expected.rim[i], 2);
+      expect(text).toBeGreaterThanOrEqual(4.5);
+      expect(rim).toBeGreaterThanOrEqual(3);
+    });
+
+    it('AC-7: the unread badge reaches 4.5:1', () => {
+      const fill = on('--color-error-fill');
+      const badge = ratio(on('--color-on-error', fill), fill);
+      expect(badge).toBeCloseTo(expected.badge[i], 2);
+      expect(badge).toBeGreaterThanOrEqual(4.5);
+    });
+  });
+});

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

@@ -39,8 +39,8 @@ export interface TableColumn {
   cssClass?: string;
   /**
    * Optional CSS class(es) for td cells only (string or resolver callback).
-   * A class colour or font size loses to the kit's cell rule; set them with
-   * `cellStyle`.
+   * Since 3.19 a class colour or font size wins over the kit's cell defaults;
+   * `cellStyle` still wins over the class.
    */
   cellClass?: TableCellClass;
   /** Optional inline styles for td cells only (object or resolver callback) */
@@ -274,6 +274,12 @@ export declare class TableComponent {
   pageSize: import("@angular/core").InputSignal<number>;
   /** Available page size options */
   pageSizeOptions: import("@angular/core").InputSignal<number[]>;
+  /**
+   * Pagination: the text after the number in each page-size option
+   * (`10 / page`). German: `'/ Seite'`. (3.19)
+   * @default '/ page'
+   */
+  pageSizeLabel: import("@angular/core").InputSignal<string>;
   /** Enable row selection checkboxes */
   selectable: import("@angular/core").InputSignal<boolean>;
   /** Enable per-column text filters */
@@ -418,6 +424,11 @@ export declare class TableComponent {
     value: number;
     label: string;
   }[]>;
+  /**
+   * Size of the pagination controls: the page-size select's `size` and the
+   * `lc-table-pagination--<size>` class that sizes prev/next to match it.
+   */
+  protected readonly paginationSize: import("@angular/core").Signal<TableSize>;
   /**
    * Computed CSS classes for the table element
    */
@@ -608,6 +619,11 @@ export declare class TableComponent {
       "required": false;
       "isSignal": true;
     };
+    "pageSizeLabel": {
+      "alias": "pageSizeLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "selectable": {
       "alias": "selectable";
       "required": false;