yukit-web 0.0.4 → 0.0.6

package/fesm2022/yukit-web.mjs

@@ -64,7 +64,7 @@ import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 import * as i1$j from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
-import { hlm } from 'yukit-web/helm/utils';
+import { hlm, classes } from 'yukit-web/helm/utils';
 import { HlmSpinner } from 'yukit-web/helm/spinner';
 import { HlmToaster } from 'yukit-web/helm/sonner';
 export { toast as yuwToast } from '@spartan-ng/brain/sonner';
@@ -82,8 +82,9 @@ import { HlmTabsImports } from 'yukit-web/helm/tabs';
 import * as i1$p from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
 import * as i1$q from 'yukit-web/helm/sidebar';
-import { injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset } from 'yukit-web/helm/sidebar';
+import { HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
@@ -227,11 +228,11 @@ const yuwButtonVariants = cva('', {
         },
         size: {
             default: 'h-10',
-            xs: "h-7",
-            sm: "h-9",
+            xs: 'h-7',
+            sm: 'h-9',
             lg: 'h-11',
             icon: 'size-10',
-            'icon-xs': "size-7",
+            'icon-xs': 'size-7',
             'icon-sm': 'size-9',
             'icon-lg': 'size-11',
         },
@@ -249,7 +250,7 @@ const yuwButtonVariants = cva('', {
         animationDisabled: {
             true: 'active:translate-y-0!',
             false: '',
-        }
+        },
     },
     defaultVariants: {
         variant: 'default',
@@ -331,7 +332,12 @@ class YuwButtonComponent {
         this._animationDisabled = computed(() => this.animationDisabled() || this._host.nativeElement.hasAttribute('aria-haspopup'), ...(ngDevMode ? [{ debugName: "_animationDisabled" }] : /* 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({ size: this.size(), variant: this._effectiveVariant(), transparent: this.transparent(), animationDisabled: this._animationDisabled() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
+        this._btnClass = computed(() => cn(yuwButtonVariants({
+            size: this.size(),
+            variant: this._effectiveVariant(),
+            transparent: this.transparent(),
+            animationDisabled: this._animationDisabled(),
+        }), 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.
@@ -374,7 +380,7 @@ 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 }, animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", 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 }); }
+    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 }, animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", 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      } @else if (button.href && !button.disabled) {\n        <a\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [href]=\"button.href\"\n          [target]=\"button.target\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </a>\n      } @else {\n        <button\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [type]=\"button.type\"\n          [disabled]=\"button.disabled\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\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,
@@ -382,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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.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" }]
+                    }, 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      } @else if (button.href && !button.disabled) {\n        <a\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [href]=\"button.href\"\n          [target]=\"button.target\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </a>\n      } @else {\n        <button\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [type]=\"button.type\"\n          [disabled]=\"button.disabled\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\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 }] }], animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", 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. */
@@ -423,14 +429,14 @@ class YuwBadgeComponent {
         this.removed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <yuw-button variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n                [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\n      <ng-icon  name=\"lucideX\"/>\n    </yuw-button>\n  }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { 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: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\" />\n  <span class=\"truncate\"><ng-content /></span>\n\n  @if (removeLabel()) {\n    <yuw-button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { 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: YuwBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-badge', hostDirectives: [{ directive: HlmBadge, inputs: ['variant'] }], imports: [YuwButtonComponent, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         '[class]': 'dotClass()',
                         '[attr.data-yuw-color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <yuw-button variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n                [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\n      <ng-icon  name=\"lucideX\"/>\n    </yuw-button>\n  }\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\" />\n  <span class=\"truncate\"><ng-content /></span>\n\n  @if (removeLabel()) {\n    <yuw-button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n" }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
@@ -526,16 +532,59 @@ class YuwPaginationComponent {
         this.page.set(target);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "pageChange" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\"/>\n\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { 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: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "pageChange" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\" />\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { 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: YuwPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-pagination', imports: [HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis, NgIcon], providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], host: {
                         class: 'contents',
                         '[attr.data-yuw-color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\"/>\n\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\" />\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], ellipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsisSrText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
 
+/**
+ * Height classes for field-shaped controls, keyed by `YuwFieldSizeDto`.
+ *
+ * Values are copied from `yuwButtonVariants`' `size` group on purpose, so a field and a button of
+ * the same size name are the same number of pixels tall. Both helm shells the fields render
+ * (`hlmInput` and `hlm-input-group`) hard-code `h-8`, so every size — `default` included — has to
+ * emit a class; an empty string for the default would leave the helm height standing.
+ *
+ * @see yuwFieldMinHeightVariants for the wrapping variant used by the multi-select chips shell.
+ */
+const yuwFieldSizeVariants = cva('', {
+    variants: {
+        size: {
+            default: 'h-10',
+            xs: 'h-7',
+            sm: 'h-9',
+            lg: 'h-11',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * `min-height` counterpart of `yuwFieldSizeVariants`, for shells that grow past one row.
+ *
+ * The combobox chips shell wraps its selected chips onto further lines, so it is sized by the
+ * helm's `min-h-8` rather than a fixed height; pinning `h-*` there would clip the second row.
+ */
+const yuwFieldMinHeightVariants = cva('', {
+    variants: {
+        size: {
+            default: 'min-h-10',
+            xs: 'min-h-7',
+            sm: 'min-h-9',
+            lg: 'min-h-11',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
 /**
  * Structural directive for custom option item templates in `yuw-combobox`.
  *
@@ -578,6 +627,9 @@ let nextUniqueId$2 = 0;
  * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
  * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
  *   Emits `valueChange` on every selection change.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Applies to whichever control shape renders; the popover
+ *   panel and its inner search field keep their own compact sizing.
  * - `multiple`: Enables multi-selection mode with removable tags/chips.
  * - `disabled`: Disables combobox interaction.
  * - `placeholder`: Placeholder text when no option is selected.
@@ -612,6 +664,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         super(...arguments);
         this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -627,6 +680,9 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._clearVisible = computed(() => this.clearAriaLabel() !== undefined, ...(ngDevMode ? [{ debugName: "_clearVisible" }] : /* istanbul ignore next */ []));
+        this._fieldClass = computed(() => yuwFieldSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_fieldClass" }] : /* istanbul ignore next */ []));
+        this._chipsClass = computed(() => yuwFieldMinHeightVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_chipsClass" }] : /* istanbul ignore next */ []));
+        this._triggerClass = computed(() => yuwButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
         this._generatedId = `yuw-combobox-${++nextUniqueId$2}`;
         this._controlId = computed(() => this.inputId() ?? this._generatedId, ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
         this._singleValue = computed(() => {
@@ -668,14 +724,14 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this._onBlur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n                         [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"/>\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\"/>\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n                [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n                          [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n                          [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n                            [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n                            [showTrigger]=\"false\"/>\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\"/>\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\" [class]=\"_triggerClass()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n                         [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"/>\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\"/>\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n                [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n                          [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n                          [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n                            [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n                            [showTrigger]=\"false\"/>\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\"/>\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\" [class]=\"_triggerClass()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Container directive for collapsible accordion items.
@@ -744,13 +800,13 @@ class YuwAccordionTriggerComponent {
         this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content/>\n</hlm-accordion-trigger>\n", dependencies: [{ kind: "component", type: HlmAccordionTrigger, selector: "hlm-accordion-trigger", inputs: ["triggerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content />\n</hlm-accordion-trigger>\n", dependencies: [{ kind: "component", type: HlmAccordionTrigger, selector: "hlm-accordion-trigger", inputs: ["triggerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-accordion-trigger', imports: [HlmAccordionTrigger], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content/>\n</hlm-accordion-trigger>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content />\n</hlm-accordion-trigger>\n" }]
         }], propDecorators: { triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
 
 /**
@@ -760,13 +816,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwAccordionContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionContentComponent, isStandalone: true, selector: "yuw-accordion-content", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-content>\n  <ng-content/>\n</hlm-accordion-content>\n", dependencies: [{ kind: "component", type: HlmAccordionContent, selector: "hlm-accordion-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionContentComponent, isStandalone: true, selector: "yuw-accordion-content", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-content>\n  <ng-content />\n</hlm-accordion-content>\n", dependencies: [{ kind: "component", type: HlmAccordionContent, selector: "hlm-accordion-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-accordion-content', imports: [HlmAccordionContent], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-content>\n  <ng-content/>\n</hlm-accordion-content>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-content>\n  <ng-content />\n</hlm-accordion-content>\n" }]
         }] });
 
 /** Bundle for consumers who want every `yuw-accordion-*` piece in one `imports: [...]` entry —
@@ -817,6 +873,8 @@ let nextYuwInputId = 0;
  * - `value`: Two-way text string.
  * - `inputId`: `id` applied to the native input, for external `<label for>` association.
  * - `type`: HTML input type (`'text'`, `'email'`, `'number'`, etc.). Default is `'text'`.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Default is `'default'`.
  * - `inputmode`: Virtual keyboard hint (e.g. `'numeric'`).
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
@@ -846,6 +904,7 @@ class YuwInputComponent extends YuwValueAccessorBase {
         this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -859,7 +918,7 @@ class YuwInputComponent extends YuwValueAccessorBase {
         this.committed = output();
         this._autoId = `yuw-input-${++nextYuwInputId}`;
         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._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
         this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
@@ -877,14 +936,14 @@ class YuwInputComponent extends YuwValueAccessorBase {
         this.committed.emit(this.value());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", 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 }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasAddons()) {\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\"/>\n      </hlm-input-group-addon>\n    }\n\n    <input hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n           [disabled]=\"_disabled()\"\n           [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n           [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n           (input)=\"onInput($event)\"\n           (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n\n    @if (_hasRightAddon()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <ng-content select=\"yuw-right-addon\"/>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n} @else {\n  <input hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n         [value]=\"value()\" [disabled]=\"_disabled()\"\n         [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n         [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n}\n", dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", 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 }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasAddons()) {\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    />\n\n    @if (_hasRightAddon()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <ng-content select=\"yuw-right-addon\" />\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n} @else {\n  <input\n    hlmInput\n    [class]=\"_classes()\"\n    [id]=\"_inputId()\"\n    [type]=\"type()\"\n    [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n}\n", dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-input', imports: [HlmInput, HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon], providers: [provideValueAccessor(YuwInputComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_hasAddons()) {\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\"/>\n      </hlm-input-group-addon>\n    }\n\n    <input hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n           [disabled]=\"_disabled()\"\n           [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n           [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n           (input)=\"onInput($event)\"\n           (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n\n    @if (_hasRightAddon()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <ng-content select=\"yuw-right-addon\"/>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n} @else {\n  <input hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n         [value]=\"value()\" [disabled]=\"_disabled()\"\n         [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n         [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n}\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 }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", 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 }] }], 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 }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_hasAddons()) {\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    />\n\n    @if (_hasRightAddon()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <ng-content select=\"yuw-right-addon\" />\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n} @else {\n  <input\n    hlmInput\n    [class]=\"_classes()\"\n    [id]=\"_inputId()\"\n    [type]=\"type()\"\n    [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n}\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 }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", 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 }] }], 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 }] }] } });
 
 let nextYuwTextareaId = 0;
 /**
@@ -949,13 +1008,13 @@ class YuwTextareaComponent extends YuwValueAccessorBase {
         this.committed.emit(this.value());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, 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}", dependencies: [{ kind: "directive", type: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, 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\n      hlmInputGroupTextarea\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></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\n    hlmTextarea\n    [class]=\"_classes()\"\n    [id]=\"_inputId()\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.rows]=\"rows()\"\n    [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  ></textarea>\n}\n", dependencies: [{ kind: "directive", type: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-textarea', imports: [HlmTextarea, HlmInputGroup, HlmInputGroupTextarea, HlmInputGroupAddon], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
                         class: 'contents',
-                    }, 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}" }]
+                    }, 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\n      hlmInputGroupTextarea\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></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\n    hlmTextarea\n    [class]=\"_classes()\"\n    [id]=\"_inputId()\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.rows]=\"rows()\"\n    [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  ></textarea>\n}\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 }] }] } });
 
 /**
@@ -982,19 +1041,35 @@ const searchInputCollapsibleVariants = cva('w-full', {
         },
         expanded: {
             true: '',
-            false: 'max-w-8',
+            false: '',
+        },
+        size: {
+            default: '',
+            xs: '',
+            sm: '',
+            lg: '',
         },
     },
+    compoundVariants: [
+        { expanded: false, size: 'default', class: 'max-w-10' },
+        { expanded: false, size: 'xs', class: 'max-w-7' },
+        { expanded: false, size: 'sm', class: 'max-w-9' },
+        { expanded: false, size: 'lg', class: 'max-w-11' },
+    ],
     defaultVariants: {
         expanded: true,
+        size: 'default',
     },
 });
 /**
  * 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`.
+ * A fixed square matching the control height, 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`.
+ *
+ * The width is keyed by `size` through compound variants so the collapsed control stays square at
+ * every size, mirroring the `icon-*` sizes of `<yuw-button>`.
  *
  * `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
@@ -1003,12 +1078,25 @@ const searchInputCollapsibleVariants = cva('w-full', {
 const searchInputIconVariants = cva('', {
     variants: {
         collapsible: {
-            true: 'w-8 shrink-0 justify-center ps-0 has-[>button]:ms-0',
+            true: 'shrink-0 justify-center ps-0 has-[>button]:ms-0',
             false: '',
         },
+        size: {
+            default: '',
+            xs: '',
+            sm: '',
+            lg: '',
+        },
     },
+    compoundVariants: [
+        { collapsible: true, size: 'default', class: 'w-10' },
+        { collapsible: true, size: 'xs', class: 'w-7' },
+        { collapsible: true, size: 'sm', class: 'w-9' },
+        { collapsible: true, size: 'lg', class: 'w-11' },
+    ],
     defaultVariants: {
         collapsible: false,
+        size: 'default',
     },
 });
 /**
@@ -1051,6 +1139,44 @@ const searchInputGroupVariants = cva('', {
         transparent: false,
     },
 });
+/**
+ * Size override for the collapsed expand button.
+ *
+ * The helm `hlmInputGroupButton` caps its `size` input at `icon-sm` (`size-8`), so the input is left
+ * at `icon-sm` and the real dimensions come from here instead — the same approach `<yuw-switch>`
+ * takes with its track. Without this the tap target stays 32px inside a 44px square at `lg`, leaving
+ * a ring of dead space, and the glyph stops tracking the control.
+ *
+ * Each square is the control height minus 2px, one for the group's border on each side. Filling the
+ * full height instead would paint the button's `hover:bg-muted` over that border and make it vanish
+ * on hover — the addon cannot be used as the reference box either, since it is `h-auto` and stretches
+ * taller than the group.
+ *
+ * Only the box scales; the glyph is left alone deliberately. The template passes `size="icon-sm"`
+ * rather than letting the helm default to `xs`, because the `xs` variant declares its own 14px glyph
+ * while `icon-sm` declares none — so the icon falls through to `hlmBtn`'s `--spacing(4)`, the same
+ * 16px the addon renders when the control is expanded. Without that the icon changes size as the
+ * control collapses.
+ *
+ * Overriding the glyph from here does not work: the helm registers its classes through `classes()`,
+ * which merges its own sources last, so a `[class]` binding loses that particular conflict.
+ *
+ * `pointer-events-auto` is in the base because the collapsed icon slot sets `pointer-events-none` on
+ * its subtree; the button is the one thing inside it that must stay clickable.
+ */
+const searchInputExpandButtonVariants = cva('pointer-events-auto', {
+    variants: {
+        size: {
+            default: 'size-[38px]',
+            xs: 'size-[26px]',
+            sm: 'size-[34px]',
+            lg: 'size-[42px]',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
 
 /** Module-level counter backing each instance's stable fallback `id`. */
 let nextYuwSearchInputId = 0;
@@ -1077,6 +1203,8 @@ let nextYuwSearchInputId = 0;
  *   app is responsible for translating.
  * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
  *   Collapsible mode only.
+ * - `size`: Control height, matching the `<yuw-button>` of the same name. While collapsed the
+ *   control is a square of that height.
  * - `transparent`: Removes the field's resting border and background so it sits directly on its
  *   container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
  * - `class`: Extra classes merged onto the input group.
@@ -1124,6 +1252,7 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         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.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
@@ -1133,15 +1262,21 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.searched = output();
         this.committed = output();
         this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
-        this._classes = computed(() => cn(searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         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._wrapperClasses = computed(() => searchInputCollapsibleVariants({
+            collapseFrom: this.collapseFrom(),
+            expanded: this._expanded(),
+            size: this.size(),
+        }), ...(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._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible(), size: this.size() }), ...(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 */ []));
+        /** Geometry for the collapsed expand button, which the helm's capped `size` input cannot express. */
+        this._expandButtonClasses = computed(() => searchInputExpandButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_expandButtonClasses" }] : /* istanbul ignore next */ []));
         this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
             this.value().length > 0 &&
             this._expanded() &&
@@ -1200,14 +1335,14 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         }
     }
     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 }, 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 }, transparent: { classPropertyName: "transparent", publicName: "transparent", 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 }); }
+    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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", 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]=\"_expandButtonClasses()\"\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: "<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 }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", 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"] }] } });
+                    }, 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]=\"_expandButtonClasses()\"\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", 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"
@@ -1224,6 +1359,7 @@ let nextYuwPasswordInputId = 0;
  *
  * Inputs / Models:
  * - `value`: Two-way password string.
+ * - `size`: Control height, matching the `<yuw-button>` of the same name.
  * - `inputId`: `id` applied to the native input, for external `<label for>` association.
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
@@ -1250,6 +1386,7 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
         super(...arguments);
         this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1263,7 +1400,7 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
         this.masked = model(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
         this._autoId = `yuw-password-input-${++nextYuwPasswordInputId}`;
         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._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._reveal = computed(() => YUW_PASSWORD_REVEAL_STATES[`${this.masked()}`], ...(ngDevMode ? [{ debugName: "_reveal" }] : /* istanbul ignore next */ []));
     }
@@ -1280,14 +1417,40 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
         this.masked.update((masked) => !masked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-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 }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", masked: "maskedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\n  <input\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    [type]=\"_reveal().inputType\"\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    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (revealAriaLabel(); as label) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button\n        hlmInputGroupButton\n        size=\"icon-xs\"\n        [disabled]=\"_disabled()\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-pressed]=\"!_reveal().struck\"\n        (click)=\"onToggleReveal()\"\n      >\n        <ng-icon [name]=\"_reveal().icon\"/>\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: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", masked: "maskedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\n  <input\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    [type]=\"_reveal().inputType\"\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    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (revealAriaLabel(); as label) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button\n        hlmInputGroupButton\n        size=\"icon-xs\"\n        [disabled]=\"_disabled()\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-pressed]=\"!_reveal().struck\"\n        (click)=\"onToggleReveal()\"\n      >\n        <ng-icon [name]=\"_reveal().icon\" />\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-password-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n  <input\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    [type]=\"_reveal().inputType\"\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    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (revealAriaLabel(); as label) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button\n        hlmInputGroupButton\n        size=\"icon-xs\"\n        [disabled]=\"_disabled()\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-pressed]=\"!_reveal().struck\"\n        (click)=\"onToggleReveal()\"\n      >\n        <ng-icon [name]=\"_reveal().icon\"/>\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 }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n  <input\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    [type]=\"_reveal().inputType\"\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    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (revealAriaLabel(); as label) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button\n        hlmInputGroupButton\n        size=\"icon-xs\"\n        [disabled]=\"_disabled()\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-pressed]=\"!_reveal().struck\"\n        (click)=\"onToggleReveal()\"\n      >\n        <ng-icon [name]=\"_reveal().icon\" />\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }] } });
+
+/**
+ * Cell size for `<yuw-input-otp>`, applied to the container and reaching each
+ * `<hlm-input-otp-slot>` through a descendant selector.
+ *
+ * The slots are separate components with their own `size-8`, and the container has no class
+ * passthrough to them, so the scale is expressed as an arbitrary descendant variant keyed on the
+ * slot's `data-slot` attribute. `!` is not needed: the generated rule is more specific than the
+ * slot's own single utility class.
+ *
+ * Cells are square, so the values are `size-*` rather than `h-*`, matching the `icon-*` sizes of
+ * `<yuw-button>` at the same name.
+ */
+const yuwInputOtpSizeVariants = cva('', {
+    variants: {
+        size: {
+            default: '[&_[data-slot=input-otp-slot]]:size-10',
+            xs: '[&_[data-slot=input-otp-slot]]:size-7',
+            sm: '[&_[data-slot=input-otp-slot]]:size-9',
+            lg: '[&_[data-slot=input-otp-slot]]:size-11',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
 
 /**
  * Expands a list of group sizes (`[3, 3]`) into the groups the template renders, assigning
@@ -1328,6 +1491,7 @@ let nextYuwInputOtpId = 0;
  * - `groupSizes`: Slot counts per visual group (`number[]`). A separator renders between groups, e.g. `[3, 3]` gives `000-000`. Default is `[6]`.
  * - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
  * - `disabled`: Disables input interaction.
+ * - `size`: Cell size, matching the `<yuw-button>` of the same name.
  * - `invalid`: Forces invalid styling.
  * - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
  * - `transformPaste`: Normalizes pasted text before it fills the slots.
@@ -1349,6 +1513,7 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.groupSizes = input([6], ...(ngDevMode ? [{ debugName: "groupSizes" }] : /* istanbul ignore next */ []));
         this.mode = input('numeric', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1357,7 +1522,7 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
         this.completed = output();
         this._autoId = `yuw-input-otp-${++nextYuwInputOtpId}`;
         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._classes = computed(() => cn(yuwInputOtpSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._groups = computed(() => buildInputOtpGroups(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
         this._length = computed(() => totalInputOtpLength(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_length" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
@@ -1369,14 +1534,14 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<brn-input-otp\n  hlmInputOtp\n  [class]=\"_classes()\"\n  [inputId]=\"_inputId()\"\n  [length]=\"_length()\"\n  [value]=\"value()\"\n  [inputMode]=\"mode()\"\n  [disabled]=\"_disabled()\"\n  [autofocus]=\"autofocus()\"\n  [transformPaste]=\"transformPaste()\"\n  inputAutocomplete=\"one-time-code\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n  (completed)=\"completed.emit($event)\"\n>\n  @for (group of _groups(); track $index) {\n    @if (group.precededBySeparator) {\n      <hlm-input-otp-separator/>\n    }\n\n    <hlm-input-otp-group>\n      @for (index of group.indices; track index) {\n        <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"invalid()\"/>\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\n", dependencies: [{ kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<brn-input-otp\n  hlmInputOtp\n  [class]=\"_classes()\"\n  [inputId]=\"_inputId()\"\n  [length]=\"_length()\"\n  [value]=\"value()\"\n  [inputMode]=\"mode()\"\n  [disabled]=\"_disabled()\"\n  [autofocus]=\"autofocus()\"\n  [transformPaste]=\"transformPaste()\"\n  inputAutocomplete=\"one-time-code\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n  (completed)=\"completed.emit($event)\"\n>\n  @for (group of _groups(); track $index) {\n    @if (group.precededBySeparator) {\n      <hlm-input-otp-separator />\n    }\n\n    <hlm-input-otp-group>\n      @for (index of group.indices; track index) {\n        <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"invalid()\" />\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\n", dependencies: [{ kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-input-otp', imports: [BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<brn-input-otp\n  hlmInputOtp\n  [class]=\"_classes()\"\n  [inputId]=\"_inputId()\"\n  [length]=\"_length()\"\n  [value]=\"value()\"\n  [inputMode]=\"mode()\"\n  [disabled]=\"_disabled()\"\n  [autofocus]=\"autofocus()\"\n  [transformPaste]=\"transformPaste()\"\n  inputAutocomplete=\"one-time-code\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n  (completed)=\"completed.emit($event)\"\n>\n  @for (group of _groups(); track $index) {\n    @if (group.precededBySeparator) {\n      <hlm-input-otp-separator/>\n    }\n\n    <hlm-input-otp-group>\n      @for (index of group.indices; track index) {\n        <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"invalid()\"/>\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\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 }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<brn-input-otp\n  hlmInputOtp\n  [class]=\"_classes()\"\n  [inputId]=\"_inputId()\"\n  [length]=\"_length()\"\n  [value]=\"value()\"\n  [inputMode]=\"mode()\"\n  [disabled]=\"_disabled()\"\n  [autofocus]=\"autofocus()\"\n  [transformPaste]=\"transformPaste()\"\n  inputAutocomplete=\"one-time-code\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n  (completed)=\"completed.emit($event)\"\n>\n  @for (group of _groups(); track $index) {\n    @if (group.precededBySeparator) {\n      <hlm-input-otp-separator />\n    }\n\n    <hlm-input-otp-group>\n      @for (index of group.indices; track index) {\n        <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"invalid()\" />\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\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 }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
 /**
  * Form label directive applied directly to a native `<label>` element.
@@ -1502,15 +1667,62 @@ class YuwCheckboxComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange", indeterminate: "indeterminateChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox [class]=\"_class()\" [checked]=\"value()\" [(indeterminate)]=\"indeterminate\" [disabled]=\"_disabled()\"\n                [required]=\"required()\" [forceInvalid]=\"invalid()\" [name]=\"name() ?? null\" [inputId]=\"inputId() ?? null\"\n                [aria-label]=\"ariaLabel() ?? null\" [aria-labelledby]=\"ariaLabelledby() ?? null\"\n                [aria-describedby]=\"ariaDescribedby() ?? null\" (checkedChange)=\"onCheckedChange($event)\"/>\n  <ng-content/>\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange", indeterminate: "indeterminateChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox\n    [class]=\"_class()\"\n    [checked]=\"value()\"\n    [(indeterminate)]=\"indeterminate\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [name]=\"name() ?? null\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-checkbox', imports: [HlmCheckbox, YuwLabel], providers: [provideValueAccessor(YuwCheckboxComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox [class]=\"_class()\" [checked]=\"value()\" [(indeterminate)]=\"indeterminate\" [disabled]=\"_disabled()\"\n                [required]=\"required()\" [forceInvalid]=\"invalid()\" [name]=\"name() ?? null\" [inputId]=\"inputId() ?? null\"\n                [aria-label]=\"ariaLabel() ?? null\" [aria-labelledby]=\"ariaLabelledby() ?? null\"\n                [aria-describedby]=\"ariaDescribedby() ?? null\" (checkedChange)=\"onCheckedChange($event)\"/>\n  <ng-content/>\n</label>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox\n    [class]=\"_class()\"\n    [checked]=\"value()\"\n    [(indeterminate)]=\"indeterminate\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [name]=\"name() ?? null\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }] } });
 
+/**
+ * Helm switch size each of our sizes maps onto.
+ *
+ * The helm ships two real scales — `sm` (14x24 track, 12px thumb) and `default` (18.4x32, 16px) —
+ * and keys both the track and the thumb off the resulting `data-size` attribute. Mapping onto the
+ * nearer of the two keeps that attribute truthful, so `yuwSwitchSizeVariants` only has to override
+ * the sizes that genuinely differ, under the prefix the helm actually emits.
+ */
+const YUW_SWITCH_HELM_SIZE = {
+    xs: 'sm',
+    sm: 'default',
+    default: 'default',
+    lg: 'default',
+};
+/**
+ * Track and thumb geometry for `<yuw-switch>`.
+ *
+ * A switch is not a field, so these are not the field heights — a 40px-tall switch would dominate any
+ * row it sits in. The scale keeps the helm's ~1.75:1 track ratio and its 2px inset, and shifts the
+ * whole thing up one step so `default` reads at 22x36 instead of the helm's cramped 18.4x32.
+ * Sizes are named to match the rest of the library, not to match its pixel values.
+ *
+ * Each track width is exactly twice its thumb. That is not cosmetic: the helm moves the thumb with
+ * `translate-x-[calc(100%-2px)]`, which is thumb-relative, so the travel it produces (`thumb - 2`)
+ * only equals the space available (`track - 2*border - thumb`) when `track == 2 * thumb`. Break that
+ * and the thumb stops short of the far edge, leaving the on state visibly off-centre.
+ *
+ * Only the sizes that differ from the mapped helm scale are declared, each under the prefix that
+ * scale emits (see {@link YUW_SWITCH_HELM_SIZE}) — a plain `h-*` does not displace the helm's
+ * `data-[size=…]:h-*`, it just loses to it on specificity. `xs` maps exactly onto the helm's `sm`
+ * scale, so it needs nothing. The thumb's `translate-x-[calc(100%-2px)]` is thumb-relative and
+ * follows any size change on its own.
+ */
+const yuwSwitchSizeVariants = cva('', {
+    variants: {
+        size: {
+            xs: '',
+            sm: 'data-[size=default]:h-[18px] data-[size=default]:w-[28px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-3.5',
+            default: 'data-[size=default]:h-[22px] data-[size=default]:w-[36px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-[18px]',
+            lg: 'data-[size=default]:h-[26px] data-[size=default]:w-[44px] [&_[data-slot=switch-thumb]]:group-data-[size=default]/switch:size-[22px]',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
 /**
  * Toggle switch control for binary settings and immediate state changes.
  *
@@ -1520,7 +1732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *
  * Inputs / Models:
  * - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
- * - `size`: Track size variant (`'default'`, `'sm'`). Default is `'default'`.
+ * - `size`: Track size (`'default'`, `'xs'`, `'sm'`, `'lg'`). Named to match the rest of the
+ *   library; the pixel values keep a switch's own proportions rather than the field heights.
  * - `disabled`: Disables switch interaction.
  * - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
  * - `ariaLabel`: Accessible name for switches with no visible adjacent label.
@@ -1536,6 +1749,8 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         super(...arguments);
         this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this._helmSize = computed(() => YUW_SWITCH_HELM_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "_helmSize" }] : /* istanbul ignore next */ []));
+        this._switchClass = computed(() => yuwSwitchSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_switchClass" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -1550,13 +1765,13 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"size()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content/>\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-switch', imports: [...HlmSwitchImports, YuwLabel], providers: [provideValueAccessor(YuwSwitchComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"size()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content/>\n</label>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
 
 /** Module-level counter so every unnamed group gets its own radio `name`. Binding `[name]`
@@ -1608,13 +1823,13 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator/>\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-radio-group', imports: [...HlmRadioGroupImports, YuwLabel], providers: [provideValueAccessor(YuwRadioGroupComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator/>\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
@@ -1869,13 +2084,13 @@ const YuwEmptyImports = [
  */
 class YuwContextMenuCheckboxIndicatorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuCheckboxIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-checkbox-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-checkbox-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuCheckboxIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-checkbox-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-checkbox-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-context-menu-checkbox-indicator', imports: [HlmDropdownMenuCheckboxIndicator], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-checkbox-indicator/>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-checkbox-indicator />\n" }]
         }] });
 
 /**
@@ -1894,13 +2109,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwContextMenuRadioIndicatorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuRadioIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-radio-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-radio-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuRadioIndicator, selector: "hlm-dropdown-menu-radio-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuRadioIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-radio-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-radio-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuRadioIndicator, selector: "hlm-dropdown-menu-radio-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-context-menu-radio-indicator', imports: [HlmDropdownMenuRadioIndicator], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-radio-indicator/>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-radio-indicator />\n" }]
         }] });
 
 /**
@@ -1917,13 +2132,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwContextMenuSubIndicatorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-sub-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-item-sub-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuItemSubIndicator, selector: "hlm-dropdown-menu-item-sub-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-sub-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-item-sub-indicator />\n", dependencies: [{ kind: "component", type: HlmDropdownMenuItemSubIndicator, selector: "hlm-dropdown-menu-item-sub-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-context-menu-sub-indicator', imports: [HlmDropdownMenuItemSubIndicator], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-item-sub-indicator/>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-item-sub-indicator />\n" }]
         }] });
 
 /**
@@ -2227,6 +2442,10 @@ let nextUniqueId = 0;
 class YuwDatepickerComponent extends YuwValueAccessorBase {
     constructor() {
         super(...arguments);
+        this._singleConfig = injectHlmDatePickerConfig();
+        this._rangeConfig = injectHlmDateRangePickerConfig();
+        this._multiConfig = injectHlmDatePickerMultiConfig();
+        this._monthYearConfig = injectHlmMonthYearPickerConfig();
         this.mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2236,16 +2455,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this.captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
         this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         this.buttonId = input(undefined, ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.formatDate = input(undefined, ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
-        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._generatedButtonId = `yuw-datepicker-${++nextUniqueId}`;
+        this._triggerClass = computed(() => cn(yuwButtonVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._buttonId = computed(() => this.buttonId() ?? this._generatedButtonId, ...(ngDevMode ? [{ debugName: "_buttonId" }] : /* istanbul ignore next */ []));
-        this._singleConfig = injectHlmDatePickerConfig();
-        this._rangeConfig = injectHlmDateRangePickerConfig();
-        this._multiConfig = injectHlmDatePickerMultiConfig();
-        this._monthYearConfig = injectHlmMonthYearPickerConfig();
         this._formatSingle = computed(() => this.formatDate() ?? this._singleConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatSingle" }] : /* istanbul ignore next */ []));
         this._formatMonthYear = computed(() => this.formatDate() ?? this._monthYearConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatMonthYear" }] : /* istanbul ignore next */ []));
         this._formatRange = computed(() => {
@@ -2288,14 +2505,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker [date]=\"_rangeValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatRange()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi [date]=\"_multipleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\"\n                           [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatMulti()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [align]=\"align()\" [formatDate]=\"_formatMonthYear()\" (dateChange)=\"onValueChange($event)\"\n                           (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                     [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDate]=\"_formatSingle()\"\n                     (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$b.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$b.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$b.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$b.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker [date]=\"_rangeValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatRange()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi [date]=\"_multipleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\"\n                           [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatMulti()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [align]=\"align()\" [formatDate]=\"_formatMonthYear()\" (dateChange)=\"onValueChange($event)\"\n                           (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                     [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDate]=\"_formatSingle()\"\n                     (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n" }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }] } });
 
 /**
  * Outer wrapper container directive for responsive HTML table scroll container.
@@ -2616,9 +2833,7 @@ class YuwDatatableComponent {
                 ...YUW_DATATABLE_FEATURES,
                 coreRowModel: createCoreRowModel(),
                 filteredRowModel: createFilteredRowModel(),
-                ...(this.sortable()
-                    ? { sortedRowModel: createSortedRowModel(), sortFns }
-                    : {}),
+                ...(this.sortable() ? { sortedRowModel: createSortedRowModel(), sortFns } : {}),
                 ...(this.paginated() ? { paginatedRowModel: createPaginatedRowModel() } : {}),
             },
             data: this.data(),
@@ -2694,13 +2909,13 @@ 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 }, 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\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                [class]=\"_cellClasses().get(header.column.id)?.header\">\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                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\"/>\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 [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\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 [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\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"] }, { 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: 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\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 [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\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 [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\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\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\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"] }, { 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: YuwDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\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                [class]=\"_cellClasses().get(header.column.id)?.header\">\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                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\"/>\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 [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\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 [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\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 [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\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 [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\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\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", 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"] }] } });
 
 /**
@@ -2741,13 +2956,13 @@ class YuwAvatarComponent {
         this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\"/>\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n      <ng-content select=\"[yuwAvatarBadgeIcon]\"/>\n    </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                    [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"/>\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"/>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$d.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$d.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$d.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$d.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$d.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$d.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$d.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$d.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$d.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$d.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$d.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$d.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\"/>\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n      <ng-content select=\"[yuwAvatarBadgeIcon]\"/>\n    </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                    [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"/>\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"/>\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
@@ -3008,13 +3223,13 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { 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: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { 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: YuwSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
 const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
 
@@ -3095,13 +3310,13 @@ class YuwPopoverComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n                [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n                [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
 
 /**
@@ -3172,13 +3387,13 @@ class YuwSpinnerComponent {
         this.icon = input('lucideLoader2', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSpinnerComponent, isStandalone: true, selector: "yuw-spinner", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n", dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["icon", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSpinnerComponent, isStandalone: true, selector: "yuw-spinner", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\" />\n", dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["icon", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-spinner', imports: [HlmSpinner], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\" />\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
@@ -3215,13 +3430,13 @@ class YuwToasterComponent {
         this.expand = input(false, { ...(ngDevMode ? { debugName: "expand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwToasterComponent, isStandalone: true, selector: "yuw-toaster", inputs: { richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"/>\n", dependencies: [{ kind: "component", type: HlmToaster, selector: "hlm-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwToasterComponent, isStandalone: true, selector: "yuw-toaster", inputs: { richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"\n/>\n", dependencies: [{ kind: "component", type: HlmToaster, selector: "hlm-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-toaster', imports: [HlmToaster], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"/>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"\n/>\n" }]
         }], propDecorators: { richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], visibleToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleToasts", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }] } });
 
 /**
@@ -3318,13 +3533,13 @@ class YuwAlertComponent {
         this.descriptionSlot = contentChild(YuwAlertDescriptionDirective, ...(ngDevMode ? [{ debugName: "descriptionSlot" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertComponent, isStandalone: true, selector: "yuw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasAction", first: true, predicate: YuwAlertActionDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: YuwAlertTitleDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: YuwAlertDescriptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\"/>\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\"/>\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\"/>\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content/>\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\"/>\n    </div>\n  }\n</hlm-alert>\n", dependencies: [{ kind: "directive", type: HlmAlert, selector: "hlm-alert,[hlmAlert]", inputs: ["variant"] }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]" }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDescription]" }, { kind: "directive", type: HlmAlertAction, selector: "[hlmAlertAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertComponent, isStandalone: true, selector: "yuw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasAction", first: true, predicate: YuwAlertActionDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: YuwAlertTitleDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: YuwAlertDescriptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\" />\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\" />\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\" />\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content />\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\" />\n    </div>\n  }\n</hlm-alert>\n", dependencies: [{ kind: "directive", type: HlmAlert, selector: "hlm-alert,[hlmAlert]", inputs: ["variant"] }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]" }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDescription]" }, { kind: "directive", type: HlmAlertAction, selector: "[hlmAlertAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-alert', imports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\"/>\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\"/>\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\"/>\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content/>\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\"/>\n    </div>\n  }\n</hlm-alert>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\" />\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\" />\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\" />\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content />\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\" />\n    </div>\n  }\n</hlm-alert>\n" }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hasAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertActionDirective), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertTitleDirective), { isSignal: true }] }], descriptionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDescriptionDirective), { isSignal: true }] }] } });
 const YuwAlertImports = [
     YuwAlertComponent,
@@ -3350,9 +3565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             type: Directive,
             args: [{
                     selector: 'yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]',
-                    hostDirectives: [
-                        { directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: yuwDialogTriggerFor', 'type'] },
-                    ],
+                    hostDirectives: [{ directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: yuwDialogTriggerFor', 'type'] }],
                     host: { 'data-slot': 'dialog-trigger' },
                 }]
         }] });
@@ -3445,13 +3658,13 @@ class YuwDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$l.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$l.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$l.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$l.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$l.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$l.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$l.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwDialogTriggerDirective, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]" }, { kind: "directive", type: YuwDialogCloseDirective, selector: "yuw-button[yuwDialogClose]" }, { 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: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-dialog-content\n    *hlmDialogPortal\n    [showCloseButton]=\"false\"\n    class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n    [class]=\"panelClass()\"\n  >\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$l.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$l.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$l.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$l.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$l.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$l.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$l.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwDialogTriggerDirective, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]" }, { kind: "directive", type: YuwDialogCloseDirective, selector: "yuw-button[yuwDialogClose]" }, { 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: YuwDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, YuwButtonComponent, YuwDialogTriggerDirective, YuwDialogCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-dialog-content\n    *hlmDialogPortal\n    [showCloseButton]=\"false\"\n    class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n    [class]=\"panelClass()\"\n  >\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDialogFooterDirective), { isSignal: true }] }] } });
 const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
 
@@ -3552,15 +3765,42 @@ class YuwAlertDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$n.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$n.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$n.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$n.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$n.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$n.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$n.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$n.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\" />\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content />\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$n.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$n.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$n.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$n.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$n.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$n.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$n.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$n.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-alert-dialog', imports: [...HlmAlertDialogImports, YuwButtonComponent, YuwAlertDialogTriggerDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\" />\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content />\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }] } });
 
+/**
+ * Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
+ *
+ * Two things scale, and both have to be written with the helm's own modifier prefixes so
+ * tailwind-merge displaces the helm class rather than leaving it standing:
+ *
+ * - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
+ *   orientation has a fixed height; the vertical one is `h-fit` and is left alone.
+ * - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
+ *   tight enough that a taller list would look cramped, and the triggers are separate components
+ *   with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
+ *   list.
+ */
+const yuwTabsSizeVariants = cva('', {
+    variants: {
+        size: {
+            default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
+            xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
+            sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
+            lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
 /**
  * Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
  * id of the tab it belongs to, matching an entry in the `tabs` input.
@@ -3597,6 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
  * - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
  *   programmatically; listen to `activeTabChange` to react to activations.
+ * - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
  * - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
  * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
  * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
@@ -3615,6 +3856,8 @@ class YuwTabsComponent {
         this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this._listClass = computed(() => yuwTabsSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
         this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
@@ -3623,14 +3866,14 @@ class YuwTabsComponent {
         this.activeTab.set(tabId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\"/>\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\"/>\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
-        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }] } });
 
 /**
  * Container directive for a single file attachment card.
@@ -3773,81 +4016,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }] });
 
 /**
- * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
- * mobile, and reads its colors from the `--sidebar-*` theme tokens.
- *
- * Place it inside a `[yuwSidebarWrapper]` alongside a `<main yuwSidebarInset>`, and compose its
- * inner structure with the `yuwSidebar*` directives. Open state is shared through
- * `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere in the page.
- *
- * Inputs:
- * - `side`: Edge the sidebar is docked to (`'left'`, `'right'`). Default is `'left'`.
- * - `variant`: Panel treatment (`'sidebar'` flush, `'floating'` card, `'inset'` inset page). Default is `'sidebar'`.
- * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
- * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
- * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
- *
- * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
- * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
- * `HlmSidebarGroupAction`.
- *
- * Usage:
- * ```html
- * <yuw-sidebar collapsible="icon">
- *   <div yuwSidebarHeader>Yurest</div>
- *   <div yuwSidebarContent>
- *     <ul yuwSidebarMenu>
- *       <li yuwSidebarMenuItem><a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a></li>
- *     </ul>
- *   </div>
- * </yuw-sidebar>
- * ```
- */
-class YuwSidebarComponent {
-    constructor() {
-        this.config = injectHlmSidebarConfig();
-        this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
-        this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
-        this.sidebarContainerClass = input('', ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content/>\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-sidebar', imports: [HlmSidebar], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content/>\n</hlm-sidebar>\n" }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }] } });
-
-/**
- * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
- * inside `<main yuwSidebarInset>`, since the open state lives in `YuwSidebarService`.
- *
- * Inputs:
- * - `label`: Screen-reader-only label for the button. User-facing text the consuming app is
- *   responsible for translating.
- *
- * Usage:
- * ```html
- * <yuw-sidebar-trigger label="Alternar menú" />
- * ```
+ * yukit-web's class layer for the sidebar menu button, applied on top of the helm
+ * `sidebarMenuButtonVariants()` output.
+ *
+ * Registered through the helm `classes()` utility from the `yuwSidebarMenuButton` directive, which
+ * runs *after* the helm directive's own registration on the same element. `classes()` merges its
+ * sources in registration order through `twMerge`, so each class here displaces the helm class of
+ * the same Tailwind group and modifier stack without needing `!important`.
+ *
+ * These live on the button rather than on `li[yuwSidebarMenuItem]` because every selector here
+ * resolves against the button's own box or subtree: the `<li>` is not the hovered control, never
+ * carries `aria-expanded`, and its `> span:last-child` is the `yuwSidebarMenuBadge`, not the label.
+ *
+ * Three details in the collapsed-to-icon block are load-bearing:
+ *
+ * - `size-auto!`, `w-full!` and `justify-center!` keep their `!` because the helm declarations they
+ *   replace (`size-8!`, `p-2!`) are themselves `!important`, which `twMerge` cannot outrank on
+ *   specificity alone. The helm pins the button to a square; ours fills the rail width and centres
+ *   the icon.
+ * - `[&>span:last-child]:hidden` drops the label while collapsed, leaving the icon alone — the
+ *   tooltip carries the name in that state.
+ * - `text-[length:--spacing(6)]` bumps the icon from the helm's 4 units to 6. The `length:` hint is
+ *   not optional: `text-[…]` is ambiguous between colour and size, and Tailwind resolves the bare
+ *   form as a colour, so the icon would never resize.
  */
-class YuwSidebarTriggerComponent {
-    constructor() {
-        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()\" 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()\" class=\"cursor-pointer\"></button>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+const yuwSidebarMenuButtonClass = [
+    'hover:bg-muted',
+    'hover:text-foreground',
+    'dark:hover:bg-muted/50',
+    'aria-expanded:bg-muted',
+    'aria-expanded:text-foreground',
+    'transition-all',
+    'group-data-[collapsible=icon]:size-auto!',
+    'group-data-[collapsible=icon]:w-full!',
+    'group-data-[collapsible=icon]:justify-center!',
+    'group-data-[collapsible=icon]:[&>span:last-child]:hidden',
+    'group-data-[collapsible=icon]:[&_ng-icon]:text-[length:--spacing(6)]',
+].join(' ');
 
 /**
  * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
@@ -3974,6 +4179,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarMenu],
                 }]
         }] });
+/**
+ * Marks projected markup that belongs *inside* the region `<yuw-sidebar>` renders from its `content`
+ * input, after the object-driven groups — a hand-written group alongside a data-driven nav.
+ *
+ * Only meaningful when `content` is set; without it the marker is inert and the element falls
+ * through to the default slot like any other projected node. Carries no styling of its own: it is a
+ * projection selector, and whatever it is applied to (usually a `[yuwSidebarGroup]`) keeps its own.
+ */
+class YuwSidebarContentExtraDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentExtraDirective, isStandalone: true, selector: "[yuwSidebarContentExtra]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarContentExtra]',
+                }]
+        }] });
+/** The `footer` counterpart of {@link YuwSidebarContentExtraDirective}. */
+class YuwSidebarFooterExtraDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFooterExtraDirective, isStandalone: true, selector: "[yuwSidebarFooterExtra]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarFooterExtra]',
+                }]
+        }] });
 /** A single entry of a sidebar menu. Apply to an `<li>`. */
 class YuwSidebarMenuItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3992,9 +4226,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *
  * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
  * alongside this directive — it comes from the underlying menu-button primitive and is only shown
- * in the collapsed state.
+ * in the collapsed state. It cannot be re-forwarded through this wrapper's `hostDirectives`
+ * (`tooltip` is the alias `HlmSidebarMenuButton` gives its own composed `BrnTooltip`, not a public
+ * input of its own), so bind it with `[attr.tooltip]` rather than `[tooltip]` when the value comes
+ * from an expression.
+ *
+ * Carries `yuwSidebarMenuButtonClass`, our hover/expanded colouring and collapsed-to-icon geometry.
+ * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, so our
+ * classes merge last and win — see `sidebar.variants.ts`.
  */
 class YuwSidebarMenuButtonDirective {
+    constructor() {
+        classes(() => yuwSidebarMenuButtonClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
@@ -4009,7 +4253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         },
                     ],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** Trailing count or status badge of a sidebar menu item. */
 class YuwSidebarMenuBadgeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4055,9 +4299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             type: Directive,
             args: [{
                     selector: 'a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]',
-                    hostDirectives: [
-                        { directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] },
-                    ],
+                    hostDirectives: [{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] }],
                 }]
         }] });
 /** Divider between sidebar sections. */
@@ -4107,6 +4349,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
+/**
+ * Renders one {@link YuwSidebarContentDto} as the group/menu/item tree.
+ *
+ * Internal to the library — it is not exported from `public-api.ts`, and consumers reach it through
+ * `<yuw-sidebar>`'s `content` and `footer` inputs. It exists as its own component because those two
+ * inputs need the identical tree; inlining it in `sidebar.component.html` would duplicate the whole
+ * block.
+ *
+ * The host is `display: contents`, so the groups it renders become direct children of whichever
+ * `[yuwSidebarContent]` / `[yuwSidebarFooter]` wrapper it sits inside. That is what keeps the
+ * `group-data-[collapsible=icon]:` selectors — which resolve against the sidebar root — working
+ * identically for object-rendered and hand-written markup.
+ */
+class YuwSidebarNavComponent {
+    constructor() {
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.itemClicked = output();
+        /**
+         * The groups, with each entry's derived render state resolved once.
+         *
+         * `routerLinkActiveOptions` has to be a stable object identity per entry: a literal in the
+         * template (`[routerLinkActiveOptions]="{exact: item.exact ?? false}"`) allocates a new object on
+         * every change-detection pass, which `RouterLinkActive` treats as a changed input and re-runs its
+         * subscription for. Precomputing it here also keeps the template free of the `?? false` fallback.
+         */
+        this._groups = computed(() => this.content().groups.map((group) => ({
+            ...group,
+            items: group.items.map((item) => ({
+                ...item,
+                tooltipText: item.tooltip ?? item.label,
+                activeOptions: { exact: item.exact ?? false },
+                children: (item.children ?? []).map((child) => ({
+                    ...child,
+                    activeOptions: { exact: child.exact ?? false },
+                })),
+            })),
+        })), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    }
+    onItemClick(id, event) {
+        this.itemClicked.emit({ id, event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>{{ group.label }}</div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"link.isActive || item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.children.length) {\n              <ul yuwSidebarMenuSub>\n                @for (child of item.children; track child.id) {\n                  <li yuwSidebarMenuSubItem>\n                    @if (child.route) {\n                      <a\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        [routerLink]=\"child.route\"\n                        routerLinkActive\n                        #childLink=\"routerLinkActive\"\n                        [routerLinkActiveOptions]=\"child.activeOptions\"\n                        [isActive]=\"childLink.isActive\"\n                        [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n                        [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                        [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </a>\n                    } @else if (child.href) {\n                      <a\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        [href]=\"child.href\"\n                        [attr.target]=\"child.target\"\n                        [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                        [class.pointer-events-none]=\"child.disabled\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </a>\n                    } @else {\n                      <button\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        type=\"button\"\n                        [disabled]=\"child.disabled ?? false\"\n                        (click)=\"onItemClick(child.id, $event)\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </button>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sidebar-nav', imports: [
+                        NgIcon,
+                        RouterLink,
+                        RouterLinkActive,
+                        YuwSidebarGroupDirective,
+                        YuwSidebarGroupLabelDirective,
+                        YuwSidebarGroupContentDirective,
+                        YuwSidebarMenuDirective,
+                        YuwSidebarMenuItemDirective,
+                        YuwSidebarMenuButtonDirective,
+                        YuwSidebarMenuBadgeDirective,
+                        YuwSidebarMenuSubDirective,
+                        YuwSidebarMenuSubItemDirective,
+                        YuwSidebarMenuSubButtonDirective,
+                        YuwSidebarSeparatorDirective,
+                    ], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>{{ group.label }}</div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"link.isActive || item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.children.length) {\n              <ul yuwSidebarMenuSub>\n                @for (child of item.children; track child.id) {\n                  <li yuwSidebarMenuSubItem>\n                    @if (child.route) {\n                      <a\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        [routerLink]=\"child.route\"\n                        routerLinkActive\n                        #childLink=\"routerLinkActive\"\n                        [routerLinkActiveOptions]=\"child.activeOptions\"\n                        [isActive]=\"childLink.isActive\"\n                        [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n                        [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                        [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </a>\n                    } @else if (child.href) {\n                      <a\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        [href]=\"child.href\"\n                        [attr.target]=\"child.target\"\n                        [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                        [class.pointer-events-none]=\"child.disabled\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </a>\n                    } @else {\n                      <button\n                        yuwSidebarMenuSubButton\n                        closeMobileSidebarOnClick\n                        type=\"button\"\n                        [disabled]=\"child.disabled ?? false\"\n                        (click)=\"onItemClick(child.id, $event)\"\n                      >\n                        <span>{{ child.label }}</span>\n                      </button>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
+/**
+ * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
+ * mobile, and reads its colors from the `--sidebar-*` theme tokens.
+ *
+ * Place it inside a `[yuwSidebarWrapper]` alongside a `<main yuwSidebarInset>`, and compose its
+ * inner structure with the `yuwSidebar*` directives. Open state is shared through
+ * `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere in the page.
+ *
+ * Inputs:
+ * - `side`: Edge the sidebar is docked to (`'left'`, `'right'`). Default is `'left'`.
+ * - `variant`: Panel treatment (`'sidebar'` flush, `'floating'` card, `'inset'` inset page). Default is `'sidebar'`.
+ * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
+ * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
+ * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
+ * - `content`: Renders the scrollable nav from a `YuwSidebarContentDto` instead of hand-written
+ *   markup. Groups → items → optional one level of children. An item with a `route` becomes a
+ *   `[routerLink]` anchor whose active state, `aria-current` and pointer-lock resolve automatically
+ *   from `routerLinkActive`; one with an `href` becomes a plain anchor; one with neither becomes a
+ *   button that reports through `itemClicked`.
+ * - `footer`: The same, rendered into the footer region.
+ *
+ * Outputs:
+ * - `itemClicked`: Emits `{id, event}` when a non-navigating entry (no `route`, no `href`) is
+ *   activated, in either `content` or `footer`.
+ *
+ * The two forms compose rather than exclude each other, unlike `<yuw-button>`'s `buttons` input
+ * which drops projected content when set. `content`/`footer` render their own region; anything
+ * projected still renders, so a data-driven nav can sit alongside a hand-written block. To place
+ * extra markup *inside* the object-rendered regions — where it scrolls with the nav and inherits the
+ * content area's flex sizing — mark it `[yuwSidebarContentExtra]` or `[yuwSidebarFooterExtra]`; the
+ * default slot keeps everything else, so existing projection-only usage is unaffected.
+ *
+ * `header` has no object form: it is a free-form branding area with no repeating structure to model.
+ *
+ * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
+ * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
+ * `HlmSidebarGroupAction`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sidebar collapsible="icon">
+ *   <div yuwSidebarHeader>Yurest</div>
+ *   <div yuwSidebarContent>
+ *     <ul yuwSidebarMenu>
+ *       <li yuwSidebarMenuItem><a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a></li>
+ *     </ul>
+ *   </div>
+ * </yuw-sidebar>
+ * ```
+ *
+ * Object form:
+ * ```html
+ * <yuw-sidebar collapsible="icon" [content]="nav" [footer]="footerNav"
+ *              (itemClicked)="onAction($event.id)">
+ *   <div yuwSidebarHeader>Yurest</div>
+ * </yuw-sidebar>
+ * ```
+ * ```ts
+ * nav: YuwSidebarContentDto = {
+ *   groups: [{
+ *     id: 'management',
+ *     label: 'Gestión',
+ *     items: [
+ *       {id: 'orders', label: 'Pedidos', icon: 'lucideReceipt', route: '/orders', badge: '12'},
+ *       {id: 'reports', label: 'Informes', icon: 'lucideChartLine', children: [
+ *         {id: 'sales', label: 'Ventas', route: '/reports/sales'},
+ *       ]},
+ *       {id: 'sync', label: 'Sincronizar'},
+ *     ],
+ *   }],
+ * };
+ * ```
+ */
+class YuwSidebarComponent {
+    constructor() {
+        this.config = injectHlmSidebarConfig();
+        this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
+        this.sidebarContainerClass = input('', ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
+        this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.footer = input(undefined, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+        this.itemClicked = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sidebar', imports: [
+                        HlmSidebar,
+                        YuwSidebarNavComponent,
+                        YuwSidebarContentDirective,
+                        YuwSidebarFooterDirective,
+                        YuwSidebarSeparatorDirective,
+                    ], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n" }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
+/**
+ * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
+ * inside `<main yuwSidebarInset>`, since the open state lives in `YuwSidebarService`.
+ *
+ * Inputs:
+ * - `label`: Screen-reader-only label for the button. User-facing text the consuming app is
+ *   responsible for translating.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sidebar-trigger label="Alternar menú" />
+ * ```
+ */
+class YuwSidebarTriggerComponent {
+    constructor() {
+        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()\" 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()\" class=\"cursor-pointer\"></button>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+
 /*
  * Public API Surface of yukit-web
  */
@@ -4115,5 +4551,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map