yukit-web 0.0.15 → 0.0.17

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, inject, ElementRef, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, model, viewChild, contentChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, runInInjectionContext, DestroyRef } from '@angular/core';
+import { input, Directive, forwardRef, signal, inject, ElementRef, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, model, viewChild, contentChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, runInInjectionContext, DestroyRef } from '@angular/core';
+import { classes, hlm } from 'yukit-web/helm/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
 import * as i2 from 'yukit-web/helm/dropdown-menu';
@@ -63,7 +64,6 @@ import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 import * as i1$j from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
-import { hlm, classes } from 'yukit-web/helm/utils';
 import { HlmSpinner } from 'yukit-web/helm/spinner';
 import { HlmToaster } from 'yukit-web/helm/sonner';
 export { toast as yuwToast } from '@spartan-ng/brain/sonner';
@@ -86,6 +86,8 @@ import { HlmSidebarService, provideHlmSidebarConfig, HlmSidebarWrapper, HlmSideb
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 import { Router, isActive, RouterLink, RouterLinkActive } from '@angular/router';
 import { OverlayContainer } from '@angular/cdk/overlay';
+import * as i1$r from 'yukit-web/helm/command';
+import { HlmCommandImports, HlmCommandDialog } from 'yukit-web/helm/command';
 
 /**
  * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
@@ -99,6 +101,45 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
+/**
+ * Applies dynamic classes to an element that is also styled by a helm directive.
+ *
+ * @remarks
+ * The helm layer owns the `class` attribute through its `classes()` utility, which keeps a
+ * registry of *sources* per element and rewrites the attribute whenever any of them changes. It
+ * also watches the attribute with a `MutationObserver` and treats every write it did not make
+ * itself as consumer-authored *base* classes, which it merges **last** so they win.
+ *
+ * An Angular `[class]` binding on the same element is exactly such a foreign write, so the first
+ * value it emits is captured as a base class and then beats every value the binding emits
+ * afterwards — the element is pinned to whatever it rendered with. Because `hlm()` merges through
+ * `twMerge`, only classes of the same Tailwind group are pinned, which is why a dynamic `size`
+ * (`h-10` vs `h-11`) freezes while an unrelated `class` input still appears to work.
+ *
+ * Binding `[yuwClass]` instead registers the value as a regular `classes()` source: it is
+ * replaceable on every change, and still merges after the helm directive's own variants, so it
+ * keeps the precedence a `[class]` binding had.
+ *
+ * @example
+ * ```html
+ * <button hlmBtn [size]="size()" [yuwClass]="_btnClass()">Save</button>
+ * ```
+ */
+class YuwClassDirective {
+    constructor() {
+        this.yuwClass = input('', ...(ngDevMode ? [{ debugName: "yuwClass" }] : /* istanbul ignore next */ []));
+        classes(() => this.yuwClass());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwClassDirective, isStandalone: true, selector: "[yuwClass]", inputs: { yuwClass: { classPropertyName: "yuwClass", publicName: "yuwClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwClass]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { yuwClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwClass", required: false }] }] } });
+
 /**
  * Registers a component as a form control, so `formControlName`/`formControl`/`ngModel` bind to it.
  *
@@ -233,7 +274,10 @@ const yuwButtonVariants = cva('', {
  * Outputs:
  * - `clicked`: Emits MouseEvent on click.
  *
- * `_btnClass` merges our variant layer with the consumer's `class`, which goes last so it wins.
+ * `_btnClass` merges our variant layer with the consumer's `class`, which goes last so it wins. It
+ * reaches the inner element through `[yuwClass]` rather than `[class]`: the helm layer owns the
+ * `class` attribute and treats a foreign write as consumer-authored base classes that it merges
+ * last, which would pin the first rendered value and stop `size` from ever changing again.
  *
  * The host carries `inline-flex` so it is a real box rather than an inline one: an overlay trigger
  * directive composed onto `<yuw-button>` (see `YuwPopoverTriggerDirective`) anchors its panel to the
@@ -278,16 +322,16 @@ class YuwButtonComponent {
         this.clicked.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()", "attr.data-yuw-variant": "_effectiveVariant()" }, classAttribute: "inline-flex" }, ngImport: i0, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { 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.22", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()", "attr.data-yuw-variant": "_effectiveVariant()" }, classAttribute: "inline-flex" }, ngImport: i0, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "directive", type: YuwClassDirective, selector: "[yuwClass]", inputs: ["yuwClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-button', imports: [HlmButton, HlmDropdownMenuTrigger], host: {
+            args: [{ selector: 'yuw-button', imports: [HlmButton, HlmDropdownMenuTrigger, YuwClassDirective], host: {
                         class: 'inline-flex',
                         '[class.cursor-not-allowed]': 'disabled()',
                         '[attr.data-yuw-color]': 'color()',
                         '[attr.data-yuw-variant]': '_effectiveVariant()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n" }]
         }], propDecorators: { animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -1303,22 +1347,22 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._expandButtonClasses = computed(() => searchInputExpandButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_expandButtonClasses" }] : /* istanbul ignore next */ []));
