@lifecorner/angular-ui-kit 3.36.0 → 3.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/fesm2022/lifecorner-angular-ui-kit-card.mjs +2 -2
  2. package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
  3. package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs +4 -4
  4. package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map +1 -1
  5. package/fesm2022/lifecorner-angular-ui-kit-hero.mjs +24 -3
  6. package/fesm2022/lifecorner-angular-ui-kit-hero.mjs.map +1 -1
  7. package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs +2 -2
  8. package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs.map +1 -1
  9. package/fesm2022/lifecorner-angular-ui-kit-list.mjs +10 -5
  10. package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
  11. package/fesm2022/lifecorner-angular-ui-kit-select.mjs +15 -10
  12. package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
  13. package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs +27 -4
  14. package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs.map +1 -1
  15. package/fesm2022/lifecorner-angular-ui-kit-table.mjs +2 -2
  16. package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
  17. package/package.json +1 -1
  18. package/src/styles/_theme-light.scss +8 -1
  19. package/src/styles/theme-contrast.spec.ts +44 -0
  20. package/src/styles/theme-modes.spec.ts +20 -5
  21. package/types/lifecorner-angular-ui-kit-hero.d.ts +19 -1
  22. package/types/lifecorner-angular-ui-kit-internal-chart.d.ts +6 -0
  23. package/types/lifecorner-angular-ui-kit-list.d.ts +10 -0
  24. package/types/lifecorner-angular-ui-kit-select.d.ts +13 -1
  25. package/types/lifecorner-angular-ui-kit-state-strip.d.ts +20 -2
  26. package/types/lifecorner-angular-ui-kit-table.d.ts +9 -1
@@ -24,7 +24,12 @@ export type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
24
24
  * - Content projection for body and footer sections
25
25
  * - Footer slot for metadata, stats, or CTAs
26
26
  * - Media slot (`[hero-media]`) for a visual: below the text on small screens,
27
- * beside it from 1024 px, never under the body's 85 % opacity
27
+ * beside it from 1024 px
28
+ * - 3.37: components in the default slot keep full opacity (no `opacity` on
29
+ * the slot), and badges in a hero take the light palette in both themes;
30
+ * `fill` takes the height of a stretching grid or flex row
31
+ * - 3.38: label, title and body are white at full strength on every default
32
+ * band (4.58:1 or more); five bands are darker at their light end
28
33
  * - Content width `lg`: a full-bleed band whose text lines up with the page column
29
34
  * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level
30
35
  * - `focusTitle()` (3.36): moves focus to the title (`tabindex="-1"`, out of the
@@ -92,6 +97,14 @@ export declare class HeroComponent {
92
97
  * @default 1
93
98
  */
94
99
  headingLevel: import("@angular/core").InputSignal<HeroHeadingLevel>;
100
+ /**
101
+ * Fill the height the container gives the hero (3.37, cockpit row 1): in a
102
+ * grid or flex row that stretches its items, the band ends at the row's
103
+ * bottom edge; the content stays at the top and `[hero-footer]` sits at the
104
+ * bottom. Without it the hero is as tall as its content.
105
+ * @default false
106
+ */
107
+ fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
95
108
  private readonly titleEl;
96
109
  private readonly labelEl;
97
110
  /**
@@ -149,5 +162,10 @@ export declare class HeroComponent {
149
162
  "required": false;
150
163
  "isSignal": true;
151
164
  };
165
+ "fill": {
166
+ "alias": "fill";
167
+ "required": false;
168
+ "isSignal": true;
169
+ };
152
170
  }, {}, never, ["*", "[hero-media]", "[hero-footer]"], true, never>;
153
171
  }
@@ -26,6 +26,12 @@ export declare function readableInk(fill: string): string | null;
26
26
  *
27
27
  * Charts fall back to this list when a series/segment brings no `color` of its
28
28
  * own; per-item colours always win.
29
+ *
30
+ * 3.37 (request 057, 056 F-1, WCAG 1.4.11): entries 3 and 4 are the status
31
+ * inks, not the status fills. `--color-success-default` measured 2.47–2.72:1
32
+ * and `--color-warning-default` 2.05–2.26:1 on light pages; the inks reach
33
+ * 5.30 and 6.03:1 there (8.40 and 7.65:1 dark). Every entry keeps 3:1 against
34
+ * `--color-background` and `--color-surface` in both themes.
29
35
  */
30
36
  export declare const CHART_PALETTE: readonly string[];
31
37
  /** Palette colour for the series/segment at `index`, wrapping around. */
@@ -123,6 +123,9 @@ export type ListItemPart = 'row' | 'action';
123
123
  * (WCAG 2.4.3)
124
124
  * - `showChevron` (3.36): a decorative chevron at the end of every
125
125
  * `clickable` or `href` row
126
+ * - 3.37: a `clickable` row with an `action` holds a native button stretched
127
+ * over the row (named by the row) beside its action, so no control sits
128
+ * inside another (WCAG 4.1.2); one Tab stop for the row, then the action
126
129
  *
127
130
  * @example
128
131
  * ```html
@@ -211,6 +214,13 @@ export declare class ListComponent {
211
214
  * @param part Which part of the row gets the focus.
212
215
  */
213
216
  focusItem(id: string, part?: ListItemPart): void;
217
+ /** Generated id prefix, taken once per instance (module counter, the same in every prerender). */
218
+ private readonly uid;
219
+ /**
220
+ * Id of row `index` of a `clickable` row with an `action` (3.37): the
221
+ * row's button is named by it (`aria-labelledby`).
222
+ */
223
+ protected rowId(index: number): string;
214
224
  /** Whether a row renders as a link: `href` set and not disabled. */
215
225
  protected isLinkRow(item: ListItem): boolean;
216
226
  /**
@@ -161,8 +161,13 @@ export declare class SelectComponent implements ControlValueAccessor {
161
161
  /**
162
162
  * Close dropdown. Idempotent: the overlay's `detach` re-enters here after
163
163
  * `isOpen` flips, and that second call must not emit `closed` again.
164
+ *
165
+ * `returnFocus` (3.37, request 057, services row 2): a single-select choice
166
+ * and `Escape` also hand the focus back to the trigger when it is on `<body>`
167
+ * (a tap on an option, which has no `tabindex`, moves it there). Without it
168
+ * (backdrop click, detach) only focus inside the panel returns, as before.
164
169
  */
165
- close(): void;
170
+ close(returnFocus?: boolean): void;
166
171
  /**
167
172
  * Select an option
168
173
  */
@@ -187,6 +192,13 @@ export declare class SelectComponent implements ControlValueAccessor {
187
192
  * Handle click outside
188
193
  */
189
194
  onClickOutside(): void;
195
+ /**
196
+ * Keys that reach the open overlay while the focus is outside the field and
197
+ * the panel, e.g. on `<body>` after a tap (3.37, request 057): `Escape`
198
+ * closes and returns the focus. It runs before the overlay's own `Escape`
199
+ * detach, which then finds the select closed.
200
+ */
201
+ onOverlayKeydown(event: KeyboardEvent): void;
190
202
  writeValue(value: SelectValue): void;
191
203
  registerOnChange(fn: (value: SelectValue) => void): void;
192
204
  registerOnTouched(fn: () => void): void;
@@ -23,7 +23,8 @@ export declare const DEFAULT_STATE_STRIP_LABELS: Readonly<StateStripLabels>;
23
23
  * state word. One Tab stop (the newest run first), Arrow Left/Right, Home and
24
24
  * End move between the runs, Escape hides the caption. Hovering or focusing a
25
25
  * segment shows its name below the strip (hidden from screen readers, which
26
- * read the cell).
26
+ * read the cell). 3.37: the pointer uses the whole strip (one layer over the
27
+ * row picks the run under it), so dense strips need no 24 px cells.
27
28
  *
28
29
  * Without segments it renders nothing. The segments are in the prerendered
29
30
  * HTML. CSS hooks: `--lc-state-strip-height` (default `2rem`) and
@@ -43,6 +44,11 @@ export declare class StateStripComponent {
43
44
  /**
44
45
  * The runs, in order, oldest first: one segment each. Empty renders nothing
45
46
  * (no box, no accessibility node).
47
+ *
48
+ * More runs than fit at 24 px (13 and more in 328 px) narrow the cells below
49
+ * 24 px; the pointer then uses the whole strip: pointing at it, or sliding a
50
+ * pressed finger along it, shows that run; the keyboard moves with the
51
+ * arrows (3.37).
46
52
  * @default []
47
53
  */
48
54
  readonly segments: import("@angular/core").InputSignal<readonly StateStripSegment[]>;
@@ -73,7 +79,7 @@ export declare class StateStripComponent {
73
79
  /** The roving Tab stop: the newest run until the user moves. */
74
80
  protected readonly current: import("@angular/core").WritableSignal<number>;
75
81
  /** The segment under the pointer, the one with focus, and whether Escape hid the caption. */
76
- private readonly hovered;
82
+ protected readonly hovered: import("@angular/core").WritableSignal<number | null>;
77
83
  private readonly focused;
78
84
  private readonly dismissed;
79
85
  /** The segment whose name the caption shows, if any. */
@@ -84,6 +90,18 @@ export declare class StateStripComponent {
84
90
  protected onBlur(): void;
85
91
  protected onPointerEnter(index: number): void;
86
92
  protected onPointerLeave(): void;
93
+ /** The run the scrub layer last picked; a move within it changes nothing (as entering a cell). */
94
+ private scrubbed;
95
+ /**
96
+ * The pointer over the strip (3.37, request 057, 056 S-1): the run whose
97
+ * cell spans the pointer's x shows in the caption; outside every cell none.
98
+ */
99
+ protected onScrubMove(event: PointerEvent): void;
100
+ /** Releasing the pointer (a click, a lifted finger) focuses the run under it. */
101
+ protected onScrubUp(event: PointerEvent): void;
102
+ protected onScrubLeave(): void;
103
+ /** The index of the cell whose box spans `x`, any writing direction. */
104
+ private cellAt;
87
105
  /** Arrow Left/Right, Home, End move between the runs (no wrap); Escape hides the caption. */
88
106
  protected onKeydown(event: KeyboardEvent): void;
89
107
  static ɵfac: i0.ɵɵFactoryDeclaration<StateStripComponent, never>;
@@ -1,6 +1,6 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import { QueryList, TemplateRef } from "@angular/core";
3
- import { ButtonVariant } from "@lifecorner/angular-ui-kit/button";
3
+ import { ButtonSize, ButtonVariant } from "@lifecorner/angular-ui-kit/button";
4
4
  /**
5
5
  * Directive for defining custom cell templates in the Table component.
6
6
  *
@@ -84,6 +84,14 @@ export interface TableAction {
84
84
  icon?: string;
85
85
  /** Button variant (default: 'ghost') */
86
86
  variant?: ButtonVariant;
87
+ /**
88
+ * Size of the action's `lc-button` (3.37, services row 3). `'lg'` is
89
+ * 48.5 px high with a label and 45.6 px icon-only, for touch rows; the icon
90
+ * stays 20 px. Pass another size per breakpoint yourself.
91
+ *
92
+ * @default 'xs'
93
+ */
94
+ size?: ButtonSize;
87
95
  /** Optional tooltip / aria-label, useful for icon-only actions */
88
96
  tooltip?: string;
89
97
  /**