yukit-web 0.0.16 → 0.0.18

package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488

@@ -1,2 +1,2 @@
 
-e0e77fa4f208c6c333ce9845ffbede55205b045a	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-XhEsVsxGUzzJiLGtPF5UMW2X2S5ID4kI0MwzLnQTkM//e/FSkmMl/XZL2EcycthcGsExmOasqFSAvc6rHXMksg==","time":1788939633022,"size":207283,"metadata":{"time":1788939633006,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Wed, 09 Sep 2026 07:40:32 GMT","etag":"W/\"5de0d5bfdc3399bf16b736b8c21314de\"","last-modified":"Tue, 08 Sep 2026 13:20:59 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
+f2af6cde1507a453d12ce012f0530cf6269bab88	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-l5UYDK5DoWIqA30AHK6/1hdMDbMoH5AKzLioMOgRYWkc1YNYsKCJnt66Zul0umD+6LBcAO3sdzwtciBfWZu5Wg==","time":1789044043145,"size":226101,"metadata":{"time":1789044043130,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Thu, 10 Sep 2026 12:40:43 GMT","etag":"W/\"9c9e0f69103baea3a6847470085d9c03\"","last-modified":"Thu, 10 Sep 2026 10:50:32 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/.npm/_logs/{2026-09-09T07_40_32_599Z-debug-0.log → 2026-09-10T12_40_42_688Z-debug-0.log}

@@ -5,24 +5,24 @@
 4 silly config load:file:/builds/yurest/yurest-ui/dist/yukit-web/.npmrc
 5 silly config load:file:/root/.npmrc
 6 silly config load:file:/usr/local/etc/npmrc
-7 verbose title npm view yukit-web@0.0.16 version
-8 verbose argv "view" "yukit-web@0.0.16" "version"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-09T07_40_32_599Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-09T07_40_32_599Z-debug-0.log
+7 verbose title npm view yukit-web@0.0.18 version
+8 verbose argv "view" "yukit-web@0.0.18" "version"
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-10T12_40_42_688Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-10T12_40_42_688Z-debug-0.log
 11 silly logfile done cleaning log files
-12 http fetch GET 200 https://registry.npmjs.org/yukit-web 183ms (cache miss)
-13 verbose stack Error: No match found for version 0.0.16
+12 http fetch GET 200 https://registry.npmjs.org/yukit-web 219ms (cache miss)
+13 verbose stack Error: No match found for version 0.0.18
 13 verbose stack     at #getData (/usr/local/lib/node_modules/npm/lib/commands/view.js:192:27)
 13 verbose stack     at async #viewPackage (/usr/local/lib/node_modules/npm/lib/commands/view.js:112:28)
 13 verbose stack     at async View.exec (/usr/local/lib/node_modules/npm/lib/commands/view.js:70:5)
 13 verbose stack     at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:207:9)
 13 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5)
 14 verbose statusCode 404
-15 verbose pkgid yukit-web@0.0.16
+15 verbose pkgid yukit-web@0.0.18
 16 error code E404
-17 error 404 No match found for version 0.0.16
+17 error 404 No match found for version 0.0.18
 18 error 404
-19 error 404  'yukit-web@0.0.16' is not in this registry.
+19 error 404  'yukit-web@0.0.18' is not in this registry.
 20 error 404
 21 error 404 Note that you can also install from a
 22 error 404 tarball, folder, http url, or git url.
@@ -32,4 +32,4 @@
 26 verbose npm  v10.9.8
 27 verbose exit 1
 28 verbose code 1
-29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-09T07_40_32_599Z-debug-0.log
+29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-10T12_40_42_688Z-debug-0.log

package/.npm/_logs/{2026-09-09T07_40_33_128Z-debug-0.log → 2026-09-10T12_40_43_244Z-debug-0.log}

@@ -7,8 +7,8 @@
 6 silly config load:file:/usr/local/etc/npmrc
 7 verbose title npm publish
 8 verbose argv "publish" "--access" "public"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-09T07_40_33_128Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-09T07_40_33_128Z-debug-0.log
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-10T12_40_43_244Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-10T12_40_43_244Z-debug-0.log
 11 silly logfile done cleaning log files
 12 verbose publish [ '.' ]
 13 silly packumentCache heap:2197815296 maxSize:549453824 maxEntrySize:274726912

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
@@ -3387,11 +3431,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
  * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
  * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
+ * - `sideOffset`: Pixel offset for X sides. Positive px for right, negative for left side.
  * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
  * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
  * - `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.
@@ -3414,12 +3461,14 @@ class YuwPopoverComponent {
     constructor() {
         this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
         this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
         this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         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 +3478,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 }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", 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  [offsetX]=\"offsetX()\"\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  [offsetX]=\"offsetX()\"\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 }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", 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.
@@ -4252,7 +4301,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!
@@ -5323,6 +5372,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
  */
@@ -5331,5 +5559,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, 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 };
+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