-        this._expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
         this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
         this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible(), size: this.size() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
         this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
             this.value().length > 0 &&
-            this._expanded() &&
+            this.expanded() &&
             !this._disabled() &&
             !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
-        this._showExpandButton = computed(() => !this._expanded() && !this._disabled(), ...(ngDevMode ? [{ debugName: "_showExpandButton" }] : /* istanbul ignore next */ []));
+        this._showExpandButton = computed(() => !this.expanded() && !this._disabled(), ...(ngDevMode ? [{ debugName: "_showExpandButton" }] : /* istanbul ignore next */ []));
         this._wrapperClasses = computed(() => searchInputCollapsibleVariants({
             collapseFrom: this.collapseFrom(),
-            expanded: this._expanded(),
+            expanded: this.expanded(),
             size: this.size(),
         }), ...(ngDevMode ? [{ debugName: "_wrapperClasses" }] : /* istanbul ignore next */ []));
-        this._wrapperMaxWidth = computed(() => (this._expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
+        this._wrapperMaxWidth = computed(() => (this.expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
         return '';
@@ -1372,13 +1416,13 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.searched.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          [class]=\"_expandButtonClasses()\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\" />\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\" />\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          [class]=\"_expandButtonClasses()\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\" />\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\" />\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"expanded() ? null : -1\"\n      [attr.aria-hidden]=\"expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", 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]=\"_expandButtonClasses()\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\" />\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\" />\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          [class]=\"_expandButtonClasses()\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\" />\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\" />\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"expanded() ? null : -1\"\n      [attr.aria-hidden]=\"expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n" }]
         }], propDecorators: { _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
@@ -3392,6 +3436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
  *   over the library defaults via `twMerge`.
  * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
+ *   `'secondary'`.
  * - `triggerSize`: Button size for the trigger button.
  * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
  *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
@@ -3420,6 +3466,7 @@ class YuwPopoverComponent {
         this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
         this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('secondary', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
         this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
@@ -3429,14 +3476,14 @@ class YuwPopoverComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", 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 }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { 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.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", 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 }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 
 /**
  * Tooltip directive applied directly to the element that should show a hint on hover/focus.
@@ -4163,6 +4210,35 @@ const yuwSidebarMenuButtonClass = `
   group-data-[yuw-rail=on]:[&>span]:hidden
   group-data-[yuw-rail=on]:[&_ng-icon]:scale-125
 `;
+/**
+ * Geometry of an entry whose leading slot is a 40px avatar rather than a 16px icon. Appended to
+ * {@link yuwSidebarMenuButtonClass}, and every declaration here exists because that class and the
+ * helm beneath it are both dimensioned for the icon.
+ *
+ * `h-auto` is the load-bearing one. The helm pins a menu button to `h-8`, and the button is
+ * `overflow-hidden`, so a 40px avatar inside a 32px box is clipped top and bottom rather than
+ * enlarging the row — which is the whole point of an avatar entry. Releasing the height lets the
+ * avatar and the padding decide it, so the row is taller than an icon row by exactly the difference
+ * between the two.
+ *
+ * The collapsed padding is re-stated for the mirror-image reason: `yuwSidebarMenuButtonClass` pads the
+ * collapsed button to `py-[20px]` so a 16px icon lands on the rail's rhythm, and an avatar already
+ * stands 40px tall, so inheriting that would make the row 80px. `px-0` lets the avatar use the full
+ * width the item's own padding leaves it, centring it on the same axis as every icon above and below.
+ *
+ * The `!` on each is needed for the reason the class this extends documents — the helm's `size-8!` and
+ * `p-2!` are themselves `!important`, which `twMerge` cannot outrank on order alone. The expanded
+ * `h-auto` needs none: the helm's own `h-8` there is a plain variant class, so merge order settles it.
+ *
+ * Nothing here touches the icon rules of that class: an avatar entry renders no `ng-icon` in the
+ * leading slot, so `scale-125` has nothing to scale, and the trailing chevron is the one element it
+ * would otherwise reach — which is why the chevron pins its own size with `text-[length:…]!`.
+ */
+const yuwSidebarMenuAvatarButtonClass = `
+  h-auto
+  group-data-[collapsible=icon]:py-2!
+  group-data-[collapsible=icon]:px-0!
+`;
 const yuwSidebarMenuChevronClass = `
   ms-auto
   shrink-0
@@ -4223,7 +4299,7 @@ const yuwSidebarContentClass = `
   overflow-y-auto
   group-data-[collapsible=icon]:overflow-y-auto!
   group-data-[collapsible=icon]:overflow-x-hidden
-  group-data-[yuw-rail=on]:gap-1
+  group-data-[yuw-rail=on]:gap-0!
 `;
 const yuwSidebarGroupLabelClass = `
   group-data-[collapsible=icon]:mt-0!
@@ -4234,7 +4310,7 @@ const yuwSidebarGroupLabelClass = `
   motion-reduce:transition-none
   group-data-[yuw-rail=on]:hidden
 `;
-const yuwSidebarGroupClass = 'group-data-[yuw-rail=on]:p-0';
+const yuwSidebarGroupClass = 'p-3 group-data-[yuw-rail=on]:p-0';
 const yuwSidebarFooterClass = 'group-data-[yuw-rail=on]:p-0';
 const yuwSidebarSubmenuWrapperClass = `
   grid
@@ -4265,7 +4341,7 @@ const yuwSidebarMenuClass = `
   gap-2
   group-data-[yuw-rail=on]:gap-0
 `;
-const yuwSidebarMenuItemClass = 'group-data-[yuw-rail=on]:p-[11px]';
+const yuwSidebarMenuItemClass = 'group-data-[yuw-rail=on]:p-3';
 const yuwSidebarMenuSubButtonClass = `
   [&>span]:truncate
   [&>span]:min-w-0
@@ -4636,6 +4712,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ],
                 }]
         }], ctorParameters: () => [] });
