yukit-web 0.0.25 → 0.0.26

package/types/yukit-web.d.ts

@@ -1,7 +1,8 @@
 import { ClassValue } from 'clsx';
 import * as _angular_core from '@angular/core';
-import { ModelSignal, InputSignal, InputSignalWithTransform, Type, Provider, TemplateRef, OnInit, Signal } from '@angular/core';
+import { ModelSignal, Type, Provider, InputSignal, InputSignalWithTransform, TemplateRef, WritableSignal, Signal, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { SortingState, PaginationState, columnFilteringFeature, columnVisibilityFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, RowData, ColumnDef, ColumnFiltersState, ColumnVisibilityState, RowSelectionState } from '@tanstack/table-core';
 import { ButtonVariants } from 'yukit-web/helm/button';
 import * as i1 from 'yukit-web/helm/badge';
 import * as yukit_web from 'yukit-web';
@@ -13,7 +14,6 @@ import * as i1$3 from 'yukit-web/helm/empty';
 import * as i1$4 from 'yukit-web/helm/context-menu';
 import * as i2 from 'yukit-web/helm/dropdown-menu';
 import * as i1$5 from 'yukit-web/helm/table';
-import { columnFilteringFeature, columnVisibilityFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, RowData, ColumnDef, ColumnFiltersState, ColumnVisibilityState, PaginationState, RowSelectionState, SortingState } from '@tanstack/table-core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as _tanstack_angular_table from '@tanstack/angular-table';
 import * as i1$6 from 'yukit-web/helm/item';
@@ -74,23 +74,6 @@ declare class YuwClassDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwClassDirective, "[yuwClass]", never, { "yuwClass": { "alias": "yuwClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type YuwInputTypeDto = 'text' | 'email' | 'tel' | 'url' | 'number';
-type YuwInputModeDto = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-type YuwFieldSizeDto = 'default' | 'xs' | 'sm' | 'lg';
-interface YuwTextFieldContract {
-    readonly value: ModelSignal<string>;
-    readonly inputId: InputSignal<string | undefined>;
-    readonly placeholder: InputSignal<string | undefined>;
-    readonly disabled: InputSignalWithTransform<boolean, unknown>;
-    readonly readonly: InputSignalWithTransform<boolean, unknown>;
-    readonly required: InputSignalWithTransform<boolean, unknown>;
-    readonly invalid: InputSignalWithTransform<boolean, unknown>;
-    readonly helperText: InputSignal<string | undefined>;
-    readonly errorText: InputSignal<string | undefined>;
-    readonly name: InputSignal<string | undefined>;
-    readonly autocomplete: InputSignal<string | undefined>;
-}
-
 /**
  * Registers a component as a form control, so `formControlName`/`formControl`/`ngModel` bind to it.
  *
@@ -145,35 +128,238 @@ declare abstract class YuwValueAccessorBase<T> implements ControlValueAccessor {
 }
 
 /**
- * Shared surface of the single-value text controls (`yuw-input`, `yuw-password-input`,
- * `yuw-textarea`, `yuw-search-input`).
+ * Shared surface of every string-valued field that renders helper and error text under itself
+ * (`yuw-input-otp` and, through `YuwTextFieldBase`, the four text controls).
  *
- * Owns every input of `YuwTextFieldContract` plus `class` and `committed`, so the four controls
- * can't drift apart — the Liskov rule in `AGENTS.md`: same-role components share one input
- * contract. Anything only some of them honor (`maxlength`, `size`, `enterPressed`, …) stays on the
- * component, never here.
+ * Holds only what all of them honor: the value, the control `id` with its generated fallback, the
+ * invalid flag, the feedback texts and the `class` passthrough. Anything a subset can't support —
+ * `placeholder`, `readonly`, `required`, `name`, `autocomplete`, which `brn-input-otp` doesn't
+ * forward to its native input — lives one level down, per the Liskov rule in `AGENTS.md`.
  *
  * Subclasses provide `_autoId`, the fallback `id` used when the consumer sets no `inputId`.
  */
-declare abstract class YuwTextFieldBase extends YuwValueAccessorBase<string> implements YuwTextFieldContract {
-    readonly autocomplete: _angular_core.InputSignal<string | undefined>;
+declare abstract class YuwFieldBase extends YuwValueAccessorBase<string> {
     readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly name: _angular_core.InputSignal<string | undefined>;
-    readonly placeholder: _angular_core.InputSignal<string | undefined>;
-    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     readonly value: _angular_core.ModelSignal<string>;
-    readonly committed: _angular_core.OutputEmitterRef<string>;
     protected abstract readonly _autoId: string;
     protected readonly _inputId: _angular_core.Signal<string>;
     protected _emptyValue(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwFieldBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwFieldBase, never, never, { "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+type YuwInputTypeDto = 'text' | 'email' | 'tel' | 'url' | 'number';
+type YuwInputModeDto = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+type YuwFieldSizeDto = 'default' | 'xs' | 'sm' | 'lg';
+interface YuwTextFieldContract {
+    readonly value: ModelSignal<string>;
+    readonly inputId: InputSignal<string | undefined>;
+    readonly placeholder: InputSignal<string | undefined>;
+    readonly disabled: InputSignalWithTransform<boolean, unknown>;
+    readonly readonly: InputSignalWithTransform<boolean, unknown>;
+    readonly required: InputSignalWithTransform<boolean, unknown>;
+    readonly invalid: InputSignalWithTransform<boolean, unknown>;
+    readonly helperText: InputSignal<string | undefined>;
+    readonly errorText: InputSignal<string | undefined>;
+    readonly name: InputSignal<string | undefined>;
+    readonly autocomplete: InputSignal<string | undefined>;
+}
+
+/**
+ * Shared surface of the single-value text controls (`yuw-input`, `yuw-password-input`,
+ * `yuw-textarea`, `yuw-search-input`).
+ *
+ * Adds to `YuwFieldBase` the native text-input attributes all four forward, plus `committed`, so
+ * the controls can't drift apart — the Liskov rule in `AGENTS.md`: same-role components share one
+ * input contract. Anything only some of them honor (`maxlength`, `size`, `enterPressed`, …) stays
+ * on the component, never here.
+ */
+declare abstract class YuwTextFieldBase extends YuwFieldBase implements YuwTextFieldContract {
+    readonly autocomplete: _angular_core.InputSignal<string | undefined>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly committed: _angular_core.OutputEmitterRef<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwTextFieldBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwTextFieldBase, never, never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwTextFieldBase, never, never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "committed": "committed"; }, never, never, true, never>;
+}
+
+/**
+ * A single entry in `<yuw-combobox>`'s `options` input.
+ *
+ * `label` is data the parent supplies, not a component-owned default — the same rule
+ * `YuwSelectOptionDto` and `YuwBreadcrumbItemDto` follow. It doubles as the text the search
+ * filters on and the text shown in the trigger/chip once selected, so it must be the
+ * already-translated string.
+ *
+ * `data` carries whatever the consumer needs when rendering a custom item template
+ * (`*yuwComboboxItem`) — an avatar URL, a count, a nested entity. The component itself never
+ * reads it.
+ */
+interface YuwComboboxOptionDto<TData = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: TData;
+}
+
+/** The `let-` context of a `*yuwComboboxItem` template. `$implicit` is the option itself, so
+ * `let-option` works; `selected` is passed alongside because an item that renders its own
+ * markup loses the default check glyph and often needs to show that state some other way. */
+interface YuwComboboxItemContext<TData = unknown> {
+    $implicit: YuwComboboxOptionDto<TData>;
+    option: YuwComboboxOptionDto<TData>;
+    selected: boolean;
+}
+/**
+ * Structural directive for custom option item templates in `yuw-combobox`.
+ *
+ * Exposes the option object (`let-option`) and selection state (`let-selected="selected"`).
+ *
+ * Usage:
+ * ```html
+ * <yuw-combobox [options]="users" [(value)]="userId">
+ *   <ng-template yuwComboboxItem let-option let-selected="selected">
+ *     <img [src]="option.data.avatar" /> {{ option.label }}
+ *   </ng-template>
+ * </yuw-combobox>
+ * ```
+ */
+declare class YuwComboboxItemDirective<TData = unknown> {
+    readonly templateRef: TemplateRef<YuwComboboxItemContext<TData>>;
+    readonly typeOf: _angular_core.InputSignal<YuwComboboxOptionDto<TData>[] | undefined>;
+    static ngTemplateContextGuard<TData>(_directive: YuwComboboxItemDirective<TData>, _context: unknown): _context is YuwComboboxItemContext<TData>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxItemDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwComboboxItemDirective<any>, "[yuwComboboxItem]", never, { "typeOf": { "alias": "yuwComboboxItemTypeOf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type YuwComboboxValue = string | string[] | undefined;
+/**
+ * Searchable select combobox component supporting single or multiple selections, search filtering, and custom option rendering.
+ *
+ * Inputs / Models:
+ * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
+ * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
+ *   Emits `valueChange` on every selection change.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Applies to whichever control shape renders; the popover
+ *   panel and its inner search field keep their own compact sizing.
+ * - `multiple`: Enables multi-selection mode with removable tags/chips.
+ * - `disabled`: Disables combobox interaction.
+ * - `placeholder`: Placeholder text when no option is selected.
+ * - `searchPlaceholder`: Placeholder text inside the search field popover.
+ * - `emptyText`: Message text displayed when search yields no matching options.
+ * - `search`: Two-way search filter query string.
+ * - `triggerAriaLabel`: Required accessible name for the icon-only popover trigger (the chevron
+ *   button). User-facing text — the consuming app is responsible for providing it translated.
+ *   Only rendered by the single-select input shape, but required in every mode so switching
+ *   modes never silently drops the label.
+ * - `clearAriaLabel`: When set, the clear button is shown on the single-selection control and
+ *   this is its accessible name; when absent, there is no clear button. One input, one source of
+ *   truth. User-facing text — the consuming app is responsible for providing it translated.
+ * - `inputId`: HTML `id` for the focusable control (the search input, or the trigger button when
+ *   `readonlyTrigger` is set), enabling external `<label for="...">` association.
+ * - `readonlyTrigger`: Renders control as a button showing selected label, placing search input inside popover.
+ * - `invalid`: Forces invalid styling.
+ *
+ * `multiple` takes precedence over `readonlyTrigger`: when both are set the multi-select
+ * chips shape renders and `readonlyTrigger` is ignored.
+ *
+ * Usage:
+ * ```html
+ * <yuw-combobox [options]="userOptions" [(value)]="selectedUser" placeholder="Select user..."
+ *   triggerAriaLabel="Toggle options" clearAriaLabel="Clear selection" />
+ * <yuw-combobox [options]="categoryOptions" [(value)]="selectedCategories" multiple
+ *   triggerAriaLabel="Toggle options" />
+ * ```
+ */
+declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase<YuwComboboxValue> {
+    private readonly _panel;
+    protected readonly itemTemplate: _angular_core.Signal<YuwComboboxItemDirective<TData> | undefined>;
+    readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly emptyText: _angular_core.InputSignal<string | undefined>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly options: _angular_core.InputSignal<YuwComboboxOptionDto<TData>[]>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly readonlyTrigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly search: _angular_core.ModelSignal<string>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
+    readonly triggerAriaLabel: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<YuwComboboxValue>;
+    protected readonly _focusSelectors: string[];
+    private readonly _generatedId;
+    protected readonly _itemToString: (value: string) => string;
+    protected readonly _chipsClass: _angular_core.Signal<string>;
+    protected readonly _clearVisible: _angular_core.Signal<boolean>;
+    protected readonly _controlId: _angular_core.Signal<string>;
+    protected readonly _fieldClass: _angular_core.Signal<string>;
+    private readonly _labelByValue;
+    protected readonly _multipleValue: _angular_core.Signal<string[]>;
+    protected readonly _selectedChips: _angular_core.Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    protected readonly _selectedValues: _angular_core.Signal<Set<string>>;
+    protected readonly _singleValue: _angular_core.Signal<string | undefined>;
+    protected readonly _triggerClass: _angular_core.Signal<string>;
+    protected _emptyValue(): YuwComboboxValue;
+    protected _onFocusOut(event: FocusEvent): void;
+    protected onValueChange(next: YuwComboboxValue | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
+}
+
+interface YuwPageSort {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+/** Question a paged list asks its data source; `Filters` is the consumer's own filter shape. */
+interface YuwPageQuery<Filters> {
+    offset: number;
+    limit: number;
+    search: string;
+    filters: Filters;
+    sort?: YuwPageSort;
+}
+interface YuwPageRange {
+    start: number;
+    end: number;
+    total: number;
 }
+interface YuwPagedListOptions<Filters> {
+    filters: Signal<Filters>;
+    total: Signal<number>;
+    load: (query: YuwPageQuery<Filters>) => void;
+    pageSize?: number;
+}
+/** `page` and `goToPage` count from 1, like `yuw-pagination`; `pagination` from 0, like `yuw-datatable`. */
+interface YuwPagedList<Filters> {
+    readonly searchTerm: WritableSignal<string>;
+    readonly pageSize: WritableSignal<YuwComboboxValue>;
+    readonly pageSizeOptions: YuwComboboxOptionDto[];
+    readonly sorting: WritableSignal<SortingState>;
+    readonly pagination: WritableSignal<PaginationState>;
+    readonly query: Signal<YuwPageQuery<Filters>>;
+    readonly page: Signal<number>;
+    readonly totalPages: Signal<number>;
+    readonly range: Signal<YuwPageRange>;
+    goToPage(page: number): void;
+}
+
+/**
+ * State of a list paged at the source and the query derived from it. Changing search, filters,
+ * sorting or size returns to the first page within the same query; a total below the current page
+ * steps back to the last existing one. Must be created in an injection context.
+ */
+declare function createPagedList<Filters>(options: YuwPagedListOptions<Filters>): YuwPagedList<Filters>;
 
 type YuwColorDto = 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'muted' | 'violet';
 
@@ -228,12 +414,12 @@ declare class YuwButtonComponent {
     readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     readonly userClass: _angular_core.InputSignal<string>;
-    readonly variant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly yuwDropdownMenuTrigger: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     protected readonly _animationDisabled: _angular_core.Signal<boolean>;
     protected readonly _btnClass: _angular_core.Signal<string>;
-    protected readonly _effectiveVariant: _angular_core.Signal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    protected readonly _effectiveVariant: _angular_core.Signal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     protected onClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwButtonComponent, "yuw-button", never, { "animationDisabled": { "alias": "animationDisabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "yuwDropdownMenuTrigger": { "alias": "yuwDropdownMenuTrigger"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*", "*"], true, never>;
@@ -346,14 +532,14 @@ declare class YuwButtonGroupComponent {
     readonly color: _angular_core.InputSignal<YuwColorDto>;
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly selectedColor: _angular_core.InputSignal<YuwColorDto | undefined>;
-    readonly selectedVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly selectedVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly size: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
-    readonly variant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly buttonClicked: _angular_core.OutputEmitterRef<YuwButtonGroupClickDto>;
     protected readonly _resolved: _angular_core.Signal<{
         interactive: boolean;
         template: _angular_core.TemplateRef<unknown> | undefined;
-        variant: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+        variant: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
         size: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
         color: YuwColorDto;
         transparent: boolean;
@@ -417,7 +603,7 @@ declare class YuwBadgeComponent {
     readonly color: _angular_core.InputSignal<YuwColorDto>;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly removeLabel: _angular_core.InputSignal<string | undefined>;
-    readonly variant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly variant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly removed: _angular_core.OutputEmitterRef<void>;
     protected readonly dotClass: _angular_core.Signal<"" | "size-4 p-0">;
     protected readonly removeClass: _angular_core.Signal<string>;
@@ -456,6 +642,33 @@ declare class YuwBreadcrumbComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwBreadcrumbComponent, "yuw-breadcrumb", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * A crumb declared in a route's `data.breadcrumb`. `labelKey` is an opaque key the consumer
+ * resolves; `label` is final text and wins over it. A crumb without `href` is plain text.
+ */
+interface YuwBreadcrumbCrumb {
+    readonly labelKey?: string;
+    readonly label?: string;
+    readonly href?: string;
+}
+/** Each route declares its full trail, so a page's breadcrumb reads in one place. */
+interface YuwBreadcrumbRouteData {
+    readonly breadcrumb: readonly YuwBreadcrumbCrumb[];
+}
+
+/**
+ * Deepest `data.breadcrumb` along the primary outlet, so a child route overrides its parent. The
+ * walk starts at `router.routerState.root` because, as a root service, this is built by whichever
+ * routed component asks first, whose own route is not the tree's root.
+ */
+declare class YuwBreadcrumbTrailService {
+    private readonly router;
+    readonly crumbs: _angular_core.Signal<readonly YuwBreadcrumbCrumb[]>;
+    private resolveDeepestTrail;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwBreadcrumbTrailService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<YuwBreadcrumbTrailService>;
+}
+
 /**
  * Sizes accepted by `<yuw-pagination>`'s `size` input. Mirrors the helm button sizes so the
  * public API doesn't leak the helm's `ButtonVariants` type.
@@ -503,132 +716,60 @@ type YuwPaginationRangeItem = number | 'ellipsis';
  */
 declare function getPaginationRange(page: number, totalPages: number): YuwPaginationRangeItem[];
 
-/**
- * A single entry in `<yuw-combobox>`'s `options` input.
- *
- * `label` is data the parent supplies, not a component-owned default — the same rule
- * `YuwSelectOptionDto` and `YuwBreadcrumbItemDto` follow. It doubles as the text the search
- * filters on and the text shown in the trigger/chip once selected, so it must be the
- * already-translated string.
- *
- * `data` carries whatever the consumer needs when rendering a custom item template
- * (`*yuwComboboxItem`) — an avatar URL, a count, a nested entity. The component itself never
- * reads it.
- */
-interface YuwComboboxOptionDto<TData = unknown> {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    data?: TData;
+/** Text of the page size selector and its range message. */
+interface YuwPageSizeLabels {
+    readonly label: string;
+    readonly empty: string;
+    readonly range: (range: YuwPageRange) => string;
+}
+/** Text of the standalone pagination footer. */
+interface YuwListPaginationLabels {
+    readonly pageSize: YuwPageSizeLabels;
+    readonly ariaLabel: string;
+    readonly previous: string;
+    readonly next: string;
+    readonly ellipsis: string;
 }
 
-/** The `let-` context of a `*yuwComboboxItem` template. `$implicit` is the option itself, so
- * `let-option` works; `selected` is passed alongside because an item that renders its own
- * markup loses the default check glyph and often needs to show that state some other way. */
-interface YuwComboboxItemContext<TData = unknown> {
-    $implicit: YuwComboboxOptionDto<TData>;
-    option: YuwComboboxOptionDto<TData>;
-    selected: boolean;
+/** Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot. */
+declare class YuwPageSizeComponent {
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly labels: _angular_core.InputSignal<YuwPageSizeLabels>;
+    readonly list: _angular_core.InputSignal<YuwPagedList<unknown>>;
+    protected readonly message: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPageSizeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPageSizeComponent, "yuw-page-size", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": true; "isSignal": true; }; "list": { "alias": "list"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-/**
- * Structural directive for custom option item templates in `yuw-combobox`.
- *
- * Exposes the option object (`let-option`) and selection state (`let-selected="selected"`).
- *
- * Usage:
- * ```html
- * <yuw-combobox [options]="users" [(value)]="userId">
- *   <ng-template yuwComboboxItem let-option let-selected="selected">
- *     <img [src]="option.data.avatar" /> {{ option.label }}
- *   </ng-template>
- * </yuw-combobox>
- * ```
- */
-declare class YuwComboboxItemDirective<TData = unknown> {
-    readonly templateRef: TemplateRef<YuwComboboxItemContext<TData>>;
-    readonly typeOf: _angular_core.InputSignal<YuwComboboxOptionDto<TData>[] | undefined>;
-    static ngTemplateContextGuard<TData>(_directive: YuwComboboxItemDirective<TData>, _context: unknown): _context is YuwComboboxItemContext<TData>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxItemDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwComboboxItemDirective<any>, "[yuwComboboxItem]", never, { "typeOf": { "alias": "yuwComboboxItemTypeOf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+
+/** Pagination footer for lists without a datatable. A disabled `fieldset` blocks its buttons. */
+declare class YuwListPaginationComponent {
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly labels: _angular_core.InputSignal<YuwListPaginationLabels>;
+    readonly list: _angular_core.InputSignal<YuwPagedList<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwListPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwListPaginationComponent, "yuw-list-pagination", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": true; "isSignal": true; }; "list": { "alias": "list"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type YuwComboboxValue = string | string[] | undefined;
 /**
- * Searchable select combobox component supporting single or multiple selections, search filtering, and custom option rendering.
- *
- * Inputs / Models:
- * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
- * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
- *   Emits `valueChange` on every selection change.
- * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
- *   `<yuw-button>` size of the same name. Applies to whichever control shape renders; the popover
- *   panel and its inner search field keep their own compact sizing.
- * - `multiple`: Enables multi-selection mode with removable tags/chips.
- * - `disabled`: Disables combobox interaction.
- * - `placeholder`: Placeholder text when no option is selected.
- * - `searchPlaceholder`: Placeholder text inside the search field popover.
- * - `emptyText`: Message text displayed when search yields no matching options.
- * - `search`: Two-way search filter query string.
- * - `triggerAriaLabel`: Required accessible name for the icon-only popover trigger (the chevron
- *   button). User-facing text — the consuming app is responsible for providing it translated.
- *   Only rendered by the single-select input shape, but required in every mode so switching
- *   modes never silently drops the label.
- * - `clearAriaLabel`: When set, the clear button is shown on the single-selection control and
- *   this is its accessible name; when absent, there is no clear button. One input, one source of
- *   truth. User-facing text — the consuming app is responsible for providing it translated.
- * - `inputId`: HTML `id` for the focusable control (the search input, or the trigger button when
- *   `readonlyTrigger` is set), enabling external `<label for="...">` association.
- * - `readonlyTrigger`: Renders control as a button showing selected label, placing search input inside popover.
- * - `invalid`: Forces invalid styling.
- *
- * `multiple` takes precedence over `readonlyTrigger`: when both are set the multi-select
- * chips shape renders and `readonlyTrigger` is ignored.
- *
- * Usage:
- * ```html
- * <yuw-combobox [options]="userOptions" [(value)]="selectedUser" placeholder="Select user..."
- *   triggerAriaLabel="Toggle options" clearAriaLabel="Clear selection" />
- * <yuw-combobox [options]="categoryOptions" [(value)]="selectedCategories" multiple
- *   triggerAriaLabel="Toggle options" />
- * ```
+ * Page title, optional description and up to two actions, each rendered when its label is set.
+ * On mobile the primary action shows only its icon, or `primaryMobileLabel`. Icons are `@ng-icons`
+ * names; the consumer registers any beyond `lucidePlus` with `provideIcons`.
  */
-declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase<YuwComboboxValue> {
-    private readonly _panel;
-    protected readonly itemTemplate: _angular_core.Signal<YuwComboboxItemDirective<TData> | undefined>;
-    readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
-    readonly emptyText: _angular_core.InputSignal<string | undefined>;
-    readonly inputId: _angular_core.InputSignal<string | undefined>;
-    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly options: _angular_core.InputSignal<YuwComboboxOptionDto<TData>[]>;
-    readonly placeholder: _angular_core.InputSignal<string | undefined>;
-    readonly readonlyTrigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly search: _angular_core.ModelSignal<string>;
-    readonly searchPlaceholder: _angular_core.InputSignal<string | undefined>;
-    readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
-    readonly triggerAriaLabel: _angular_core.InputSignal<string>;
-    readonly value: _angular_core.ModelSignal<YuwComboboxValue>;
-    protected readonly _focusSelectors: string[];
-    private readonly _generatedId;
-    protected readonly _itemToString: (value: string) => string;
-    protected readonly _chipsClass: _angular_core.Signal<string>;
-    protected readonly _clearVisible: _angular_core.Signal<boolean>;
-    protected readonly _controlId: _angular_core.Signal<string>;
-    protected readonly _fieldClass: _angular_core.Signal<string>;
-    private readonly _labelByValue;
-    protected readonly _multipleValue: _angular_core.Signal<string[]>;
-    protected readonly _selectedChips: _angular_core.Signal<{
-        value: string;
-        label: string;
-    }[]>;
-    protected readonly _selectedValues: _angular_core.Signal<Set<string>>;
-    protected readonly _singleValue: _angular_core.Signal<string | undefined>;
-    protected readonly _triggerClass: _angular_core.Signal<string>;
-    protected _emptyValue(): YuwComboboxValue;
-    protected _onFocusOut(event: FocusEvent): void;
-    protected onValueChange(next: YuwComboboxValue | null): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
+declare class YuwPageHeaderComponent {
+    readonly backLabel: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly primaryIcon: _angular_core.InputSignal<string | undefined>;
+    readonly primaryLabel: _angular_core.InputSignal<string | undefined>;
+    readonly primaryMobileLabel: _angular_core.InputSignal<string | undefined>;
+    readonly secondaryIcon: _angular_core.InputSignal<string | undefined>;
+    readonly secondaryLabel: _angular_core.InputSignal<string | undefined>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly backClicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly primaryClicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly secondaryClicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPageHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPageHeaderComponent, "yuw-page-header", never, { "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "primaryIcon": { "alias": "primaryIcon"; "required": false; "isSignal": true; }; "primaryLabel": { "alias": "primaryLabel"; "required": false; "isSignal": true; }; "primaryMobileLabel": { "alias": "primaryMobileLabel"; "required": false; "isSignal": true; }; "secondaryIcon": { "alias": "secondaryIcon"; "required": false; "isSignal": true; }; "secondaryLabel": { "alias": "secondaryLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; }, { "backClicked": "backClicked"; "primaryClicked": "primaryClicked"; "secondaryClicked": "secondaryClicked"; }, never, never, true, never>;
 }
 
 /**
@@ -1039,31 +1180,23 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
  * <yuw-input-otp formControlName="otpCode" [groupSizes]="[6]" mode="numeric" />
  * ```
  */
-declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
+declare class YuwInputOtpComponent extends YuwFieldBase {
     readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly groupSizes: _angular_core.InputSignal<readonly number[]>;
-    readonly helperText: _angular_core.InputSignal<string | undefined>;
-    readonly inputId: _angular_core.InputSignal<string | undefined>;
-    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly mode: _angular_core.InputSignal<YuwInputOtpModeDto>;
     readonly size: _angular_core.InputSignal<YuwFieldSizeDto>;
     readonly transformPaste: _angular_core.InputSignal<(pastedText: string, length: number) => string>;
-    readonly userClass: _angular_core.InputSignal<string>;
-    readonly value: _angular_core.ModelSignal<string>;
     readonly completed: _angular_core.OutputEmitterRef<string>;
     readonly enterPressed: _angular_core.OutputEmitterRef<void>;
     protected readonly _autoId: string;
     protected readonly _focusSelectors: string[];
     protected readonly _classes: _angular_core.Signal<string>;
     protected readonly _groups: _angular_core.Signal<yukit_web.YuwInputOtpGroupDto[]>;
-    protected readonly _inputId: _angular_core.Signal<string>;
     protected readonly _length: _angular_core.Signal<number>;
-    protected _emptyValue(): string;
     protected onEnterPressed(): void;
     protected onValueChange(next: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputOtpComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "enterPressed": "enterPressed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; }, { "completed": "completed"; "enterPressed": "enterPressed"; }, never, never, true, never>;
 }
 
 /**
@@ -1275,6 +1408,30 @@ declare class YuwSkeletonDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSkeletonDirective, "[yuwSkeleton]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.HlmSkeleton; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * Grid of projected cards, usually `yuw-card-grid-item`s in an `@for`. `loading` shows
+ * `skeletonCount` placeholders shaped by `skeletonClass`; `empty` shows `emptyText`; `columnsClass`
+ * holds the Tailwind column utilities.
+ */
+declare class YuwCardGridComponent {
+    readonly columnsClass: _angular_core.InputSignal<string>;
+    readonly empty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly skeletonClass: _angular_core.InputSignal<string>;
+    readonly skeletonCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    protected readonly skeletons: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwCardGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCardGridComponent, "yuw-card-grid", never, { "columnsClass": { "alias": "columnsClass"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonClass": { "alias": "skeletonClass"; "required": false; "isSignal": true; }; "skeletonCount": { "alias": "skeletonCount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** While `pending` the card stays hidden in place under a skeleton, so the grid does not jump. */
+declare class YuwCardGridItemComponent {
+    readonly pending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwCardGridItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCardGridItemComponent, "yuw-card-grid-item", never, { "pending": { "alias": "pending"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Container directive for card components.
  * Accepts optional `size` input (e.g. `'default'` or `'sm'`).
@@ -1716,6 +1873,74 @@ declare class YuwDatatablePaginationDirective {
 /** Every table part, for a consumer's `imports`. */
 declare const YuwTableImports: readonly [typeof YuwTableContainerDirective, typeof YuwTableDirective, typeof YuwTHeadDirective, typeof YuwTBodyDirective, typeof YuwTFootDirective, typeof YuwTrDirective, typeof YuwThDirective, typeof YuwTdDirective, typeof YuwCaptionDirective, typeof YuwDatatablePaginationDirective];
 
+interface YuwFilterOptionDto {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+/** `single` keeps one value, `multiple` a set; both render as checkboxes. */
+type YuwFilterGroupMode = 'single' | 'multiple';
+interface YuwFilterGroupDto {
+    readonly id: string;
+    readonly label: string;
+    readonly mode: YuwFilterGroupMode;
+    readonly options: readonly YuwFilterOptionDto[];
+}
+/** Selection keyed by `YuwFilterGroupDto.id`: a string for `single` groups, an array for `multiple`. */
+type YuwFilterSelection = Readonly<Record<string, string | readonly string[]>>;
+interface YuwListToolbarFilterLabels {
+    readonly title: string;
+    readonly clearAll: string;
+    readonly close: string;
+    readonly apply: string;
+    readonly clear: string;
+    readonly pending: string;
+    readonly selected: (count: number) => string;
+}
+interface YuwListToolbarSearchLabels {
+    readonly expand: string;
+    readonly clear: string;
+}
+interface YuwListToolbarColumnsLabels {
+    readonly trigger: string;
+    readonly placeholder: string;
+    readonly empty: string;
+    readonly toggle: string;
+}
+/** Every text the toolbar prints; the consumer translates them. */
+interface YuwListToolbarLabels {
+    readonly filters: YuwListToolbarFilterLabels;
+    readonly search: YuwListToolbarSearchLabels;
+    readonly columns: YuwListToolbarColumnsLabels;
+    readonly export: string;
+}
+
+/**
+ * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
+ * trailing one, and projected content after them.
+ *
+ * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
+ * `showExport`, `hideableColumns`. `labels` holds every text and the consumer translates it;
+ * `idleColor` is the filter trigger tone while nothing is applied.
+ */
+declare class YuwListToolbarComponent {
+    readonly filterGroups: _angular_core.InputSignal<readonly YuwFilterGroupDto[] | undefined>;
+    readonly filtersDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hideableColumns: _angular_core.InputSignal<YuwComboboxOptionDto<unknown>[] | undefined>;
+    readonly idleColor: _angular_core.InputSignal<YuwColorDto>;
+    readonly labels: _angular_core.InputSignal<YuwListToolbarLabels>;
+    readonly search: _angular_core.ModelSignal<string>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly selection: _angular_core.ModelSignal<Readonly<Record<string, string | readonly string[]>>>;
+    readonly showExport: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly exported: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly hiddenColumnsChange: _angular_core.OutputEmitterRef<YuwComboboxValue[]>;
+    readonly searched: _angular_core.OutputEmitterRef<string>;
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwListToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwListToolbarComponent, "yuw-list-toolbar", never, { "filterGroups": { "alias": "filterGroups"; "required": false; "isSignal": true; }; "filtersDisabled": { "alias": "filtersDisabled"; "required": false; "isSignal": true; }; "hideableColumns": { "alias": "hideableColumns"; "required": false; "isSignal": true; }; "idleColor": { "alias": "idleColor"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": true; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; "selection": "selectionChange"; "exported": "exported"; "hiddenColumnsChange": "hiddenColumnsChange"; "searched": "searched"; }, never, ["*"], true, never>;
+}
+
 type YuwDatatableAlign = 'start' | 'center' | 'end';
 /**
  * Default floor for a column that opts into `meta.wrap`, as a Tailwind `min-w-*` class.
@@ -2006,6 +2231,22 @@ declare class YuwDatatableRowSelect {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableRowSelect, "yuw-datatable-row-select", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onToggle": { "alias": "onToggle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Gear button cell that runs `onEdit`, an input because `flexRenderComponent` does not subscribe
+ * outputs. The host stops the click so a clickable row does not fire twice.
+ */
+declare class YuwActionsCellComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly onEdit: _angular_core.InputSignal<() => void>;
+    protected edit(): void;
+    protected onHostClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwActionsCellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwActionsCellComponent, "yuw-actions-cell", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "onEdit": { "alias": "onEdit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Headerless `actions` column; `label` is the button's accessible name, already translated. */
+declare function buildYuwActionsColumn<Row extends RowData>(label: string, onEdit: (row: Row) => void, cellClass?: string): YuwDatatableColumnDef<Row>;
+
 /** A single entry in `<yuw-avatar>`'s `group` input, which turns it into a stack of overlapping avatars. */
 interface YuwAvatarGroupItemDto {
     alt: string;
@@ -2204,7 +2445,7 @@ declare class YuwSheetComponent {
     readonly side: _angular_core.InputSignal<YuwSheetSideDto>;
     readonly title: _angular_core.InputSignal<string | undefined>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     protected readonly _sheetState: _angular_core.Signal<"open" | "closed">;
     constructor();
     protected onStateChanged(state: 'open' | 'closed'): void;
@@ -2278,7 +2519,7 @@ declare class YuwPopoverComponent {
     readonly triggerColor: _angular_core.InputSignal<YuwColorDto>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly triggerTransparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly triggerVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     protected readonly _popoverState: _angular_core.Signal<"open" | "closed">;
     protected onOpenChange(state: 'open' | 'closed'): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPopoverComponent, never>;
@@ -2531,7 +2772,7 @@ declare class YuwDialogComponent {
     readonly title: _angular_core.InputSignal<string | undefined>;
     readonly triggerColor: _angular_core.InputSignal<YuwColorDto>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     protected readonly _dialogState: _angular_core.Signal<"open" | "closed">;
     protected onStateChanged(state: 'open' | 'closed'): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDialogComponent, never>;
@@ -2609,14 +2850,14 @@ declare class YuwAlertDialogComponent {
     protected readonly hasMedia: _angular_core.Signal<YuwAlertDialogMediaDirective | undefined>;
     readonly cancelLabel: _angular_core.InputSignal<string>;
     readonly confirmLabel: _angular_core.InputSignal<string>;
-    readonly confirmVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly confirmVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly showTrigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignal<YuwAlertDialogSizeDto>;
     readonly title: _angular_core.InputSignal<string>;
     readonly triggerSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
-    readonly triggerVariant: _angular_core.InputSignal<"default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
+    readonly triggerVariant: _angular_core.InputSignal<"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined>;
     readonly cancelled: _angular_core.OutputEmitterRef<void>;
     readonly confirmed: _angular_core.OutputEmitterRef<void>;
     protected readonly _dialogState: _angular_core.Signal<"open" | "closed">;
@@ -3616,5 +3857,5 @@ declare class YuwCommandDialogComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCommandDialogComponent, "yuw-command-dialog", never, { "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; }, { "open": "openChange"; "search": "searchChange"; "commandSelected": "commandSelected"; }, never, never, true, never>;
 }
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
-export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwCommandGroupDto, YuwCommandItemDto, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatatableRowClass, YuwDatepickerModeDto, YuwDatepickerValue, YuwFieldSizeDto, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetScrollStrategyDto, YuwSheetSideDto, YuwSidebarAvatarDto, YuwSidebarCollapsibleDto, YuwSidebarContentDto, YuwSidebarGroupDto, YuwSidebarItemClickDto, YuwSidebarItemDto, YuwSidebarSideDto, YuwSidebarSubItemDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbCrumb, YuwBreadcrumbItemDto, YuwBreadcrumbRouteData, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwCommandGroupDto, YuwCommandItemDto, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatatableRowClass, YuwDatepickerModeDto, YuwDatepickerValue, YuwFieldSizeDto, YuwFilterGroupDto, YuwFilterGroupMode, YuwFilterOptionDto, YuwFilterSelection, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwListPaginationLabels, YuwListToolbarColumnsLabels, YuwListToolbarFilterLabels, YuwListToolbarLabels, YuwListToolbarSearchLabels, YuwPageQuery, YuwPageRange, YuwPageSizeLabels, YuwPageSort, YuwPagedList, YuwPagedListOptions, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetScrollStrategyDto, YuwSheetSideDto, YuwSidebarAvatarDto, YuwSidebarCollapsibleDto, YuwSidebarContentDto, YuwSidebarGroupDto, YuwSidebarItemClickDto, YuwSidebarItemDto, YuwSidebarSideDto, YuwSidebarSubItemDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };