@lifecorner/angular-ui-kit 3.16.0 → 3.17.0

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

@@ -302,3 +302,60 @@ describe('Component pairings of 3.16 (request 022)', () => {
     });
   });
 });
+
+// Request 021 (3.17): the lc-list status badges (12 px / 500, so 4.5:1) and the
+// focus ring of a loading lc-button, which its 0.5 opacity fades. The token
+// names come from the compiled component stylesheets, the values from the themes.
+describe('Component pairings of 3.17 (request 021)', () => {
+  const listCss = compile(resolve(__dirname, '../lib/list/list.component.scss')).css;
+  const buttonCss = compile(resolve(__dirname, '../lib/button/button.component.scss')).css;
+
+  /** The background and ink token of a list badge variant (a fallback after the name is ignored). */
+  function badgeTokens(variant: string): [string, string] {
+    const body = listCss.match(new RegExp(`\\n\\.lc-list__badge--${variant} \\{([^}]*)\\}`))?.[1] ?? '';
+    const bg = body.match(/background-color: var\((--[\w-]+)/)?.[1] ?? '';
+    const ink = body.match(/\scolor: var\((--[\w-]+)/)?.[1] ?? '';
+    expect([bg, ink]).toEqual([expect.stringMatching(/^--color-/), expect.stringMatching(/^--color-/)]);
+    return [bg, ink];
+  }
+
+  /** Design 021 §5: the minimum over the bases, per palette [light, dark]. */
+  const badges: [string, [string, string], [number, number]][] = [
+    ['success', ['--color-success-subtle', '--color-on-success-subtle'], [4.85, 5.17]],
+    ['warning', ['--color-warning-subtle', '--color-on-warning-subtle'], [5.52, 4.61]],
+    ['error', ['--color-error-100', '--color-on-error-subtle'], [6.33, 7.17]],
+    ['primary', ['--color-primary-100', '--color-primary-700'], [7.85, 9.68]],
+    ['default', ['--color-surface-hover', '--color-text-secondary'], [6.87, 8.18]],
+  ];
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    /** The grounds a list sits on: the page, the card surfaces and a hovered row (over the surface). */
+    const bases: Rgba[] = [
+      color(tokens, '--color-background'),
+      color(tokens, '--color-surface'),
+      over(color(tokens, '--color-surface-2'), color(tokens, '--color-surface')),
+      over(color(tokens, '--color-surface-hover'), color(tokens, '--color-surface')),
+    ].map((c) => over(c, color(tokens, '--color-background')));
+
+    it.each(badges)('AC-12: the %s list badge reaches 4.5:1 on every ground', (variant, pair, values) => {
+      expect(badgeTokens(variant)).toEqual(pair);
+      const [bg, ink] = pair;
+      const min = Math.min(
+        ...bases.map((base) => {
+          const fill = over(color(tokens, bg), base);
+          return ratio(over(color(tokens, ink), fill), fill);
+        }),
+      );
+      expect(min).toBeCloseTo(values[i], 2);
+      expect(min).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-7: the ring of a focused loading button (--color-text-primary at 50 %) reaches 3:1 on the page and the surfaces', () => {
+      expect(buttonCss).toMatch(/\n\.btn\.btn-loading:focus-visible \{\s*outline-color: var\(--color-text-primary\);/);
+      const ink = color(tokens, '--color-text-primary');
+      for (const base of bases.slice(0, 3)) {
+        expect(ratio(over([ink[0], ink[1], ink[2], 0.5], base), base)).toBeGreaterThanOrEqual(3);
+      }
+    });
+  });
+});

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

@@ -28,7 +28,28 @@ export declare class ButtonComponent {
    */
   readonly tone: import("@angular/core").InputSignal<ButtonTone>;
   readonly size: import("@angular/core").InputSignal<ButtonSize>;
+  /**
+   * Natively disabled: the button leaves the focus order and ignores clicks.
+   * For a temporary busy state that keeps focus, use `loading`.
+   * @default false
+   */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Shows a spinner in place of the icon slots and makes the button
+   * unavailable without removing it from the focus order (3.17). The inner
+   * `<button>` gets `aria-disabled="true"` and `aria-busy="true"` instead of
+   * the native `disabled`, so a focused button keeps focus. While it is
+   * loading, click, Enter and Space are ignored: `clicked` is not emitted, the
+   * click event stops at the button (a `(click)` on the host doesn't fire),
+   * and a `type="submit"`/`"reset"` button doesn't submit or reset its form.
+   * The look is unchanged: spinner, 50 % opacity, no hover. Screen readers may
+   * announce the state change ("unavailable"/"dimmed"), but the button doesn't
+   * announce the outcome: the page does that, for example with a polite live
+   * region ("USM wird geladen.", then the result). `disabledReason` also
+   * applies while loading. If `disabled` is set too, the native `disabled`
+   * wins.
+   * @default false
+   */
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly iconOnly: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -72,7 +93,13 @@ export declare class ButtonComponent {
    * `title` otherwise.
    */
   readonly effectiveTitle: import("@angular/core").Signal<string | null>;
-  handleClick(): void;
+  /**
+   * Emits `clicked` unless the button is disabled or loading. While loading
+   * (and not natively disabled) the event is cancelled and stopped, so a form
+   * isn't submitted and a host `(click)` doesn't fire. The parameter is
+   * optional, so callers without an argument still work.
+   */
+  handleClick(event?: Event): void;
   handleFocus(): void;
   handleBlur(): void;
   focus(): void;

package/types/lifecorner-angular-ui-kit-progress-bar.d.ts

@@ -12,6 +12,13 @@ export type ProgressBarVariant = 'linear' | 'circular';
  * - Animated value transitions
  * - Accessible with ARIA progressbar role
  *
+ * The bar is a visual aid; the text next to it carries the meaning. Write the
+ * status as text ('USM wird geladen …') and announce changes from a live
+ * region (`role="status"`). Screen readers don't announce a progress bar's
+ * changes by themselves. Give `ariaLabel` the same words as the status. Under
+ * `forced-colors: active` the fill is `Highlight`, the linear track gets a
+ * 1 px `CanvasText` outline and the circle's track is `GrayText` (3.17).
+ *
  * @example
  * ```html
  * <lc-progress-bar [value]="75" color="primary" size="md"></lc-progress-bar>
@@ -57,7 +64,11 @@ export declare class ProgressBarComponent {
    */
   inline: import("@angular/core").InputSignal<boolean>;
   /**
-   * Whether the progress is indeterminate (animated, no fixed value).
+   * Progress of unknown length: no value (`aria-valuenow` is absent) and no
+   * label. The linear bar moves a 40 % segment across the track, and the
+   * circle spins. Under `prefers-reduced-motion: reduce` nothing moves: the
+   * linear bar shows a full-width striped fill and the circle a dashed ring,
+   * so it still reads as busy, not as a value (3.17).
    * @default false
    */
   indeterminate: import("@angular/core").InputSignal<boolean>;

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

@@ -37,7 +37,11 @@ export interface TableColumn {
   width?: string;
   /** Optional CSS class(es) applied to both th and td cells */
   cssClass?: string;
-  /** Optional CSS class(es) for td cells only (string or resolver callback) */
+  /**
+   * 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`.
+   */
   cellClass?: TableCellClass;
   /** Optional inline styles for td cells only (object or resolver callback) */
   cellStyle?: TableCellStyle;
@@ -49,7 +53,21 @@ export interface TableColumn {
   editType?: 'text' | 'number' | 'select';
   /** Options for select edit type */
   editOptions?: string[];
+  /**
+   * Horizontal alignment of the column's header and cells. `end` aligns both
+   * at the end edge (right in LTR) and sets `font-variant-numeric:
+   * tabular-nums`, for amounts, counts and percentages. A sort arrow then sits
+   * before the label, so the label stays flush with the figures. Adds
+   * `lc-table__cell--end` to the `th` and every `td`. It wins over a
+   * `cellClass` that sets `text-align`; use `cellStyle` to override it. A
+   * custom `lcTableCell` template inherits the alignment, but a flex or block
+   * child needs its own `justify-content: flex-end`. (3.17)
+   * @default 'start'
+   */
+  align?: TableColumnAlign;
 }
+/** Horizontal alignment of a table column (3.17). */
+export type TableColumnAlign = 'start' | 'end';
 /**
  * A row-level action rendered in the table's actions column (e.g. Freigeben, Ablehnen).
  * Action button clicks never trigger the row's `rowClick` output.

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

@@ -22,7 +22,9 @@ export interface Toast extends Required<Omit<ToastConfig, 'action'>> {
  * Toast service for showing ephemeral notifications.
  *
  * The toasts are rendered by `<lc-toast-outlet />`, which the application
- * places once (e.g. in its shell); without it nothing is shown.
+ * places once (e.g. in its shell); without it nothing is shown. The options,
+ * their defaults, the timing and how a toast is announced to screen readers
+ * are documented under *Feedback/Toast Outlet* (3.17).
  *
  * @example
  * ```typescript