@lifecorner/angular-ui-kit 3.17.0 → 3.19.0

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,71 @@ 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);
+    });
+  });
+});

package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts

@@ -47,6 +47,8 @@ interface BottomNavEntry {
  * - More than `maxItems` destinations: the first `maxItems − 1` stay, the
  *   rest move behind a "More" entry (`moreLabel`, `moreIcon`, `moreRoute`);
  *   without `moreRoute` the entry is a button that emits `moreClick`.
+ * - `showMore`: "More" on request, also when every destination fits (fixed
+ *   slots); it takes one of the `maxItems` entries.
  * - Tapping the current item emits `reselect` (scroll the page to the top).
  * - `variant="floating"`: an inset pill 16 px from the sides and 16 px above
  *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the
@@ -89,17 +91,41 @@ export declare class BottomNavComponent {
    */
   readonly fixed: import("@angular/core").InputSignal<boolean>;
   /**
-   * Most entries the bar shows. With more destinations the first
-   * `maxItems − 1` stay and the rest go behind the "More" entry.
+   * Most entries the bar shows, "More" included. With more destinations, or
+   * with `showMore`, the first `maxItems − 1` stay and the rest go behind the
+   * "More" entry.
+   *
+   * @default 5
    */
   readonly maxItems: import("@angular/core").InputSignal<number>;
-  /** Label of the overflow entry. */
+  /**
+   * Always end the bar with the "More" entry (`moreLabel`, `moreIcon`, and
+   * `moreRoute` or `moreClick`), even when every destination fits: for a bar
+   * with fixed slots, such as two destinations plus "More". "More" takes one
+   * of the `maxItems` entries, so the first `maxItems − 1` destinations stay
+   * and any others move behind it, as on overflow.
+   *
+   * @default false
+   */
+  readonly showMore: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Label of the "More" entry (on overflow or with `showMore`).
+   *
+   * @default 'More'
+   */
   readonly moreLabel: import("@angular/core").InputSignal<string>;
-  /** Icon of the overflow entry. */
+  /**
+   * Icon of the "More" entry (on overflow or with `showMore`).
+   *
+   * @default 'dots'
+   */
   readonly moreIcon: import("@angular/core").InputSignal<string>;
   /**
-   * Route of the overflow entry (a page that lists the remaining
-   * destinations). Empty renders the entry as a button that emits `moreClick`.
+   * Route of the "More" entry (on overflow or with `showMore`): a page that
+   * lists the remaining destinations. Empty renders the entry as a button that
+   * emits `moreClick`.
+   *
+   * @default ''
    */
   readonly moreRoute: import("@angular/core").InputSignal<string>;
   /**
@@ -109,13 +135,16 @@ export declare class BottomNavComponent {
   readonly badgeAriaLabel: import("@angular/core").InputSignal<string>;
   /** The current item was tapped again (e.g. scroll the page to the top). */
   readonly reselect: import("@angular/core").OutputEmitterRef<BottomNavItem>;
-  /** The overflow entry was tapped while it has no `moreRoute`. */
+  /** The "More" entry was tapped while it has no `moreRoute`. */
   readonly moreClick: import("@angular/core").OutputEmitterRef<void>;
   /** Destinations in display order. */
   private readonly sortedItems;
   /** Path of `activeRoute` without query and fragment. */
   private readonly activePath;
-  /** Entries as rendered: destinations plus, on overflow, the "More" entry. */
+  /**
+   * Entries as rendered: destinations plus, on overflow or with `showMore`,
+   * the "More" entry, which then takes one of the `maxItems` entries.
+   */
   protected readonly entries: import("@angular/core").Signal<BottomNavEntry[]>;
   protected readonly navClasses: import("@angular/core").Signal<string>;
   /** Visually hidden badge text for screen readers. */
@@ -156,6 +185,11 @@ export declare class BottomNavComponent {
       "required": false;
       "isSignal": true;
     };
+    "showMore": {
+      "alias": "showMore";
+      "required": false;
+      "isSignal": true;
+    };
     "moreLabel": {
       "alias": "moreLabel";
       "required": false;

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;