+/**
+ * Applied alongside `[yuwSidebarMenuButton]` on an entry whose leading slot is a 40px avatar rather
+ * than a 16px icon, carrying {@link yuwSidebarMenuAvatarButtonClass}.
+ *
+ * A directive rather than a `[class]` binding on the button, because a binding cannot win this
+ * merge. `classes()` (helm/utils) applies its registered *sources* in registration order and then
+ * appends the element's `baseClasses` — captured from the static `class` host attribute — last. An
+ * Angular `[class]` binding is neither: it writes the `class` attribute directly, races the
+ * `className` assignment `classes()` makes for its own sources, and is reclassified by the library's
+ * MutationObserver only after the fact. The observed result was the helm's `h-8` surviving and the
+ * override being dropped, leaving the 40px avatar clipped inside a 32px `overflow-hidden` button.
+ * Registering as another source puts this class after both the helm's and
+ * `[yuwSidebarMenuButton]`'s, which is the ordering `twMerge` needs to displace them.
+ *
+ * Separate from `[yuwSidebarMenuButton]` rather than an input on it, because the two are not the same
+ * role: this is the geometry of one kind of entry, and an entry either leads with an avatar or it does
+ * not. Hand-written markup applies it bare (`<a yuwSidebarMenuButton yuwSidebarMenuAvatarButton>`)
+ * next to its own `<yuw-avatar>`.
+ *
+ * It carries a value because `YuwSidebarNavComponent` renders every entry through the same three
+ * branches and cannot attach a directive conditionally — an attribute selector matches on presence, so
+ * the nav applies it to every entry and passes whether that entry actually has an avatar. Its default
+ * is `true` so the bare, hand-written form needs no value.
+ */
+class YuwSidebarMenuAvatarButtonDirective {
+    constructor() {
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'yuwSidebarMenuAvatarButton', transform: booleanAttribute });
+        classes(() => (this.enabled() ? yuwSidebarMenuAvatarButtonClass : ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuAvatarButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwSidebarMenuAvatarButtonDirective, isStandalone: true, selector: "[yuwSidebarMenuAvatarButton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "yuwSidebarMenuAvatarButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuAvatarButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarMenuAvatarButton]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwSidebarMenuAvatarButton", required: false }] }] } });
 /** Trailing count or status badge of a sidebar menu item. */
 class YuwSidebarMenuBadgeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4840,6 +4954,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * is all it does and it stays out of `itemClicked`, since opening a submenu is not an action for the
  * consumer to handle.
  *
+ * An entry's leading slot — an `avatar` when it has one, otherwise its `icon` — is rendered from one
+ * `#leading` template rather than repeated in each of the `route` / `href` / `<button>` branches, so
+ * the avatar-over-icon precedence is stated once and the three branches cannot drift apart on it. The
+ * avatar is fixed at `<yuw-avatar>`'s `lg` size: it is the rail's own geometry (a 78px width, 12px of
+ * item padding) that decides how large an image fits there, so exposing the size per entry would let a
+ * consumer produce a row that overflows the rail. That entry's geometry then comes from
+ * `[yuwSidebarMenuAvatarButton]`, which every branch applies unconditionally and hands the entry's own
+ * `hasAvatar` — an attribute selector matches on presence, so the choice has to travel as a value
+ * rather than by attaching the directive only where it is wanted.
+ *
  * The chevron marking an expandable entry rotates off that same `aria-expanded`, read from the
  * button through the `group/menu-button` the helm already declares on every menu button. Its
  * `yuwSidebarMenuChevronClass` hides it with `hidden!` in the collapsed state, and that `!` is
@@ -4929,6 +5053,7 @@ class YuwSidebarNavComponent {
                         ...item,
                         children,
                         hasChildren,
+                        hasAvatar: item.avatar !== undefined,
                         tooltipText: item.tooltip ?? item.label,
                         activeOptions: { exact: item.exact ?? false },
                         holdsActiveChild: hasChildren && this.holdsActiveRoute(item.children),
@@ -4974,13 +5099,14 @@ class YuwSidebarNavComponent {
         return signal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #leading let-item>\n  @if (item.avatar; as avatar) {\n    <yuw-avatar size=\"lg\" [src]=\"avatar.src\" [alt]=\"avatar.alt\" [fallback]=\"avatar.fallback\" />\n  } @else if (item.icon) {\n    <ng-icon [name]=\"item.icon\" />\n  }\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuAvatarButtonDirective, selector: "[yuwSidebarMenuAvatarButton]", inputs: ["yuwSidebarMenuAvatarButton"] }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar-nav', imports: [
                         NgIcon,
                         NgTemplateOutlet,
+                        YuwAvatarComponent,
                         RouterLink,
                         RouterLinkActive,
                         YuwSidebarGroupDirective,
@@ -4989,6 +5115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSidebarMenuDirective,
                         YuwSidebarMenuItemDirective,
                         YuwSidebarMenuButtonDirective,
+                        YuwSidebarMenuAvatarButtonDirective,
                         HlmSidebarMenuButton,
                         YuwSidebarMenuBadgeDirective,
                         YuwSidebarMenuSubDirective,
@@ -4997,7 +5124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSidebarSeparatorDirective,
                     ], providers: [provideIcons({ lucideChevronRight })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #leading let-item>\n  @if (item.avatar; as avatar) {\n    <yuw-avatar size=\"lg\" [src]=\"avatar.src\" [alt]=\"avatar.alt\" [fallback]=\"avatar.fallback\" />\n  } @else if (item.icon) {\n    <ng-icon [name]=\"item.icon\" />\n  }\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
         }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /**
@@ -5110,7 +5237,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   button that reports through `itemClicked`. An item with `children` gets a submenu that follows
  *   the sidebar's own state: an accordion while the panel is open, and a sheet sliding out beside the
  *   rail once it is collapsed to icons, so nested entries stay reachable there. Its `expanded`
- *   field seeds the accordion; the item holding the active route opens on its own.
+ *   field seeds the accordion; the item holding the active route opens on its own. An item may lead
+ *   with an `avatar` instead of an `icon` — a user account or a venue — which renders at 40px and
+ *   makes that row taller than an icon row in both states, and combines with `children` like any
+ *   other entry.
  * - `footer`: The same, rendered into the footer region.
  *
  * Outputs:
@@ -5240,6 +5370,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 
+/** Default match used by both `<yuw-command>` and `<yuw-command-dialog>`, mirroring brain's own
+ * case-insensitive substring filter. Exported so the dialog forwards one shared default rather
+ * than declaring a second one that could drift. */
+const yuwCommandDefaultFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase());
+/**
+ * Searchable command palette rendering groups of runnable entries.
+ *
+ * Entries come from the `groups` input — no per-entry directives to declare — and are filtered as
+ * the user types. Choosing one runs its own `action` when it has one and always emits
+ * `commandSelected`, so an entry needing wider context than a bare callback is handled by the
+ * parent instead.
+ *
+ * Inputs / Models:
+ * - `groups`: Required entry definitions (`YuwCommandGroupDto[]`), rendered in order. A palette
+ *   with no headings is one group with no `label`.
+ * - `search`: Two-way filter query. Emits `searchChange` as the user types; set it to filter
+ *   programmatically or to reset the palette after running something.
+ * - `disabled`: Blocks the whole palette.
+ * - `filter`: Match predicate `(searchText, query) => boolean`. Defaults to a case-insensitive
+ *   substring match; replace it for fuzzy or accent-insensitive matching. It receives an entry's
+ *   `searchText` (or its `label`), never its `id`.
+ * - `color`: Token palette applied to the subtree via `data-yuw-color`.
+ * - `emptyText`: Message shown when the query matches nothing. User-facing text — the consuming
+ *   app is responsible for providing it translated.
+ * - `searchPlaceholder`: Placeholder of the search field. Same translation contract.
+ * - `class`: Merged onto the palette surface, so a consumer can size it without forking.
+ *
+ * Outputs:
+ * - `commandSelected`: Emits the chosen `YuwCommandItemDto` for every selection, whether or not it
+ *   carried an `action`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-command
+ *   [groups]="groups"
+ *   [(search)]="query"
+ *   emptyText="No results found."
+ *   searchPlaceholder="Type a command…"
+ *   (commandSelected)="run($event)"
+ * />
+ * ```
+ */
+class YuwCommandComponent {
+    constructor() {
+        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.filter = input(yuwCommandDefaultFilter, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.commandSelected = output();
+        /** Brain matches its filter against each item's `value`, so `value` carries the searchable text
+         * while `id` stays the identity — precomputed here so the template neither calls a method nor
+         * rebuilds the string on every change-detection pass. */
+        this._groups = computed(() => this.groups().map((group) => ({
+            ...group,
+            items: group.items.map((item) => ({ item, searchValue: item.searchText ?? item.label })),
+        })), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    }
+    onSelected(item) {
+        item.action?.();
+        this.commandSelected.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwCommandComponent, isStandalone: true, selector: "yuw-command", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", commandSelected: "commandSelected" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, ngImport: i0, template: "<div hlmCommand [class]=\"userClass()\" [disabled]=\"disabled()\" [filter]=\"filter()\" [(search)]=\"search\">\n  <hlm-command-input [placeholder]=\"searchPlaceholder() ?? ''\" />\n\n  <div hlmCommandList>\n    @for (group of _groups(); track group.id; let first = $first) {\n      @if (!first) {\n        <div hlmCommandSeparator></div>\n      }\n\n      <div hlmCommandGroup>\n        @if (group.label; as label) {\n          <span hlmCommandGroupLabel>{{ label }}</span>\n        }\n\n        @for (entry of group.items; track entry.item.id) {\n          <button\n            hlmCommandItem\n            [value]=\"entry.searchValue\"\n            [disabled]=\"entry.item.disabled ?? false\"\n            (selected)=\"onSelected(entry.item)\"\n          >\n            @if (entry.item.icon; as icon) {\n              <ng-icon [name]=\"icon\" aria-hidden=\"true\" />\n            }\n            {{ entry.item.label }}\n            @if (entry.item.shortcut; as shortcut) {\n              <span hlmCommandShortcut>{{ shortcut }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <div hlmCommandEmpty *hlmCommandEmptyState>{{ emptyText() ?? '' }}</div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$r.HlmCommand, selector: "[hlmCommand],hlm-command" }, { kind: "directive", type: i1$r.HlmCommandEmpty, selector: "[hlmCommandEmpty]" }, { kind: "directive", type: i1$r.HlmCommandEmptyState, selector: "[hlmCommandEmptyState]" }, { kind: "directive", type: i1$r.HlmCommandGroup, selector: "[hlmCommandGroup],hlm-command-group" }, { kind: "directive", type: i1$r.HlmCommandGroupLabel, selector: "[hlmCommandGroupLabel],hlm-command-group-label" }, { kind: "component", type: i1$r.HlmCommandInput, selector: "hlm-command-input", inputs: ["inputId", "placeholder"] }, { kind: "directive", type: i1$r.HlmCommandItem, selector: "button[hlmCommandItem],button[hlm-command-item]" }, { kind: "directive", type: i1$r.HlmCommandList, selector: "[hlmCommandList],hlm-command-list" }, { kind: "directive", type: i1$r.HlmCommandSeparator, selector: "[hlmCommandSeparator],hlm-command-separator" }, { kind: "directive", type: i1$r.HlmCommandShortcut, selector: "[hlmCommandShortcut],hlm-command-shortcut" }, { 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.22", ngImport: i0, type: YuwCommandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-command', imports: [...HlmCommandImports, NgIcon], host: {
+                        class: 'contents',
+                        '[attr.data-yuw-color]': 'color()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div hlmCommand [class]=\"userClass()\" [disabled]=\"disabled()\" [filter]=\"filter()\" [(search)]=\"search\">\n  <hlm-command-input [placeholder]=\"searchPlaceholder() ?? ''\" />\n\n  <div hlmCommandList>\n    @for (group of _groups(); track group.id; let first = $first) {\n      @if (!first) {\n        <div hlmCommandSeparator></div>\n      }\n\n      <div hlmCommandGroup>\n        @if (group.label; as label) {\n          <span hlmCommandGroupLabel>{{ label }}</span>\n        }\n\n        @for (entry of group.items; track entry.item.id) {\n          <button\n            hlmCommandItem\n            [value]=\"entry.searchValue\"\n            [disabled]=\"entry.item.disabled ?? false\"\n            (selected)=\"onSelected(entry.item)\"\n          >\n            @if (entry.item.icon; as icon) {\n              <ng-icon [name]=\"icon\" aria-hidden=\"true\" />\n            }\n            {{ entry.item.label }}\n            @if (entry.item.shortcut; as shortcut) {\n              <span hlmCommandShortcut>{{ shortcut }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <div hlmCommandEmpty *hlmCommandEmptyState>{{ emptyText() ?? '' }}</div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], commandSelected: [{ type: i0.Output, args: ["commandSelected"] }] } });
+
+const panelWidthClasses = 'w-[650px] max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-2rem)] mb-[24vh]';
+/**
+ * `<yuw-command>` hosted in a centred modal — the ⌘K palette shape.
+ *
+ * Wraps the palette rather than re-projecting it, so filtering, grouping and selection behave
+ * identically to the inline component. Two behaviours belong to the modal and are handled here:
+ * the query is cleared whenever the palette closes, so it never reopens still filtered by the last
+ * search; and choosing an entry closes it, since picking *is* the confirmation.
+ *
+ * The opening accelerator is deliberately not bound here. A global hotkey is application policy —
+ * it has to coexist with whatever else the app binds — so the consumer drives `open` from its own
+ * listener. `shortcut` text on the entries is likewise the consumer's, and platform-dependent
+ * (`⌘K` on Apple platforms, `Ctrl+K` elsewhere).
+ *
+ * Inputs / Models:
+ * - `groups`: Required entry definitions (`YuwCommandGroupDto[]`), as `<yuw-command>` takes them.
+ * - `open`: Two-way open/closed state. Drive via `[(open)]` from the trigger or hotkey.
+ * - `search`: Two-way filter query. Reset to `''` on close.
+ * - `closeOnSelect`: Whether choosing an entry closes the palette. Default `true`; set it `false`
+ *   for a palette whose entries toggle state and are expected to be used several times in a row.
+ * - `title`: Accessible name of the modal, rendered visually hidden — a palette shows no heading
+ *   above its search field, but the dialog still needs a name. Required, user-facing text the
+ *   consuming app is responsible for translating.
+ * - `description`: Visually hidden description of the modal, announced after `title`. Same
+ *   translation contract.
+ * - `emptyText`, `searchPlaceholder`, `filter`, `color`: Forwarded to `<yuw-command>` unchanged;
+ *   `filter` shares its default, so the two components always match on the same rule.
+ * - `panelClass`: Extra classes merged onto the modal panel. Use it to widen the palette or lift it
+ *   above centre (`mb-[24vh]`), where palettes are conventionally placed. Prefer a margin over
+ *   `-translate-y`: the panel animates with `zoom-*`, whose keyframes drive `transform`.
+ *   Resizing it needs a **definite width** plus an **`sm:`-prefixed** cap, e.g.
+ *   `w-[650px] max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-2rem)]`. Both parts are load-bearing,
+ *   verified by measuring the rendered panel in Chrome:
+ *   - `.cdk-overlay-pane` is `position: absolute` with no width, so it shrink-wraps its content.
+ *     A percentage width (`w-full`) therefore resolves against the *content* width — about 80px —
+ *     not the viewport, and no `max-w-*` can widen it because nothing ever requests more. Only a
+ *     definite `w-[…]` makes the pane size itself.
+ *   - the cap must repeat under the `sm:` variant, because the helm's own cap is `sm:max-w-sm`
+ *     (384px) emitted late in the stylesheet. `twMerge` only collapses classes of the same
+ *     variant, so an unprefixed `max-w-*` leaves `sm:max-w-sm` in place and loses to it above
+ *     640px — the class list looks right while the panel stays 384px wide.
+ *   Use `100vw` rather than `100%` in the cap: a percentage is relative to the shrink-wrapped pane
+ *   again. `min-w-*` is rarely needed, since the `vw` cap already tracks the viewport.
+ *
+ * Outputs:
+ * - `commandSelected`: Emits the chosen entry, after running its own `action`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-command-dialog
+ *   [groups]="groups"
+ *   [(open)]="paletteOpen"
+ *   title="Command palette"
+ *   emptyText="No results found."
+ *   searchPlaceholder="Type a command or search…"
+ *   panelClass="sm:max-w-lg mb-[24vh]"
+ *   (commandSelected)="run($event)"
+ * />
+ * ```
+ */
+class YuwCommandDialogComponent {
+    constructor() {
+        this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.filter = input(yuwCommandDefaultFilter, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.commandSelected = output();
+        this._panelClasses = computed(() => {
+            const panelClass = this.panelClass() ?? '';
+            return twMerge(panelWidthClasses, panelClass);
+        }, ...(ngDevMode ? [{ debugName: "_panelClasses" }] : /* istanbul ignore next */ []));
+        this._state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    }
+    onSelected(item) {
+        this.commandSelected.emit(item);
+        if (this.closeOnSelect()) {
+            this.onStateChanged('closed');
+        }
+    }
+    onStateChanged(state) {
+        const isOpen = state === 'open';
+        if (!isOpen) {
+            this.search.set('');
+        }
+        this.open.set(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCommandDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwCommandDialogComponent, isStandalone: true, selector: "yuw-command-dialog", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", search: "searchChange", commandSelected: "commandSelected" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-command-dialog\n  [state]=\"_state()\"\n  [title]=\"title()\"\n  [description]=\"description() ?? ''\"\n  [dialogContentClass]=\"panelClass() ?? ''\"\n  (stateChange)=\"onStateChanged($event)\"\n>\n  <yuw-command\n    [groups]=\"groups()\"\n    [(search)]=\"search\"\n    [color]=\"color()\"\n    [filter]=\"filter()\"\n    [emptyText]=\"emptyText()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    (commandSelected)=\"onSelected($event)\"\n  />\n</hlm-command-dialog>\n", dependencies: [{ kind: "component", type: HlmCommandDialog, selector: "hlm-command-dialog", inputs: ["title", "description", "state", "showCloseButton", "dialogContentClass"], outputs: ["stateChange"] }, { kind: "component", type: YuwCommandComponent, selector: "yuw-command", inputs: ["color", "disabled", "emptyText", "filter", "groups", "search", "searchPlaceholder", "class"], outputs: ["searchChange", "commandSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCommandDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-command-dialog', imports: [HlmCommandDialog, YuwCommandComponent], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-command-dialog\n  [state]=\"_state()\"\n  [title]=\"title()\"\n  [description]=\"description() ?? ''\"\n  [dialogContentClass]=\"panelClass() ?? ''\"\n  (stateChange)=\"onStateChanged($event)\"\n>\n  <yuw-command\n    [groups]=\"groups()\"\n    [(search)]=\"search\"\n    [color]=\"color()\"\n    [filter]=\"filter()\"\n    [emptyText]=\"emptyText()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    (commandSelected)=\"onSelected($event)\"\n  />\n</hlm-command-dialog>\n" }]
+        }], propDecorators: { closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], commandSelected: [{ type: i0.Output, args: ["commandSelected"] }] } });
+
 /*
  * Public API Surface of yukit-web
  */
@@ -5248,5 +5557,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { DATATABLE_ALIGN_CLASS, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
 //# sourceMappingURL=yukit-web.mjs.map