yukit-web 0.0.3 → 0.0.4

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, input, inject, TemplateRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, ElementRef, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
+import { forwardRef, signal, Directive, input, inject, TemplateRef, ElementRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
@@ -10,7 +10,7 @@ import * as i2 from 'yukit-web/helm/dropdown-menu';
 import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
 import { cva } from 'class-variance-authority';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$1 from 'yukit-web/helm/breadcrumb';
@@ -246,13 +246,17 @@ const yuwButtonVariants = cva('', {
             true: 'border-transparent bg-transparent text-foreground hover:bg-transparent aria-expanded:bg-transparent aria-expanded:text-foreground dark:border-transparent dark:bg-transparent dark:hover:bg-transparent [a]:hover:bg-transparent',
             false: '',
         },
+        animationDisabled: {
+            true: 'active:translate-y-0!',
+            false: '',
+        }
     },
     defaultVariants: {
         variant: 'default',
         transparent: false,
     },
 });
-const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
+const yuwButtonGroupTextClass = 'bg-transparent text-foreground border-border dark:border-input';
 
 /**
  * Button component supporting single action button or grouped button options.
@@ -304,6 +308,7 @@ const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
  */
 class YuwButtonComponent {
     constructor() {
+        this._host = inject(ElementRef);
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -317,18 +322,16 @@ class YuwButtonComponent {
         this.buttons = input(undefined, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.groupAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * Consumer CSS classes for the inner button/anchor (single and link mode). Merged last with
-         * `cn`, so they win over the component's own variant/transparent classes.
-         */
+        this.animationDisabled = input(false, ...(ngDevMode ? [{ debugName: "animationDisabled" }] : /* istanbul ignore next */ []));
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.clicked = output();
         this.buttonClicked = output();
         this._textClass = yuwButtonGroupTextClass;
         this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
+        this._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() }), 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.
@@ -353,7 +356,7 @@ class YuwButtonComponent {
                     color: entry.color ?? this.color(),
                     disabled: entry.disabled ?? false,
                     type: entry.type ?? 'button',
-                    class: yuwButtonVariants({ variant, transparent }),
+                    class: yuwButtonVariants({ variant, transparent, animationDisabled: this._animationDisabled() }),
                 };
             });
         }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
@@ -371,7 +374,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 }, 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\n      } @else if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmButtonGroupText, selector: "[hlmButtonGroupText],hlm-button-group-text" }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
@@ -380,7 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         '[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" }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], _texts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupTextDirective), { isSignal: true }] }] } });
+        }], 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. */
 const REMOVE_TEXT_CLASS = {
@@ -420,7 +423,7 @@ 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", "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 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, decorators: [{
             type: Component,
@@ -1026,6 +1029,28 @@ const searchInputFieldVariants = cva('', {
         collapsible: false,
     },
 });
+/**
+ * Class map for the input group shell.
+ *
+ * `transparent` strips the helm's resting border and background. Each helm class is countered in
+ * the same variant prefix it was declared with (`dark:`, and the `has-[…:disabled]:` stack), because
+ * tailwind-merge resolves conflicts per prefix and a bare `bg-transparent` would leave the
+ * prefixed helm declarations standing.
+ *
+ * The focus ring and the invalid-state ring are deliberately left in place: they are feedback, not
+ * chrome, and a transparent field still has to show where focus is and when it is invalid.
+ */
+const searchInputGroupVariants = cva('', {
+    variants: {
+        transparent: {
+            true: 'border-transparent bg-transparent dark:bg-transparent has-[[data-slot=input-group-control]:disabled]:bg-transparent dark:has-[[data-slot=input-group-control]:disabled]:bg-transparent',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        transparent: false,
+    },
+});
 
 /** Module-level counter backing each instance's stable fallback `id`. */
 let nextYuwSearchInputId = 0;
@@ -1052,6 +1077,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.
+ * - `transparent`: Removes the field's resting border and background so it sits directly on its
+ *   container — for search inside a toolbar or a colored surface. The focus and invalid rings stay.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -1097,6 +1124,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.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 */ []));
         this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
@@ -1105,7 +1133,7 @@ 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(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(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 */ []));
@@ -1172,14 +1200,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 }, 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 }, 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 }); }
 }
 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 }] }], 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"] }] } });
