yukit-web 0.0.2 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": {
     "name": "Yurest Solutions",
     "email": "develop@yurest.com"

package/src/lib/theme/tokens/color.css

@@ -180,8 +180,8 @@
   --sidebar-foreground: var(--neutrals-element-high);
   --sidebar-primary: var(--accent-primary);
   --sidebar-primary-foreground: var(--neutrals-white);
-  --sidebar-accent: var(--neutrals-overlay-accent);
-  --sidebar-accent-foreground: var(--neutrals-element-high);
+  --sidebar-accent: #FFECEC;
+  --sidebar-accent-foreground: #F95A5C;
   --sidebar-border: var(--neutrals-outline);
   --sidebar-ring: var(--accent-primary);
 
@@ -202,6 +202,10 @@
 .dark {
   color-scheme: dark;
   --neutrals-element-high-gradient-hover: linear-gradient(to bottom, var(--neutrals-element-high-gradient-start-hover) 50%, var(--neutrals-white) 100%);
+  
+  /** || Sidebar ||  */
+  --sidebar-accent: #3A1F22;
+  --sidebar-accent-foreground: #FF7A7C;
 
   /** || Accent || */
   --accent-primary-darker-ext: oklch(0.27 0.145 281.565);

package/types/yukit-web.d.ts

@@ -15,6 +15,7 @@ import * as i2 from 'yukit-web/helm/dropdown-menu';
 import * as i1$5 from 'yukit-web/helm/table';
 import * as _tanstack_angular_table from '@tanstack/angular-table';
 import { columnFilteringFeature, columnVisibilityFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnVisibilityState, RowSelectionState, PaginationState } from '@tanstack/table-core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as i1$6 from 'yukit-web/helm/item';
 import { HlmItemSeparator } from 'yukit-web/helm/item';
 import * as i1$7 from '@spartan-ng/brain/sheet';
@@ -115,6 +116,7 @@ type YuwColorDto = 'primary' | 'secondary' | 'destructive' | 'success' | 'warnin
 interface YuwButtonGroupItemDto {
     id: string;
     label: string;
+    kind?: 'button';
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     color?: YuwColorDto;
@@ -126,6 +128,31 @@ interface YuwButtonGroupItemDto {
     yuwDropdownMenuTrigger?: TemplateRef<unknown> | undefined;
     transparent?: boolean;
 }
+/**
+ * A static, non-interactive segment welded into the same row as the buttons — a leading caption, a
+ * trailing unit, a checkbox that applies to the whole group.
+ *
+ * A separate type rather than optional fields on `YuwButtonGroupItemDto`: a text segment honors none
+ * of that interface's button surface, and merging them would hand consumers fields that silently do
+ * nothing on half the entries.
+ *
+ * `label` renders as-is. For content a string can't express (a `yuw-checkbox`, custom markup),
+ * declare an `<ng-template yuwButtonGroupText="<id>">` whose id matches this entry; the template
+ * wins over `label` when both are present.
+ */
+interface YuwButtonGroupTextDto {
+    id: string;
+    kind: 'text';
+    label?: string;
+}
+/**
+ * What `<yuw-button>`'s `buttons` input accepts: buttons, text segments, in whatever order the
+ * consumer lists them.
+ *
+ * `kind` is optional on the button variant, so existing `{id, label}` arrays keep working: an entry
+ * without `kind` is a button.
+ */
+type YuwButtonGroupEntryDto = YuwButtonGroupItemDto | YuwButtonGroupTextDto;
 /** What `<yuw-button>` emits from `buttonClicked` in the group form. */
 interface YuwButtonGroupClickDto {
     id: string;
@@ -147,7 +174,9 @@ interface YuwButtonGroupClickDto {
  * - `class`: Extra CSS classes merged onto the inner button/anchor (single and link mode); merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
- * - `buttons`: Array of button items (`YuwButtonGroupItemDto[]`) to render as a welded button group.
+ * - `buttons`: Array of group entries (`YuwButtonGroupEntryDto[]`) to render as a welded button group.
+ *   A `kind: 'text'` entry renders a static, non-interactive segment instead of a button; give it an
+ *   `<ng-template yuwButtonGroupText="<id>">` to fill it with markup rather than a plain `label`.
  * - `orientation`: Group layout orientation (`'horizontal'` or `'vertical'`). Default is `'horizontal'`.
  * - `groupAriaLabel`: Accessible name for button group container.
  *
@@ -170,9 +199,16 @@ interface YuwButtonGroupClickDto {
  * Button Group Usage:
  * ```html
  * <yuw-button [buttons]="actionList" (buttonClicked)="onAction($event)" />
+ *
+ * <yuw-button [buttons]="[{id: 'caption', kind: 'text', label: 'Sort by'}, ...sortActions]">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
  * ```
  */
 declare class YuwButtonComponent {
+    private readonly _host;
     readonly variant: _angular_core.InputSignal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
     readonly size: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
     readonly color: _angular_core.InputSignal<YuwColorDto>;
@@ -183,21 +219,34 @@ declare class YuwButtonComponent {
     readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly yuwDropdownMenuTrigger: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
-    readonly buttons: _angular_core.InputSignal<YuwButtonGroupItemDto[] | undefined>;
+    readonly buttons: _angular_core.InputSignal<YuwButtonGroupEntryDto[] | undefined>;
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly groupAriaLabel: _angular_core.InputSignal<string | undefined>;
-    /**
-     * Consumer CSS classes for the inner button/anchor (single and link mode). Merged last with
-     * `cn`, so they win over the component's own variant/transparent classes.
-     */
+    readonly animationDisabled: _angular_core.InputSignal<boolean>;
     readonly userClass: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly buttonClicked: _angular_core.OutputEmitterRef<YuwButtonGroupClickDto>;
+    protected readonly _textClass = "bg-transparent text-foreground border-border dark:border-input";
     protected readonly _isGroup: _angular_core.Signal<boolean>;
+    protected readonly _animationDisabled: _angular_core.Signal<boolean>;
     protected readonly _effectiveVariant: _angular_core.Signal<"secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined>;
     /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
     protected readonly _btnClass: _angular_core.Signal<string>;
-    protected readonly _resolved: _angular_core.Signal<{
+    private readonly _texts;
+    /**
+     * The group's entries, each carrying everything its branch of the template needs.
+     *
+     * A text entry has no variant/size/color to fall back to, so it takes its own path rather than
+     * being run through the button resolver, which would invent fields its DTO doesn't declare. Its
+     * content template is looked up through a `Map` rather than a per-entry `.find()`, which would
+     * make an n-entry group cost n² comparisons.
+     */
+    protected readonly _resolved: _angular_core.Signal<({
+        template: TemplateRef<unknown> | undefined;
+        id: string;
+        kind: "text";
+        label?: string;
+    } | {
         variant: "secondary" | "destructive" | "default" | "outline" | "ghost" | "link" | null | undefined;
         size: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
         color: YuwColorDto;
@@ -206,16 +255,42 @@ declare class YuwButtonComponent {
         class: string;
         id: string;
         label: string;
+        kind?: "button";
         href?: string;
         target?: string;
         ariaLabel?: string;
         yuwDropdownMenuTrigger?: TemplateRef<unknown> | undefined;
         transparent?: boolean;
-    }[]>;
+    })[]>;
     protected onClick(event: MouseEvent): void;
     protected onGroupClick(button: YuwButtonGroupItemDto, event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwButtonComponent, "yuw-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "yuwDropdownMenuTrigger": { "alias": "yuwDropdownMenuTrigger"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupAriaLabel": { "alias": "groupAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, never, ["[yuwButtonIcon]", "*", "[yuwButtonIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwButtonComponent, "yuw-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "yuwDropdownMenuTrigger": { "alias": "yuwDropdownMenuTrigger"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupAriaLabel": { "alias": "groupAriaLabel"; "required": false; "isSignal": true; }; "animationDisabled": { "alias": "animationDisabled"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, ["_texts"], ["[yuwButtonIcon]", "*", "[yuwButtonIcon]", "*"], true, never>;
+}
+
+/**
+ * Declares the content of a single text segment inside `<yuw-button>`'s button group. Apply it to
+ * an `<ng-template>` and pass the id of the `kind: 'text'` entry it belongs to, matching an entry
+ * in the `buttons` input.
+ *
+ * Exists because a text segment often isn't text — a checkbox, a badge, an icon with a count — and a
+ * component cannot travel through a data array. An entry whose id has no matching template falls
+ * back to its `label`, so the plain-string case needs no template at all.
+ *
+ * Usage:
+ * ```html
+ * <yuw-button [buttons]="entries">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
+ * ```
+ */
+declare class YuwButtonGroupTextDirective {
+    readonly entryId: _angular_core.InputSignal<string>;
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwButtonGroupTextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwButtonGroupTextDirective, "ng-template[yuwButtonGroupText]", never, { "entryId": { "alias": "yuwButtonGroupText"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -650,7 +725,15 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
 }
 
 /**
- * Search input control featuring a leading search icon, optional clear button, and form integration (`ngModel`, `formControlName`).
+ * Edge a collapsible `yuw-search-input` stays anchored to while the opposite edge travels.
+ *
+ * `'right'` keeps the right edge fixed so the field grows leftwards; `'left'` mirrors it.
+ */
+type YuwSearchInputCollapseFromDto = 'left' | 'right';
+
+/**
+ * Search input control featuring a leading search icon, optional clear button, an optional
+ * collapsible mode, and form integration (`ngModel`, `formControlName`).
  *
  * Inputs / Models:
  * - `value`: Two-way search query string.
@@ -663,6 +746,16 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `placeholder`: Hint text shown inside the empty field.
  * - `clearAriaLabel`: Accessible name for the clear button. Supplying it enables the clear button; omit to hide it.
+ * - `collapseFrom`: Enables collapsible mode and picks the anchored edge — `'right'` collapses back
+ *   towards the right edge (the field grows leftwards), `'left'` mirrors it. Omit for a field that
+ *   is always expanded.
+ * - `expandAriaLabel`: Accessible name for the collapsed search button. Required to make collapsible
+ *   mode usable, since the collapsed control has no visible text — user-facing text the consuming
+ *   app is responsible for translating.
+ * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
+ *   Collapsible mode only.
+ * - `transparent`: Removes the field's resting border and background so it sits directly on its
+ *   container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -670,9 +763,26 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
  * - `committed`: Emits the current query string when the user presses Enter — for searches that
  *   hit a server on explicit submit rather than on every keystroke.
  *
+ * ## Collapsible mode
+ *
+ * Collapsed, the control is a square icon button; activating it animates the same element out to its
+ * expanded width and focuses the field. It collapses again on Escape, or on blur while the query is
+ * empty — a blur with text still in the field keeps the field open, because collapsing would hide a
+ * query the user can no longer see or edit.
+ *
+ * Button and field are one element tree rather than two swapped views, so the transition is
+ * continuous and the input is never re-created mid-animation (which would drop focus and the caret).
+ *
  * Usage:
  * ```html
  * <yuw-search-input [(value)]="query" placeholder="Search items..." clearAriaLabel="Clear search" (searched)="onSearch($event)" />
+ *
+ * <yuw-search-input
+ *   [(value)]="query"
+ *   collapseFrom="right"
+ *  *   expandAriaLabel="Open search"
+ *   placeholder="Search items..."
+ * />
  * ```
  */
 declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> implements YuwTextFieldContract {
@@ -686,21 +796,51 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly collapseFrom: _angular_core.InputSignal<YuwSearchInputCollapseFromDto | undefined>;
+    readonly expandedWidth: _angular_core.InputSignal<string>;
+    readonly expandAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
+    private readonly _open;
+    protected readonly _autoId: string;
+    private readonly _input;
+    private readonly _injector;
     readonly searched: _angular_core.OutputEmitterRef<string>;
     readonly committed: _angular_core.OutputEmitterRef<string>;
-    protected readonly _autoId: string;
     protected readonly _inputId: _angular_core.Signal<string>;
     protected readonly _classes: _angular_core.Signal<string>;
     protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _collapsible: _angular_core.Signal<boolean>;
+    protected readonly _expanded: _angular_core.Signal<boolean>;
+    protected readonly _wrapperClasses: _angular_core.Signal<string>;
+    protected readonly _wrapperMaxWidth: _angular_core.Signal<string | null>;
+    protected readonly _iconClasses: _angular_core.Signal<string>;
+    protected readonly _fieldClasses: _angular_core.Signal<string>;
+    protected readonly _showExpandButton: _angular_core.Signal<boolean>;
     protected readonly _showClear: _angular_core.Signal<boolean>;
-    private readonly _input;
     protected _emptyValue(): string;
     protected onInput(event: Event): void;
     protected onEnter(): void;
     protected onClear(): void;
+    /**
+     * Focus is deferred to the next render: while collapsed the input carries `tabindex="-1"` and
+     * `aria-hidden`, and focusing it before those bindings clear would be dropped by the browser.
+     */
+    protected onExpand(): void;
+    /**
+     * Expands when the collapsed button receives focus, so reaching it with Tab opens the field
+     * instead of leaving the user on a button they must also activate.
+     *
+     * Gated on `:focus-visible` to stay out of a focus loop: collapsing on blur remounts this button,
+     * and if the browser then lands focus on it, an ungated handler would re-expand and the control
+     * could never be tabbed past. `:focus-visible` is set for keyboard traversal but not for the
+     * programmatic/pointer focus that a collapse produces.
+     */
+    protected onExpandFocus(event: FocusEvent): void;
+    protected onEscape(): void;
+    protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSearchInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "committed": "committed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "committed": "committed"; }, never, never, true, never>;
 }
 
 /**
@@ -1464,6 +1604,37 @@ declare class YuwCaptionDirective {
 /** 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];
 
+type YuwDatatableAlign = 'start' | 'center' | 'end';
+/**
+ * Class maps for `yuw-datatable`, layered on top of the Hlm table directives' own classes.
+ *
+ * `DATATABLE_ALIGN_CLASS` is keyed by a column's `meta.align` and shared by header and body cells,
+ * so a column declares its alignment once and both honour it; `start` maps to an empty string
+ * rather than re-stating what `HlmTh`/`HlmTd` already apply.
+ *
+ * The `appearance` maps are split per element because the treatment is not uniform: `card` frames
+ * the container so the header tint clips to the radius instead of squaring off against a
+ * consumer's wrapper, then drops the header's bottom border, since a rule underneath a filled
+ * strip reads as a seam. `default` resolves to an empty string throughout, leaving a table that
+ * does not opt in byte-identical to what the Hlm directives render alone.
+ */
+declare const DATATABLE_ALIGN_CLASS: Record<YuwDatatableAlign, string>;
+declare const datatableContainerVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableHeadVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableHeaderCellVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableCellVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const datatableRowVariants: (props?: ({
+    appearance?: "default" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
 /**
  * The feature set `yuw-datatable` enables.
  *
@@ -1474,14 +1645,28 @@ declare const YuwTableImports: readonly [typeof YuwTableContainerDirective, type
  * (`getState`, `getCanNextPage`, …) missing from the instance type.
  */
 interface YuwDatatableFeatures {
+    columnMeta: YuwDatatableColumnMeta;
     columnFilteringFeature: typeof columnFilteringFeature;
     columnVisibilityFeature: typeof columnVisibilityFeature;
     rowPaginationFeature: typeof rowPaginationFeature;
     rowSelectionFeature: typeof rowSelectionFeature;
     rowSortingFeature: typeof rowSortingFeature;
 }
+/**
+ * Per-column options `yuw-datatable` reads off TanStack's `meta`, where `align` sets the
+ * horizontal alignment of that column's header and body cells and defaults to `'start'`.
+ *
+ * TanStack resolves `columnDef.meta` from a feature set's own `columnMeta` slot when it declares
+ * one, falling back to its global declaration-merged `ColumnMeta` otherwise. Declaring the slot on
+ * `YuwDatatableFeatures` is what constrains our columns to this shape — without it, `meta` is the
+ * empty global interface, which accepts any object and would catch no typo.
+ */
+interface YuwDatatableColumnMeta {
+    align?: YuwDatatableAlign;
+}
 declare const YUW_DATATABLE_FEATURES: YuwDatatableFeatures;
 type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatures, TData>;
+type YuwDatatableAppearanceDto = 'default' | 'card';
 /**
  * Full-featured data table component supporting sorting, filtering, pagination, row selection,
  * loading skeleton state, and column visibility.
@@ -1504,10 +1689,23 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   User-facing text the consuming app is responsible for translating.
  * - `nextPageLabel` (required): Accessible name for the footer's next-page button. User-facing
  *   text the consuming app is responsible for translating.
+ * - `paginationEllipsisSrText` (required): Screen-reader text for the pagination ellipsis.
+ *   User-facing text the consuming app is responsible for translating.
+ * - `paginationAriaLabel` (required): Accessible name for the pagination navigation landmark.
+ *   User-facing text the consuming app is responsible for translating.
  * - `caption`: Optional `<caption>` text for the table. User-facing text the consuming app is
  *   responsible for translating; when absent, no caption is rendered.
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
  *   `display: contents`, so a plain `class` on `<yuw-datatable>` would never reach the table.
+ * - `appearance`: Visual treatment (`YuwDatatableAppearanceDto`). Default is `'default'` —
+ *   Spartan's plain table. `'card'` frames the table in its own rounded bordered surface with a
+ *   tinted uppercase header strip and taller rows; the consumer needs no wrapper of its own.
+ *
+ * Per-column, through TanStack's `meta`:
+ * - `meta.align`: `'start' | 'center' | 'end'`, applied to both the header and body cells of that
+ *   column. Default is `'start'`. Alignment and the appearance's own cell classes are resolved
+ *   once into a per-column-id lookup rather than in the template, because a template method would
+ *   re-run the class merge for every cell on every change-detection pass.
  * - `sorting`: Two-way sorting state (`SortingState`).
  * - `columnFilters`: Two-way column filters state (`ColumnFiltersState`).
  * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
@@ -1524,6 +1722,7 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   [columns]="columns"
  *   [data]="users"
  *   [(sorting)]="sorting"
+ *   appearance="card"
  *   paginated
  *   selectable
  *   previousPageLabel="Página anterior"
@@ -1531,6 +1730,13 @@ type YuwDatatableColumnDef<TData extends RowData> = ColumnDef<YuwDatatableFeatur
  *   (selectedRowsChange)="onSelect($event)"
  * />
  * ```
+ *
+ * ```ts
+ * const columns: YuwDatatableColumnDef<Client>[] = [
+ *   { accessorKey: 'name', header: 'Nombre' },
+ *   { accessorKey: 'cif', header: 'CIF', meta: { align: 'center' } },
+ * ];
+ * ```
  */
 declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly columns: _angular_core.InputSignal<YuwDatatableColumnDef<TData>[]>;
@@ -1543,13 +1749,19 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly loadingRows: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly previousPageLabel: _angular_core.InputSignal<string>;
     readonly nextPageLabel: _angular_core.InputSignal<string>;
+    readonly paginationEllipsisSrText: _angular_core.InputSignal<string>;
+    readonly paginationAriaLabel: _angular_core.InputSignal<string>;
     readonly caption: _angular_core.InputSignal<string | undefined>;
     readonly tableClass: _angular_core.InputSignal<string | undefined>;
+    readonly appearance: _angular_core.InputSignal<YuwDatatableAppearanceDto>;
     readonly sorting: _angular_core.ModelSignal<SortingState>;
     readonly columnFilters: _angular_core.ModelSignal<ColumnFiltersState>;
     readonly columnVisibility: _angular_core.ModelSignal<ColumnVisibilityState>;
     readonly rowSelection: _angular_core.ModelSignal<RowSelectionState>;
     readonly pagination: _angular_core.ModelSignal<PaginationState>;
+    protected readonly currentPage: _angular_core.WritableSignal<number>;
+    /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
+    protected onPageChange(page: number): void;
     private readonly _options;
     protected readonly table: _tanstack_angular_table.AngularTable<YuwDatatableFeatures, TData>;
     private readonly _selectedRows;
@@ -1573,9 +1785,17 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     protected readonly _columnCount: _angular_core.Signal<number>;
     protected readonly _skeletonRows: _angular_core.Signal<number[]>;
     protected readonly _tableClass: _angular_core.Signal<string>;
+    protected readonly _containerClass: _angular_core.Signal<string>;
+    protected readonly _headClass: _angular_core.Signal<string>;
+    protected readonly _rowClass: _angular_core.Signal<string>;
+    protected readonly _cellClasses: _angular_core.Signal<Map<string, {
+        readonly header: string;
+        readonly cell: string;
+    }>>;
     protected readonly _ariaSort: Record<'asc' | 'desc', 'ascending' | 'descending'>;
+    protected readonly _sortIcon: Record<'asc' | 'desc' | 'none', string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDatatableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "sorting": "sortingChange"; "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "rowSelection": "rowSelectionChange"; "pagination": "paginationChange"; "selectedRowsChange": "selectedRowsChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "paginationEllipsisSrText": { "alias": "paginationEllipsisSrText"; "required": true; "isSignal": true; }; "paginationAriaLabel": { "alias": "paginationAriaLabel"; "required": true; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "sorting": "sortingChange"; "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "rowSelection": "rowSelectionChange"; "pagination": "paginationChange"; "selectedRowsChange": "selectedRowsChange"; }, never, never, true, never>;
 }
 
 /** A single entry in `<yuw-avatar>`'s `group` input, which turns it into a stack of overlapping avatars. */
@@ -2508,5 +2728,5 @@ declare class YuwSidebarInsetDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwSidebarInsetDirective, "main[yuwSidebarInset]", never, {}, {}, never, never, true, [{ directive: typeof i1$d.HlmSidebarInset; inputs: {}; outputs: {}; }]>;
 }
 
-export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, 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, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, 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, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
-export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableColumnDef, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarSideDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };
+export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, 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, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, 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, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbItemDto, YuwButtonGroupClickDto, YuwButtonGroupEntryDto, YuwButtonGroupItemDto, YuwButtonGroupTextDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxValue, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatepickerModeDto, YuwDatepickerValue, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetSideDto, YuwSidebarCollapsibleDto, YuwSidebarSideDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto };