@lilydesignsystem/angular-headless 0.5.0 → 0.7.0

package/types/lilydesignsystem-angular-headless.d.ts

@@ -1,4 +1,5 @@
 import * as i0 from "@angular/core";
+import { OnInit } from "@angular/core";
 /**
  * AccordionCheckbox — a checkbox option that reveals an accordion panel when checked
  *
@@ -3370,7 +3371,13 @@ export declare class ColorInput {
  */
 export declare class ColorPicker {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Horizontal position, 0-100 (saturation). Two-way bindable. */
+  readonly x: import("@angular/core").ModelSignal<number>;
+  /** Vertical position, 0-100 (brightness). Two-way bindable. */
+  readonly y: import("@angular/core").ModelSignal<number>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ColorPicker, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ColorPicker, "lily-color-picker", never, {
     "label": {
@@ -3378,12 +3385,30 @@ export declare class ColorPicker {
       "required": false;
       "isSignal": true;
     };
+    "x": {
+      "alias": "x";
+      "required": false;
+      "isSignal": true;
+    };
+    "y": {
+      "alias": "y";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "x": "xChange";
+    "y": "yChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * ColorPickerButton — a button showing a color swatch in a color picker
@@ -3670,6 +3695,10 @@ export declare class ContentsLink {
   readonly href: import("@angular/core").InputSignal<string>;
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Sets data-count on the link (and data-complete when 0). */
+  readonly count: import("@angular/core").InputSignal<number | undefined>;
+  /** Visible, localised count text (e.g. "3 to do"), rendered inside the link after the text. */
+  readonly countLabel: import("@angular/core").InputSignal<string | undefined>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ContentsLink, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ContentsLink, "lily-contents-link", never, {
     "href": {
@@ -3687,6 +3716,16 @@ export declare class ContentsLink {
       "required": false;
       "isSignal": true;
     };
+    "count": {
+      "alias": "count";
+      "required": false;
+      "isSignal": true;
+    };
+    "countLabel": {
+      "alias": "countLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 /**
@@ -3737,15 +3776,55 @@ export declare class ContentsListItem {
   }, {}, never, ["*"], true, never>;
 }
 /**
- * ContentsNav — a contents navigation area
+ * Which section is current: the last whose top has passed the activation line
+ * (`tops` are each section's top relative to the scroller; `offset` is the line).
+ * At the bottom of the scroll range the last section wins (a short last section
+ * never reaches the line); before the first section, the first.
+ */
+declare function activeSectionIndex(tops: number[], offset: number, atBottom: boolean): number;
+/** The in-page `<a href="#id">` links inside `nav`. */
+declare function contentsLinks(nav: Element): HTMLAnchorElement[];
+declare function contentsLinkId(link: Element): string;
+declare function contentsTarget(link: Element, doc: Document): HTMLElement | null;
+export type ScrollspyOptions = {
+  /** Activation line, px below the top of `root`. */
+  offset?: number;
+  /** A scrolling element other than the viewport. */
+  root?: HTMLElement | null;
+  /** The `aria-current` token set on the active link. */
+  current?: string;
+  /** Called once per change, with the section id. */
+  onChange?: (id: string) => void;
+};
+/**
+ * Mark the link of the section in view with `aria-current` and `data-active`
+ * (and its enclosing `<li>`s with `data-descendant-active`). Returns a function
+ * that stops listening.
+ */
+declare function startScrollspy(nav: HTMLElement, options?: ScrollspyOptions): () => void;
+/**
+ * ContentsNav — a navigation landmark for a table of contents.
  *
- * Headless Angular component. Renders the semantic HTML root with the
- * kebab-case class hook `contents-nav` and the consumer-provided `className`.
- * Ships zero CSS; the consumer styles via the class hook.
+ * With `spy` it also marks the link of the section currently in view
+ * (`aria-current` and `data-active`): the links are the consumer's own
+ * `<a href="#id">` elements projected into the nav. See the component's
+ * `index.md` for the rules (activation line, bottom of page, click lock).
  */
 export declare class ContentsNav {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Scrollspy: mark the link of the section currently in view. */
+  readonly spy: import("@angular/core").InputSignal<boolean>;
+  /** Activation line, px below the top of `root`; set to a fixed header's height. */
+  readonly offset: import("@angular/core").InputSignal<number>;
+  /** A scrolling element other than the viewport. */
+  readonly root: import("@angular/core").InputSignal<HTMLElement | null>;
+  /** The aria-current token set on the active link. */
+  readonly current: import("@angular/core").InputSignal<string>;
+  /** The id of the section currently in view (spy only). Two-way bindable: `[(active)]`. */
+  readonly active: import("@angular/core").ModelSignal<string>;
+  private readonly navEl;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<ContentsNav, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ContentsNav, "lily-contents-nav", never, {
     "label": {
@@ -3758,7 +3837,34 @@ export declare class ContentsNav {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+    "spy": {
+      "alias": "spy";
+      "required": false;
+      "isSignal": true;
+    };
+    "offset": {
+      "alias": "offset";
+      "required": false;
+      "isSignal": true;
+    };
+    "root": {
+      "alias": "root";
+      "required": false;
+      "isSignal": true;
+    };
+    "current": {
+      "alias": "current";
+      "required": false;
+      "isSignal": true;
+    };
+    "active": {
+      "alias": "active";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "active": "activeChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * ContextMenu — a menu that appears on right-click or long-press
@@ -3769,7 +3875,13 @@ export declare class ContentsNav {
  */
 export declare class ContextMenu {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the menu is visible. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  private readonly menu;
+  constructor();
+  /** Roving focus over the `role="menuitem"` descendants (WAI-ARIA APG menu pattern). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenu, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ContextMenu, "lily-context-menu", never, {
     "label": {
@@ -3777,12 +3889,19 @@ export declare class ContextMenu {
       "required": false;
       "isSignal": true;
     };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * ContextMenuItem — one item in a context menu
@@ -4661,7 +4780,15 @@ export declare class DeutschlandKrankenversichertennummerView {
  */
 export declare class Dial {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Current value. Two-way bindable. */
+  readonly value: import("@angular/core").ModelSignal<number>;
+  readonly min: import("@angular/core").InputSignal<number>;
+  readonly max: import("@angular/core").InputSignal<number>;
+  readonly step: import("@angular/core").InputSignal<number>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  private clamp;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Dial, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Dial, "lily-dial", never, {
     "label": {
@@ -4669,12 +4796,39 @@ export declare class Dial {
       "required": false;
       "isSignal": true;
     };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "value": "valueChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * DialGroup — a group of dial components
@@ -4709,8 +4863,12 @@ export declare class DialGroup {
  */
 export declare class Dialog {
   readonly label: import("@angular/core").InputSignal<string>;
-  readonly open: import("@angular/core").InputSignal<boolean>;
+  /** Whether the dialog is visible. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  /** Whether the dialog is modal (`aria-modal`). */
+  readonly modal: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Dialog, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Dialog, "lily-dialog", never, {
     "label": {
@@ -4723,12 +4881,19 @@ export declare class Dialog {
       "required": false;
       "isSignal": true;
     };
+    "modal": {
+      "alias": "modal";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * Diff — a side-by-side comparison of two items
@@ -4992,7 +5157,12 @@ export declare class Draft {
  */
 export declare class Drawer {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the panel is shown. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  /** Edge the panel attaches to; exposed as `data-side`. */
+  readonly side: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Drawer, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Drawer, "lily-drawer", never, {
     "label": {
@@ -5000,12 +5170,24 @@ export declare class Drawer {
       "required": false;
       "isSignal": true;
     };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "side": {
+      "alias": "side";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * DropdownMenu — a menu that opens below a trigger button
@@ -5016,7 +5198,13 @@ export declare class Drawer {
  */
 export declare class DropdownMenu {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the menu is open. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  private readonly menu;
+  constructor();
+  /** Roving focus over the `role="menuitem"` descendants (WAI-ARIA APG menu pattern). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenu, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenu, "lily-dropdown-menu", never, {
     "label": {
@@ -5024,12 +5212,19 @@ export declare class DropdownMenu {
       "required": false;
       "isSignal": true;
     };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * Editable — an inline-editable text element that toggles between view and edit modes
@@ -5040,7 +5235,16 @@ export declare class DropdownMenu {
  */
 export declare class Editable {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** The committed value. Two-way bindable. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /** Whether the text field is showing. Two-way bindable. */
+  readonly editing: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected readonly draft: import("@angular/core").WritableSignal<string>;
+  protected startEditing(): void;
+  protected onDisplayKeydown(event: KeyboardEvent): void;
+  protected onInputKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Editable, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Editable, "lily-editable", never, {
     "label": {
@@ -5048,12 +5252,30 @@ export declare class Editable {
       "required": false;
       "isSignal": true;
     };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "editing": {
+      "alias": "editing";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "value": "valueChange";
+    "editing": "editingChange";
+  }, never, never, true, never>;
 }
 /**
  * EditableForm — a form wrapper for inline editing of content
@@ -5064,7 +5286,15 @@ export declare class Editable {
  */
 export declare class EditableForm {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the form is showing. Two-way bindable; submit and Escape set it to false. */
+  readonly editing: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Emitted after the form is submitted (the native submit is prevented). */
+  readonly submitted: import("@angular/core").OutputEmitterRef<SubmitEvent>;
+  /** Emitted when Escape cancels editing. */
+  readonly cancelled: import("@angular/core").OutputEmitterRef<void>;
+  protected onSubmit(event: Event): void;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<EditableForm, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<EditableForm, "lily-editable-form", never, {
     "label": {
@@ -5072,12 +5302,21 @@ export declare class EditableForm {
       "required": false;
       "isSignal": true;
     };
+    "editing": {
+      "alias": "editing";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "editing": "editingChange";
+    "submitted": "submitted";
+    "cancelled": "cancelled";
+  }, never, ["*"], true, never>;
 }
 /**
  * EestiIsikukoodInput — an input for entering Estonia's Isikukood (IK)
@@ -7336,6 +7575,60 @@ export declare class HeatmapChart {
     };
   }, {}, never, ["*", "[dataTable]"], true, never>;
 }
+/**
+ * HeatmapChartWithYearOfDays — a headless wrapper for a grid chart where cell colour encodes the value.
+ *
+ * Mirrors the Svelte canonical: the consumer supplies the inline <svg> as
+ * projected content; nothing is drawn here. The graphic is a role="img"
+ * wrapper named by `label` (`describedBy` is its aria-describedby). An
+ * element projected with the `dataTable` attribute (`<table dataTable>`)
+ * is rendered in `.heatmap-chart-with-year-of-days-data-table`, a SIBLING of the image wrapper:
+ * role="img" makes descendants presentational, so a table inside it would
+ * be invisible to assistive technology.
+ * Keyboard: none on the graphic; the table follows native table behaviour.
+ * Deviations from Svelte: no rest-props spread (Angular cannot spread onto
+ * an inner element); the data-table wrapper is always rendered (Angular
+ * cannot detect projected content), empty when nothing is projected.
+ */
+export declare class HeatmapChartWithYearOfDays {
+  /** Accessible name for the chart. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The calendar year shown (data-year). */
+  readonly year: import("@angular/core").InputSignal<number>;
+  /** First weekday row: 0 = Sunday … 6 = Saturday (data-week-start). No default: it is locale-dependent. */
+  readonly weekStart: import("@angular/core").InputSignal<number>;
+  /** Id of a description (aria-describedby on the image wrapper). */
+  readonly describedBy: import("@angular/core").InputSignal<string>;
+  readonly className: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HeatmapChartWithYearOfDays, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HeatmapChartWithYearOfDays, "lily-heatmap-chart-with-year-of-days", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "year": {
+      "alias": "year";
+      "required": true;
+      "isSignal": true;
+    };
+    "weekStart": {
+      "alias": "weekStart";
+      "required": true;
+      "isSignal": true;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "className": {
+      "alias": "className";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[dataTable]"], true, never>;
+}
 /**
  * Hero — a large box or image with a title and description
  *
@@ -7466,7 +7759,10 @@ export declare class Hint {
  */
 export declare class HorizontalScroller {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Pixels scrolled by ArrowLeft / ArrowRight. */
+  readonly step: import("@angular/core").InputSignal<number>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<HorizontalScroller, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalScroller, "lily-horizontal-scroller", never, {
     "label": {
@@ -7474,6 +7770,11 @@ export declare class HorizontalScroller {
       "required": false;
       "isSignal": true;
     };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
@@ -10023,6 +10324,8 @@ export declare class MentionsInput {
 export declare class Menu {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Roving focus over the `role="menuitem"` descendants (WAI-ARIA APG menu pattern). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Menu, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "lily-menu", never, {
     "label": {
@@ -10047,6 +10350,8 @@ export declare class Menu {
 export declare class MenuBar {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Roving focus left/right over the `role="menuitem"` descendants. */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<MenuBar, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<MenuBar, "lily-menu-bar", never, {
     "label": {
@@ -10259,6 +10564,89 @@ export declare class MexicoClaveUnicaDeRegistroDePoblacionView {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Middle truncation: shorten a string to fit a width by cutting out the middle, keeping the start and the end ("report-fi…q3.pdf").
+ * Pure and framework-neutral: the caller supplies `measure`, so the module reads no DOM and is tested without a browser.
+ *
+ * Works on grapheme clusters (Intl.Segmenter, falling back to code points), so it never splits a surrogate pair, a combining
+ * sequence or an emoji. The width search is binary, so it measures O(log n) candidate strings.
+ *
+ * Strategies:
+ *   "even"      the start and the end share what fits, the end taking the extra cluster when the count is odd.
+ *   "fixed-end" exactly `end` clusters are kept at the end; the start takes all the remaining room.
+ *   "min-end"   an even split, but at least `end` clusters are kept at the end (a file extension, a domain suffix).
+ */
+export type TruncationStrategy = "even" | "fixed-end" | "min-end";
+export interface TruncateMiddleOptions {
+  /** The ellipsis string. Required: the module has no default text (internationalisation). */
+  ellipsis: string;
+  /** The width available to the whole result, in the unit `measure` returns. */
+  maxWidth: number;
+  /** Width of a string in the same unit as `maxWidth`. */
+  measure: (text: string) => number;
+  strategy?: TruncationStrategy;
+  /** Clusters kept at the end for "fixed-end" and "min-end". Ignored by "even". */
+  end?: number;
+}
+/** Split into user-perceived characters. */
+declare function splitGraphemes(text: string): string[];
+/** The text shortened to fit `maxWidth`, or unchanged when it already fits. */
+declare function truncateMiddle(text: string, options: TruncateMiddleOptions): string;
+/**
+ * MiddleTruncation — a string shortened in the middle to fit its width, keeping the start and the end.
+ *
+ * Mirrors the Svelte canonical: the width is measured in the browser (canvas text metrics in the element's own font)
+ * and re-measured when the container resizes; until then, and on the server, the full text is shown. The shortened string
+ * is aria-hidden and the whole text sits in `.middle-truncation-full`, which the consumer visually hides, so assistive
+ * technology, find-in-page and copy get the real text.
+ *
+ * Inputs: `text` (required), `ellipsis` (required, no default), `strategy` ("even" | "fixed-end" | "min-end"), `end`, `className`.
+ * Keyboard: none.
+ * Deviation from Svelte: no rest-props spread (Angular cannot spread onto an inner element).
+ */
+export declare class MiddleTruncation {
+  readonly className: import("@angular/core").InputSignal<string>;
+  /** The full text. */
+  readonly text: import("@angular/core").InputSignal<string>;
+  /** The cut marker; no default. */
+  readonly ellipsis: import("@angular/core").InputSignal<string>;
+  /** How the room is shared between start and end. */
+  readonly strategy: import("@angular/core").InputSignal<TruncationStrategy>;
+  /** Characters kept at the end for "fixed-end" and "min-end". */
+  readonly end: import("@angular/core").InputSignal<number | undefined>;
+  private readonly root;
+  protected readonly shown: import("@angular/core").WritableSignal<string | null>;
+  private context;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<MiddleTruncation, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MiddleTruncation, "lily-middle-truncation", never, {
+    "className": {
+      "alias": "className";
+      "required": false;
+      "isSignal": true;
+    };
+    "text": {
+      "alias": "text";
+      "required": true;
+      "isSignal": true;
+    };
+    "ellipsis": {
+      "alias": "ellipsis";
+      "required": true;
+      "isSignal": true;
+    };
+    "strategy": {
+      "alias": "strategy";
+      "required": false;
+      "isSignal": true;
+    };
+    "end": {
+      "alias": "end";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * MisrAlRaqmAlQawmiInput — an input for entering Egypt's الرقم القومي (National Number)
  *
@@ -12055,9 +12443,25 @@ export declare class PilipinasPhilhealthIdentificationNumberView {
  * kebab-case class hook `pin-input-div` and the consumer-provided `className`.
  * Ships zero CSS; the consumer styles via the class hook.
  */
-export declare class PinInputDiv {
+export declare class PinInputDiv implements OnInit {
   readonly label: import("@angular/core").InputSignal<string>;
+  readonly length: import("@angular/core").InputSignal<number>;
+  /** Accessible name of one box, e.g. `(n, total) => ...`. Falls back to `label`. */
+  readonly digitLabel: import("@angular/core").InputSignal<((position: number, length: number) => string) | undefined>;
+  /** The digits entered so far, as one string. Two-way bindable. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected readonly digits: import("@angular/core").WritableSignal<string[]>;
+  protected readonly indexes: import("@angular/core").Signal<number[]>;
+  private readonly inputs;
+  private initialDigits;
+  private readonly host;
+  constructor();
+  ngOnInit(): void;
+  protected digitName(index: number): string | null;
+  protected onInput(index: number, event: Event): void;
+  protected onKeydown(index: number, event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<PinInputDiv, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<PinInputDiv, "lily-pin-input-div", never, {
     "label": {
@@ -12065,12 +12469,34 @@ export declare class PinInputDiv {
       "required": false;
       "isSignal": true;
     };
+    "length": {
+      "alias": "length";
+      "required": false;
+      "isSignal": true;
+    };
+    "digitLabel": {
+      "alias": "digitLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
 }
 /**
  * Place — a place component that contains other place-related information
@@ -14105,6 +14531,12 @@ export declare class SegmentGroup {
 export declare class SegmentGroupItem {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Whether this segment is selected (`aria-checked`, and the roving tab stop). */
+  readonly checked: import("@angular/core").InputSignal<boolean>;
+  /** Value associated with this segment, exposed as `data-value`. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Whether this segment is disabled. */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<SegmentGroupItem, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SegmentGroupItem, "lily-segment-group-item", never, {
     "label": {
@@ -14117,6 +14549,21 @@ export declare class SegmentGroupItem {
       "required": false;
       "isSignal": true;
     };
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 /**
@@ -14232,7 +14679,12 @@ export declare class SharePage {
  */
 export declare class Sheet {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the panel is shown. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  /** Edge the panel attaches to; exposed as `data-side`. */
+  readonly side: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Sheet, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Sheet, "lily-sheet", never, {
     "label": {
@@ -14240,12 +14692,24 @@ export declare class Sheet {
       "required": false;
       "isSignal": true;
     };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "side": {
+      "alias": "side";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * ShowMore — a content region clamped to a shorter height with a button that reveals the rest
@@ -14485,7 +14949,10 @@ export declare class SkipLink {
  */
 export declare class SlideOutDrawer {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the panel is shown. Two-way bindable; Escape sets it to false. */
+  readonly open: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<SlideOutDrawer, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SlideOutDrawer, "lily-slide-out-drawer", never, {
     "label": {
@@ -14493,12 +14960,19 @@ export declare class SlideOutDrawer {
       "required": false;
       "isSignal": true;
     };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "open": "openChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * Slider — a draggable control for selecting a value along a track
@@ -15564,10 +16038,16 @@ export declare class SverigePersonnummerView {
  * Ships zero CSS; the consumer styles via the class hook.
  */
 export declare class SwitchButton {
-  /** Optional aria-label override. */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Extra CSS classes appended to the base class. */
+  /** Whether the control is on. Two-way bindable. */
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /**
+   * Space and Enter activate a native <button> through `click`, so no key handler is
+   * needed (and none can double-toggle).
+   */
+  protected toggle(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<SwitchButton, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SwitchButton, "lily-switch-button", never, {
     "label": {
@@ -15575,12 +16055,24 @@ export declare class SwitchButton {
       "required": false;
       "isSignal": true;
     };
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "checked": "checkedChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * TabBar — a group of tabs for switching between content panels
@@ -15592,6 +16084,8 @@ export declare class SwitchButton {
 export declare class TabBar {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Roving focus over the `role="tab"` descendants (left/right, wrapping; Home/End). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TabBar, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TabBar, "lily-tab-bar", never, {
     "label": {
@@ -15616,6 +16110,10 @@ export declare class TabBar {
 export declare class TabBarButton {
   /** Optional aria-label override. */
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether this tab is the selected one (roving tabindex: only it is tabbable). */
+  readonly selected: import("@angular/core").InputSignal<boolean>;
+  /** Id of the tab panel this tab controls. */
+  readonly controls: import("@angular/core").InputSignal<string>;
   /** Extra CSS classes appended to the base class. */
   readonly className: import("@angular/core").InputSignal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<TabBarButton, never>;
@@ -15625,6 +16123,16 @@ export declare class TabBarButton {
       "required": false;
       "isSignal": true;
     };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "controls": {
+      "alias": "controls";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
@@ -15834,6 +16342,8 @@ export declare class TableTH {
 export declare class Tag {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Announce changes: a role="status" live region. Off by default. */
+  readonly live: import("@angular/core").InputSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<Tag, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Tag, "lily-tag", never, {
     "label": {
@@ -15846,7 +16356,12 @@ export declare class Tag {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+    "live": {
+      "alias": "live";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "*"], true, never>;
 }
 /**
  * TagGroup — a group of tag elements
@@ -15931,6 +16446,8 @@ export declare class TagInput {
 export declare class TaskBar {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Roving focus over buttons and tabindex descendants (left/right, wrapping; Home/End). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TaskBar, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TaskBar, "lily-task-bar", never, {
     "label": {
@@ -16433,6 +16950,12 @@ export declare class Tile {
 export declare class TileMap {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /**
+   * Arrow keys move focus between `[data-tile]` descendants (left/right by order, up/down to the
+   * nearest tile in the row above or below); Enter / Space fire a bubbling `tile-activate` event
+   * on the focused tile; Escape blurs it.
+   */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TileMap, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TileMap, "lily-tile-map", never, {
     "label": {
@@ -16704,10 +17227,16 @@ export declare class Toast {
  * Ships zero CSS; the consumer styles via the class hook.
  */
 export declare class ToggleButton {
-  /** Optional aria-label override. */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Extra CSS classes appended to the base class. */
+  /** Whether the control is on. Two-way bindable. */
+  readonly pressed: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /**
+   * Space and Enter activate a native <button> through `click`, so no key handler is
+   * needed (and none can double-toggle).
+   */
+  protected toggle(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButton, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ToggleButton, "lily-toggle-button", never, {
     "label": {
@@ -16715,12 +17244,24 @@ export declare class ToggleButton {
       "required": false;
       "isSignal": true;
     };
+    "pressed": {
+      "alias": "pressed";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "pressed": "pressedChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * ToggleGroup — a group of toggle buttons for selecting options
@@ -16756,6 +17297,8 @@ export declare class ToggleGroup {
 export declare class ToolBar {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Roving focus over buttons and tabindex descendants (left/right, wrapping; Home/End). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ToolBar, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ToolBar, "lily-tool-bar", never, {
     "label": {
@@ -16976,7 +17519,10 @@ export declare class Tooltip {
  */
 export declare class Tour {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the tour is showing. Two-way bindable; Escape sets it to false. */
+  readonly active: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<Tour, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<Tour, "lily-tour", never, {
     "label": {
@@ -16984,12 +17530,19 @@ export declare class Tour {
       "required": false;
       "isSignal": true;
     };
+    "active": {
+      "alias": "active";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "active": "activeChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * TourList — an ordered list of tour guide steps
@@ -17000,7 +17553,10 @@ export declare class Tour {
  */
 export declare class TourList {
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Whether the tour is showing. Two-way bindable; Escape sets it to false. */
+  readonly active: import("@angular/core").ModelSignal<boolean>;
   readonly className: import("@angular/core").InputSignal<string>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TourList, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TourList, "lily-tour-list", never, {
     "label": {
@@ -17008,12 +17564,19 @@ export declare class TourList {
       "required": false;
       "isSignal": true;
     };
+    "active": {
+      "alias": "active";
+      "required": false;
+      "isSignal": true;
+    };
     "className": {
       "alias": "className";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "active": "activeChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * TourListItem — one step in a tour guide list
@@ -17102,6 +17665,8 @@ export declare class TreeLink {
 export declare class TreeList {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Focus moves over the `role="treeitem"` descendants (up/down, wrapping; Home/End). */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TreeList, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TreeList, "lily-tree-list", never, {
     "label": {
@@ -17130,6 +17695,9 @@ export declare class TreeList {
  */
 export declare class TreeListItem {
   readonly className: import("@angular/core").InputSignal<string>;
+  /** Expanded state, two-way bindable. Leave undefined for a leaf (no aria-expanded). */
+  readonly expanded: import("@angular/core").ModelSignal<boolean | undefined>;
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TreeListItem, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<TreeListItem, "li[lily-tree-list-item]", never, {
     "className": {
@@ -17137,7 +17705,14 @@ export declare class TreeListItem {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+  }, never, ["*"], true, never>;
 }
 /**
  * TreeMenu — a hierarchical tree menu with expandable branches
@@ -17952,6 +18527,131 @@ export declare class WeekInput {
     "value": "valueChange";
   }, never, never, true, never>;
 }
+/**
+ * Keyboard model for a wheel picker: a single-select listbox where the selection follows the cursor (APG listbox, "selection
+ * follows focus"), so moving the cursor IS choosing. Pure and framework-neutral, tested without a browser.
+ *
+ * Disabled options are skipped by every move. Arrows wrap only when `loop` is set; Home, End, PageUp and PageDown never wrap.
+ */
+export interface WheelOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export type WheelMoveKey = "ArrowUp" | "ArrowDown" | "Home" | "End" | "PageUp" | "PageDown";
+declare const WHEEL_MOVE_KEYS: readonly string[];
+export interface WheelMoveOptions {
+  /** Arrow keys wrap from the last enabled option to the first and back. Default false. */
+  loop?: boolean;
+  /** Enabled options PageUp / PageDown move by. Default 5. */
+  pageSize?: number;
+}
+/**
+ * The index to select after `key`, or -1 when no option can be selected. `current` is the selected index, or -1 for none.
+ * With nothing selected, ArrowDown / PageDown / Home choose the first enabled option and ArrowUp / PageUp / End the last.
+ */
+declare function nextWheelIndex(options: readonly WheelOption[], current: number, key: WheelMoveKey, move?: WheelMoveOptions): number;
+declare const WHEEL_TYPEAHEAD_RESET_MS = 700;
+export interface WheelTypeahead {
+  prefix: string;
+  at: number;
+}
+/** The prefix after `key` at time `now`: it grows while presses are within the reset time, else starts over. */
+declare function nextWheelPrefix(previous: WheelTypeahead, key: string, now: number, resetMs?: number): WheelTypeahead;
+/** Whether a key press is a type-ahead character: one printable character other than space, no Ctrl, Alt or Meta. */
+declare function isWheelTypeaheadKey(event: {
+  key: string;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  metaKey?: boolean;
+}): boolean;
+/**
+ * The enabled option to move to for the typed `prefix`, or -1. Searches from the option after `current` and wraps; a prefix of one
+ * repeated letter ("ss") counts as that single letter, so pressing it again steps through the options that start with it.
+ */
+declare function wheelTypeaheadIndex(options: readonly WheelOption[], current: number, prefix: string): number;
+/**
+ * WheelPicker — a vertical single-select listbox where the selection follows the cursor.
+ *
+ * Mirrors the Svelte canonical: moving with the arrow keys, typing, or clicking an option chooses it. The component owns
+ * the roles and the keys; the wheel LOOK (scroll snapping, fading) is the consumer's CSS. `value` is a two-way `model`
+ * (`[(value)]`); the listbox is `.wheel-picker-list` (`role="listbox"`, vertical, `aria-activedescendant`), each option
+ * `.wheel-picker-option` (`role="option"`, `aria-selected`, `aria-disabled`). Keyboard (APG listbox, selection follows
+ * focus): ArrowDown / ArrowUp, Home / End, PageDown / PageUp, type-ahead over the labels; disabled options are skipped.
+ *
+ * Inputs: `label` (required), `options` (required), `value` (model), `loop`, `pageSize`, `disabled`, `name`, `className`.
+ * Deviation from Svelte: no rest-props spread (Angular cannot spread onto an inner element).
+ */
+export declare class WheelPicker {
+  readonly className: import("@angular/core").InputSignal<string>;
+  /** Accessible name. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The choices. */
+  readonly options: import("@angular/core").InputSignal<WheelOption[]>;
+  /** The selected option's value; two-way. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /** Arrow keys wrap at the ends. */
+  readonly loop: import("@angular/core").InputSignal<boolean>;
+  /** Enabled options PageUp / PageDown move by. */
+  readonly pageSize: import("@angular/core").InputSignal<number>;
+  /** Ignores keys and clicks. */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Form field name for a hidden input. */
+  readonly name: import("@angular/core").InputSignal<string | undefined>;
+  protected readonly uid: string;
+  private readonly list;
+  private typeahead;
+  protected selectedIndex(): number;
+  constructor();
+  private select;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WheelPicker, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<WheelPicker, "lily-wheel-picker", never, {
+    "className": {
+      "alias": "className";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "loop": {
+      "alias": "loop";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSize": {
+      "alias": "pageSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
 /**
  * YisraelTeudatZehutInput — an input for entering Israel's Teudat Zehut (תעודת זהות)
  *