+        }], 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"] }] } });
 
 /** 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"
@@ -2406,7 +2434,82 @@ const YuwTableImports = [
     YuwCaptionDirective,
 ];
 
+/**
+ * Class maps for `yuw-datatable`, layered on top of the Hlm table directives' own classes.
+ *
+ * `DATATABLE_ALIGN_CLASS` is keyed by a column's `meta.align` and shared by header and body cells,
+ * so a column declares its alignment once and both honour it; `start` maps to an empty string
+ * rather than re-stating what `HlmTh`/`HlmTd` already apply.
+ *
+ * The `appearance` maps are split per element because the treatment is not uniform: `card` frames
+ * the container so the header tint clips to the radius instead of squaring off against a
+ * consumer's wrapper, then drops the header's bottom border, since a rule underneath a filled
+ * strip reads as a seam. `default` resolves to an empty string throughout, leaving a table that
+ * does not opt in byte-identical to what the Hlm directives render alone.
+ */
+const DATATABLE_ALIGN_CLASS = {
+    start: '',
+    center: 'text-center',
+    end: 'text-end',
+};
+const datatableContainerVariants = cva('', {
+    variants: {
+        appearance: {
+            default: '',
+            card: 'overflow-hidden rounded-(--radius-container-sm) border bg-(--neutrals-surface)',
+        },
+    },
+    defaultVariants: {
+        appearance: 'default',
+    },
+});
+const datatableHeadVariants = cva('', {
+    variants: {
+        appearance: {
+            default: '',
+            card: 'bg-(--neutrals-background) [&_tr]:border-b-0',
+        },
+    },
+    defaultVariants: {
+        appearance: 'default',
+    },
+});
+const datatableHeaderCellVariants = cva('', {
+    variants: {
+        appearance: {
+            default: '',
+            card: 'h-12 px-4 text-xs font-normal tracking-wider uppercase text-(--neutrals-element-mid)',
+        },
+    },
+    defaultVariants: {
+        appearance: 'default',
+    },
+});
+const datatableCellVariants = cva('', {
+    variants: {
+        appearance: {
+            default: '',
+            card: 'h-16 px-4',
+        },
+    },
+    defaultVariants: {
+        appearance: 'default',
+    },
+});
+const datatableRowVariants = cva('', {
+    variants: {
+        appearance: {
+            default: '',
+            card: 'border-(--neutrals-outline)',
+        },
+    },
+    defaultVariants: {
+        appearance: 'default',
+    },
+});
+
 const YUW_DATATABLE_FEATURES = {
+    columnMeta: {},
     columnFilteringFeature,
     columnVisibilityFeature,
     rowPaginationFeature,
@@ -2443,6 +2546,15 @@ const YUW_DATATABLE_FEATURES = {
  *   responsible for translating; when absent, no caption is rendered.
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
  *   `display: contents`, so a plain `class` on `<yuw-datatable>` would never reach the table.
+ * - `appearance`: Visual treatment (`YuwDatatableAppearanceDto`). Default is `'default'` —
+ *   Spartan's plain table. `'card'` frames the table in its own rounded bordered surface with a
+ *   tinted uppercase header strip and taller rows; the consumer needs no wrapper of its own.
+ *
+ * Per-column, through TanStack's `meta`:
+ * - `meta.align`: `'start' | 'center' | 'end'`, applied to both the header and body cells of that
+ *   column. Default is `'start'`. Alignment and the appearance's own cell classes are resolved
+ *   once into a per-column-id lookup rather than in the template, because a template method would
+ *   re-run the class merge for every cell on every change-detection pass.
  * - `sorting`: Two-way sorting state (`SortingState`).
  * - `columnFilters`: Two-way column filters state (`ColumnFiltersState`).
  * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
@@ -2459,6 +2571,7 @@ const YUW_DATATABLE_FEATURES = {
  *   [columns]="columns"
  *   [data]="users"
  *   [(sorting)]="sorting"
+ *   appearance="card"
  *   paginated
  *   selectable
  *   previousPageLabel="Página anterior"
@@ -2466,6 +2579,13 @@ const YUW_DATATABLE_FEATURES = {
  *   (selectedRowsChange)="onSelect($event)"
  * />
  * ```
+ *
+ * ```ts
+ * const columns: YuwDatatableColumnDef<Client>[] = [
+ *   { accessorKey: 'name', header: 'Nombre' },
+ *   { accessorKey: 'cif', header: 'CIF', meta: { align: 'center' } },
+ * ];
+ * ```
  */
 class YuwDatatableComponent {
     constructor() {
@@ -2483,6 +2603,7 @@ class YuwDatatableComponent {
         this.paginationAriaLabel = input.required(...(ngDevMode ? [{ debugName: "paginationAriaLabel" }] : /* istanbul ignore next */ []));
         this.caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
         this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
+        this.appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
         this.columnFilters = model([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
         this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
@@ -2526,10 +2647,29 @@ class YuwDatatableComponent {
         this._columnCount = computed(() => this.table.getVisibleLeafColumns().length, ...(ngDevMode ? [{ debugName: "_columnCount" }] : /* istanbul ignore next */ []));
         this._skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_skeletonRows" }] : /* istanbul ignore next */ []));
         this._tableClass = computed(() => cn(this.tableClass()), ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
+        this._containerClass = computed(() => datatableContainerVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+        this._headClass = computed(() => datatableHeadVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_headClass" }] : /* istanbul ignore next */ []));
+        this._rowClass = computed(() => datatableRowVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_rowClass" }] : /* istanbul ignore next */ []));
+        this._cellClasses = computed(() => {
+            const header = datatableHeaderCellVariants({ appearance: this.appearance() });
+            const cell = datatableCellVariants({ appearance: this.appearance() });
+            return new Map(this.columns().map((column, index) => {
+                const align = DATATABLE_ALIGN_CLASS[column.meta?.align ?? 'start'];
+                return [
+                    column.id ?? ('accessorKey' in column ? String(column.accessorKey) : String(index)),
+                    { header: cn(header, align), cell: cn(cell, align) },
+                ];
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_cellClasses" }] : /* istanbul ignore next */ []));
         this._ariaSort = {
             asc: 'ascending',
             desc: 'descending',
         };
+        this._sortIcon = {
+            asc: 'lucideChevronUp',
+            desc: 'lucideChevronDown',
+            none: 'lucideChevronsUpDown',
+        };
     }
     /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
     onPageChange(page) {
@@ -2554,14 +2694,14 @@ class YuwDatatableComponent {
         this.table.setOptions((previous) => ({ ...previous, ...options }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 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], host: {
+            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+                    }, 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" }]
+        }], 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"] }] } });
 
 /**
  * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
@@ -2868,7 +3008,7 @@ 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", "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,
@@ -2955,7 +3095,7 @@ 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", "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 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
@@ -3305,7 +3445,7 @@ 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", "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 *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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, decorators: [{
             type: Component,
@@ -3412,7 +3552,7 @@ 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", "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,
@@ -3975,5 +4115,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+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 };
 //# sourceMappingURL=yukit-web.mjs.map