yukit-web 0.0.2 → 0.0.3

package/fesm2022/yukit-web.mjs

@@ -1,10 +1,11 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, model, inject, TemplateRef, contentChild, viewChild, ElementRef, contentChildren, effect, numberAttribute } from '@angular/core';
+import { forwardRef, signal, Directive, input, inject, TemplateRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, ElementRef, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
-import { HlmButtonGroup } from 'yukit-web/helm/button-group';
+import { HlmButtonGroup, HlmButtonGroupText } from 'yukit-web/helm/button-group';
 import * as i2 from 'yukit-web/helm/dropdown-menu';
 import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
 import { cva } from 'class-variance-authority';
@@ -15,7 +16,6 @@ import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$1 from 'yukit-web/helm/breadcrumb';
 import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
 import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
@@ -169,6 +169,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{}]
         }] });
 
+/**
+ * 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>
+ * ```
+ */
+class YuwButtonGroupTextDirective {
+    constructor() {
+        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwButtonGroupText' });
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonGroupTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwButtonGroupTextDirective, isStandalone: true, selector: "ng-template[yuwButtonGroupText]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwButtonGroupText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonGroupTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwButtonGroupText]',
+                }]
+        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwButtonGroupText", required: true }] }] } });
+
 /**
  * yukit-web's own class layer for `<yuw-button>`, applied on top of the helm `buttonVariants()`
  * output. The result lands on the `[class]` binding of the inner `[hlmBtn]` element; the helm
@@ -192,6 +225,16 @@ const yuwButtonVariants = cva('', {
             destructive: '',
             link: '',
         },
+        size: {
+            default: 'h-10',
+            xs: "h-7",
+            sm: "h-9",
+            lg: 'h-11',
+            icon: 'size-10',
+            'icon-xs': "size-7",
+            'icon-sm': 'size-9',
+            'icon-lg': 'size-11',
+        },
         /**
          * Strips every background/border the helm variants set, covering each modifier stack they
          * use (`hover:`, `aria-expanded:`, `dark:`, `dark:hover:`, `[a]:hover:`) so `twMerge` drops
@@ -209,6 +252,7 @@ const yuwButtonVariants = cva('', {
         transparent: false,
     },
 });
+const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
 
 /**
  * Button component supporting single action button or grouped button options.
@@ -225,7 +269,9 @@ const yuwButtonVariants = cva('', {
  * - `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.
  *
@@ -248,6 +294,12 @@ const yuwButtonVariants = cva('', {
  * 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>
  * ```
  */
 class YuwButtonComponent {
@@ -272,23 +324,39 @@ class YuwButtonComponent {
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.clicked = output();
         this.buttonClicked = output();
+        this._textClass = yuwButtonGroupTextClass;
         this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
         this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
         /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
-        this._btnClass = computed(() => cn(yuwButtonVariants({ variant: this._effectiveVariant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
-        this._resolved = computed(() => (this.buttons() ?? []).map((button) => {
-            const transparent = button.transparent ?? false;
-            const variant = transparent ? 'ghost' : (button.variant ?? this.variant());
-            return {
-                ...button,
-                variant,
-                size: button.size ?? this.size(),
-                color: button.color ?? this.color(),
-                disabled: button.disabled ?? false,
-                type: button.type ?? 'button',
-                class: yuwButtonVariants({ variant, transparent }),
-            };
-        }), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        this._btnClass = computed(() => cn(yuwButtonVariants({ size: this.size(), variant: this._effectiveVariant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
+        this._texts = contentChildren(YuwButtonGroupTextDirective, ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this._resolved = computed(() => {
+            const templates = new Map(this._texts().map((text) => [text.entryId(), text.templateRef]));
+            return (this.buttons() ?? []).map((entry) => {
+                if (entry.kind === 'text') {
+                    return { ...entry, template: templates.get(entry.id) };
+                }
+                const transparent = entry.transparent ?? false;
+                const variant = transparent ? 'ghost' : (entry.variant ?? this.variant());
+                return {
+                    ...entry,
+                    variant,
+                    size: entry.size ?? this.size(),
+                    color: entry.color ?? this.color(),
+                    disabled: entry.disabled ?? false,
+                    type: entry.type ?? 'button',
+                    class: yuwButtonVariants({ variant, transparent }),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     }
     onClick(event) {
         if (this.disabled()) {
@@ -303,16 +371,16 @@ class YuwButtonComponent {
         this.buttonClicked.emit({ id: button.id, event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" }, classAttribute: "inline-flex" }, ngImport: i0, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" }, classAttribute: "inline-flex" }, queries: [{ propertyName: "_texts", predicate: YuwButtonGroupTextDirective, isSignal: true }], ngImport: i0, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.kind === 'text') {\n        <hlm-button-group-text [class]=\"_textClass\">\n          @if (button.template) {\n            <ng-container [ngTemplateOutlet]=\"button.template\"/>\n          } @else {\n            {{ button.label }}\n          }\n        </hlm-button-group-text>\n\n      } @else if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmButtonGroupText, selector: "[hlmButtonGroupText],hlm-button-group-text" }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-button', imports: [HlmButton, HlmButtonGroup, HlmDropdownMenuTrigger], host: {
+            args: [{ selector: 'yuw-button', imports: [NgTemplateOutlet, HlmButton, HlmButtonGroup, HlmButtonGroupText, HlmDropdownMenuTrigger], host: {
                         class: 'inline-flex',
                         '[class.cursor-not-allowed]': 'disabled()',
                         '[attr.data-yuw-color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n" }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.kind === 'text') {\n        <hlm-button-group-text [class]=\"_textClass\">\n          @if (button.template) {\n            <ng-container [ngTemplateOutlet]=\"button.template\"/>\n          } @else {\n            {{ button.label }}\n          }\n        </hlm-button-group-text>\n\n      } @else if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], _texts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupTextDirective), { isSignal: true }] }] } });
 
 /** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
 const REMOVE_TEXT_CLASS = {
@@ -385,11 +453,11 @@ class YuwBreadcrumbComponent {
         this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n" }]
+            args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
 
 /**
@@ -887,10 +955,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n  @if (_hasLeftAddon()) {\n  <hlm-input-group-addon align=\"block-start\">\n    <ng-content select=\"yuw-left-addon\" />\n  </hlm-input-group-addon>\n  }\n\n  <textarea hlmInputGroupTextarea [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\"\n    [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\" [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\" (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n\n  @if (_hasRightAddon()) {\n  <hlm-input-group-addon align=\"block-end\">\n    <ng-content select=\"yuw-right-addon\" />\n  </hlm-input-group-addon>\n  }\n</hlm-input-group>\n} @else {\n<textarea hlmTextarea [class]=\"_classes()\" [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\" [required]=\"required()\"\n  [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\" [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\" (input)=\"onInput($event)\"\n  (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n}" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
 
+/**
+ * Class map for the collapsible wrapper of `yuw-search-input`.
+ *
+ * The wrapper exists because the component host is `display: contents` and cannot own the animated
+ * width itself. Width animates as `max-width`, bound inline from `expandedWidth`, so the same
+ * element can be a 32px square when collapsed and the full field when expanded.
+ *
+ * Deliberately **not** `overflow-hidden`: the helm draws the group's focus ring outside the border
+ * box, so clipping here would crop it. The input clips itself instead — see
+ * `searchInputFieldVariants`.
+ *
+ * The anchoring and transition classes hang off `collapseFrom` rather than the cva base, because a
+ * non-collapsible instance renders the same wrapper and must stay a plain box with no transition.
+ * The anchor is an auto margin rather than `position: absolute`, so the control keeps participating
+ * in its parent's layout.
+ */
+const searchInputCollapsibleVariants = cva('w-full', {
+    variants: {
+        collapseFrom: {
+            left: 'me-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+            right: 'ms-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+        },
+        expanded: {
+            true: '',
+            false: 'max-w-8',
+        },
+    },
+    defaultVariants: {
+        expanded: true,
+    },
+});
+/**
+ * Classes for the search icon slot.
+ *
+ * Fixed 32px square, never a share of the wrapper: sizing it with `w-full` would make it track the
+ * wrapper mid-transition, sliding the icon toward the middle and snapping it back at the end.
+ * `shrink-0` holds that width against the sibling input's `flex-1`.
+ *
+ * `ps-0` cancels the addon's own `ps-2`, and `has-[>button]:ms-0` cancels the helm's
+ * `has-[>button]:ms-[-0.3rem]`; the prefix has to be repeated because tailwind-merge keys conflicts
+ * per variant prefix, so a bare `ms-0` would not displace it.
+ */
+const searchInputIconVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'w-8 shrink-0 justify-center ps-0 has-[>button]:ms-0',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        collapsible: false,
+    },
+});
+/**
+ * Classes for the native input while the control is collapsible.
+ *
+ * The input clips itself so the wrapper doesn't have to (which would take the focus ring with it).
+ * `min-w-0` is what lets it shrink: a flex item defaults to `min-width: auto` and would otherwise
+ * hold the collapsed wrapper open past 32px.
+ */
+const searchInputFieldVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'min-w-0 overflow-hidden',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        collapsible: false,
+    },
+});
+
 /** Module-level counter backing each instance's stable fallback `id`. */
 let nextYuwSearchInputId = 0;
 /**
- * Search input control featuring a leading search icon, optional clear button, and form integration (`ngModel`, `formControlName`).
+ * 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.
@@ -903,6 +1044,14 @@ let nextYuwSearchInputId = 0;
  * - `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.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -910,9 +1059,26 @@ let nextYuwSearchInputId = 0;
  * - `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..."
+ * />
  * ```
  */
 class YuwSearchInputComponent extends YuwValueAccessorBase {
@@ -928,15 +1094,31 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
         this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+        this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
+        this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+        this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
+        this._input = viewChild.required('searchInput');
+        this._injector = inject(Injector);
         this.searched = output();
         this.committed = output();
-        this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
         this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
         this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
-        this._showClear = computed(() => this.clearAriaLabel() !== undefined && this.value().length > 0 && !this._disabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
-        this._input = viewChild.required('searchInput');
+        this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
+        this._expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+        this._wrapperClasses = computed(() => searchInputCollapsibleVariants({ collapseFrom: this.collapseFrom(), expanded: this._expanded() }), ...(ngDevMode ? [{ debugName: "_wrapperClasses" }] : /* istanbul ignore next */ []));
+        this._wrapperMaxWidth = computed(() => (this._expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
+        this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
+        this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
+        this._showExpandButton = computed(() => !this._expanded() && !this._disabled(), ...(ngDevMode ? [{ debugName: "_showExpandButton" }] : /* istanbul ignore next */ []));
+        this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
+            this.value().length > 0 &&
+            this._expanded() &&
+            !this._disabled() &&
+            !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
         return '';
@@ -954,15 +1136,50 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.searched.emit('');
         this._input().nativeElement.focus();
     }
+    /**
+     * 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.
+     */
+    onExpand() {
+        this._open.set(true);
+        afterNextRender(() => this._input().nativeElement.focus(), { injector: this._injector });
+    }
+    /**
+     * 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.
+     */
+    onExpandFocus(event) {
+        if (event.target.matches(':focus-visible')) {
+            this.onExpand();
+        }
+    }
+    onEscape() {
+        if (!this._collapsible()) {
+            return;
+        }
+        this._open.set(false);
+        this._input().nativeElement.blur();
+    }
+    onBlur() {
+        this._onBlur();
+        if (this._collapsible() && this.value().length === 0) {
+            this._open.set(false);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (_showClear()) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n        <ng-icon name=\"lucideX\"/>\n      </button>\n    </hlm-input-group-addon>\n  }\n</hlm-input-group>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          class=\"pointer-events-auto\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\"/>\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\"/>\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\"/>\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (_showClear()) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n        <ng-icon name=\"lucideX\"/>\n      </button>\n    </hlm-input-group-addon>\n  }\n</hlm-input-group>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          class=\"pointer-events-auto\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\"/>\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\"/>\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\"/>\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
 
 /** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
  * directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
@@ -2218,6 +2435,10 @@ const YUW_DATATABLE_FEATURES = {
  *   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
@@ -2258,6 +2479,8 @@ class YuwDatatableComponent {
         this.loadingRows = input(5, { ...(ngDevMode ? { debugName: "loadingRows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.previousPageLabel = input.required(...(ngDevMode ? [{ debugName: "previousPageLabel" }] : /* istanbul ignore next */ []));
         this.nextPageLabel = input.required(...(ngDevMode ? [{ debugName: "nextPageLabel" }] : /* istanbul ignore next */ []));
+        this.paginationEllipsisSrText = input.required(...(ngDevMode ? [{ debugName: "paginationEllipsisSrText" }] : /* istanbul ignore next */ []));
+        this.paginationAriaLabel = input.required(...(ngDevMode ? [{ debugName: "paginationAriaLabel" }] : /* istanbul ignore next */ []));
         this.caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
         this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
         this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
@@ -2265,6 +2488,8 @@ class YuwDatatableComponent {
         this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
         this.rowSelection = model({}, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
         this.pagination = model({ pageIndex: 0, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        this.currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => this.pagination().pageIndex,
+            computation: (pageIndex) => pageIndex + 1 });
         this._options = () => ({
             features: {
                 ...YUW_DATATABLE_FEATURES,
@@ -2306,6 +2531,10 @@ class YuwDatatableComponent {
             desc: 'descending',
         };
     }
+    /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
+    onPageChange(page) {
+        this.pagination.update((current) => ({ ...current, pageIndex: page - 1 }));
+    }
     /**
      * Applies the real options once, after inputs are set.
      *
@@ -2325,14 +2554,14 @@ class YuwDatatableComponent {
         this.table.setOptions((previous) => ({ ...previous, ...options }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwButtonComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
+            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
 
 /**
  * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
@@ -3471,13 +3700,13 @@ class YuwSidebarTriggerComponent {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar-trigger', imports: [HlmSidebarTrigger], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 
 /**
@@ -3746,5 +3975,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map