yukit-web 0.3.2 → 0.3.4

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

@@ -1,2 +1,2 @@
 
-bbe61f65ecceeeda1c992d9f82003043ce071f03	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-5nv79nzwA1dPpGnQ0as5VJPRdjGZtbGO0SYlfBjs0Wod1yHc8UPoJxmO0ZpYjs2s1MnxEniOLqv8h8eqmDLg5g==","time":1791445451291,"size":508031,"metadata":{"time":1791445451276,"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, 08 Oct 2026 07:44:11 GMT","etag":"W/\"198d39382e9fe8c54043292b08b6331a\"","last-modified":"Wed, 07 Oct 2026 14:36:48 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
+9de6cd3cb4c708c121ca4697357422a0888a0298	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-7UABPyxQk+dOLdqBm+wivbsNtBBcfyE8AyjDWtRzG7Isv7/3LjsfBiiOpTAJPDy5HZIgYx8MnNCCLztCbeLiFw==","time":1791903010260,"size":526834,"metadata":{"time":1791903010239,"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":"Tue, 13 Oct 2026 14:50:10 GMT","etag":"W/\"88192d22886b88431a7703ad363fd35a\"","last-modified":"Tue, 13 Oct 2026 07:38:40 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/.npm/_logs/{2026-10-08T07_44_10_907Z-debug-0.log → 2026-10-13T14_50_09_756Z-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.3.2 version
-8 verbose argv "view" "yukit-web@0.3.2" "version"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-08T07_44_10_907Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-08T07_44_10_907Z-debug-0.log
+7 verbose title npm view yukit-web@0.3.4 version
+8 verbose argv "view" "yukit-web@0.3.4" "version"
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-13T14_50_09_756Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-13T14_50_09_756Z-debug-0.log
 11 silly logfile done cleaning log files
-12 http fetch GET 200 https://registry.npmjs.org/yukit-web 210ms (cache miss)
-13 verbose stack Error: No match found for version 0.3.2
+12 http fetch GET 200 https://registry.npmjs.org/yukit-web 278ms (cache miss)
+13 verbose stack Error: No match found for version 0.3.4
 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.3.2
+15 verbose pkgid yukit-web@0.3.4
 16 error code E404
-17 error 404 No match found for version 0.3.2
+17 error 404 No match found for version 0.3.4
 18 error 404
-19 error 404  'yukit-web@0.3.2' is not in this registry.
+19 error 404  'yukit-web@0.3.4' 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.9
 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-10-08T07_44_10_907Z-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-10-13T14_50_09_756Z-debug-0.log

package/.npm/_logs/{2026-10-08T07_44_11_369Z-debug-0.log → 2026-10-13T14_50_10_359Z-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-10-08T07_44_11_369Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-08T07_44_11_369Z-debug-0.log
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-13T14_50_10_359Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-13T14_50_10_359Z-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

@@ -1715,6 +1715,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 
+/**
+ * Marks an element as the sheet's header row, projected above the body with its own padding.
+ * When the sheet has a `closeLabel`, the close button renders inline at the end of this row so it
+ * lines up with the header content instead of floating in the panel corner.
+ */
+class YuwSheetHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetHeaderDirective, isStandalone: true, selector: "[yuwSheetHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSheetHeader]',
+                }]
+        }] });
+
 const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
 const YUW_SHEET_OPEN_CLASS = 'yuw-sheet-open';
 /**
@@ -1734,6 +1750,9 @@ const YUW_SHEET_OPEN_CLASS = 'yuw-sheet-open';
  * - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
  *   renders and screen readers read this label; when absent there is no close button. User-facing
  *   text the consuming app is responsible for translating.
+ * - `bodyClass`: Extra classes merged onto the scrollable body, which defaults to `px-4`. Pass `px-0` for
+ *   full-bleed content such as edge-to-edge dividers or a tinted background that should stop above the
+ *   footer. Wins over the default via `twMerge`.
  * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
  *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
  *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
@@ -1751,6 +1770,9 @@ const YUW_SHEET_OPEN_CLASS = 'yuw-sheet-open';
  * - `triggerVariant`: Button style variant for the trigger button.
  * - `triggerSize`: Button size for the trigger button.
  *
+ * A `yuwSheetHeader` element renders as a padded row above the body; with `closeLabel` set, the close
+ * button sits inline at its end rather than in the panel corner.
+ *
  * While open, the component adds `yuw-sheet-open` to `<html>`; `theme.css` uses it to hide page
  * scrollbars. The class is removed on close and on destroy.
  *
@@ -1770,9 +1792,11 @@ const YUW_SHEET_OPEN_CLASS = 'yuw-sheet-open';
 class YuwSheetComponent {
     constructor() {
         this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        this.hasHeader = contentChild(YuwSheetHeaderDirective, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
         this.sheet = viewChild.required(HlmSheet);
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.bodyClass = input(undefined, ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
         this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
         this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
@@ -1785,6 +1809,7 @@ class YuwSheetComponent {
         this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this._bodyClass = computed(() => cn('flex-1 overflow-y-auto px-4', this.bodyClass()), ...(ngDevMode ? [{ debugName: "_bodyClass" }] : /* istanbul ignore next */ []));
         this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
         const root = inject(DOCUMENT).documentElement;
         inject(DestroyRef).onDestroy(() => root.classList.remove(YUW_SHEET_OPEN_CLASS));
@@ -1800,15 +1825,22 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", 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 }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$8.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$8.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$8.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$8.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$8.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$8.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$8.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { 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: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", 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 }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }, { propertyName: "hasHeader", first: true, predicate: YuwSheetHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    @if (hasHeader()) {\n      <div class=\"flex items-start gap-3 px-4 pt-6\">\n        <div class=\"min-w-0 flex-1\">\n          <ng-content select=\"[yuwSheetHeader]\" />\n        </div>\n        @if (closeLabel()) {\n          <ng-container [ngTemplateOutlet]=\"closeButton\" />\n        }\n      </div>\n    }\n\n    <div [class]=\"_bodyClass()\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel() && !hasHeader()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <ng-container [ngTemplateOutlet]=\"closeButton\" />\n      </div>\n    }\n\n    <ng-template #closeButton>\n      <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n        <ng-icon name=\"lucideX\" />\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </yuw-button>\n    </ng-template>\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$8.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$8.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$8.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$8.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$8.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$8.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$8.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
+            args: [{ selector: 'yuw-sheet', imports: [
+                        ...HlmSheetImports,
+                        NgTemplateOutlet,
+                        YuwButtonComponent,
+                        YuwSheetTriggerDirective,
+                        YuwSheetCloseDirective,
+                        NgIcon,
+                    ], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
-        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", 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"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
-const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    @if (hasHeader()) {\n      <div class=\"flex items-start gap-3 px-4 pt-6\">\n        <div class=\"min-w-0 flex-1\">\n          <ng-content select=\"[yuwSheetHeader]\" />\n        </div>\n        @if (closeLabel()) {\n          <ng-container [ngTemplateOutlet]=\"closeButton\" />\n        }\n      </div>\n    }\n\n    <div [class]=\"_bodyClass()\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel() && !hasHeader()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <ng-container [ngTemplateOutlet]=\"closeButton\" />\n      </div>\n    }\n\n    <ng-template #closeButton>\n      <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n        <ng-icon name=\"lucideX\" />\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </yuw-button>\n    </ng-template>\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], hasHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetHeaderDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", 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"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+const YuwSheetImports = [YuwSheetComponent, YuwSheetHeaderDirective, YuwSheetFooterDirective];
 
 /** Binary-step unit symbols, which are not user copy and so need no translation. */
 const UNITS = ['B', 'KB', 'MB', 'GB'];
@@ -1952,7 +1984,7 @@ class YuwInputFileComponent extends YuwValueAccessorBase {
         this._commit(Array.from(event.target.files ?? []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", 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 }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", 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 }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "bodyClass", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, decorators: [{
             type: Component,
@@ -2279,7 +2311,7 @@ class YuwSearchInputComponent extends YuwTextFieldBase {
         this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
         this._focusSelectors = ['input'];
         this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
-        this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), searchInputGroupVariants({ transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), searchInputGroupVariants({ transparent: this.transparent() }), this.userClass(), 'overflow-hidden'), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
         this._expandButtonClasses = computed(() => searchInputExpandButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_expandButtonClasses" }] : /* istanbul ignore next */ []));
         this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
@@ -4473,7 +4505,7 @@ class YuwListToolbarFiltersComponent {
         this.open.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  <div class=\"flex items-center justify-end gap-2 pt-3 px-2\">\n    @if (selectedText(); as text) {\n      <p class=\"text-start text-xs text-muted-foreground pl-2\">{{ text }}</p>\n    }\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0 flex-col\">\n          <div class=\"flex min-w-0\">\n            <div>\n              <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n                @for (group of groups(); track group.id) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                      [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                      [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                      (click)=\"selectGroup(group.id)\"\n                    >\n                      <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                      @if (draft.pendingGroupIds().has(group.id)) {\n                        <yuw-badge\n                          dot\n                          color=\"secondary\"\n                          style=\"width: 0.5rem; height: 0.5rem\"\n                          [attr.aria-label]=\"labels().pending\"\n                          [attr.title]=\"labels().pending\"\n                        />\n                      }\n                    </button>\n                  </li>\n                }\n              </ul>\n\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n\n            @if (activeGroup(); as group) {\n              <div class=\"flex min-w-44 flex-1 flex-col gap-3 border-s p-3\">\n                <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "bodyClass", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
             type: Component,
@@ -4492,7 +4524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
+                    ], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  <div class=\"flex items-center justify-end gap-2 pt-3 px-2\">\n    @if (selectedText(); as text) {\n      <p class=\"text-start text-xs text-muted-foreground pl-2\">{{ text }}</p>\n    }\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0 flex-col\">\n          <div class=\"flex min-w-0\">\n            <div>\n              <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n                @for (group of groups(); track group.id) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                      [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                      [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                      (click)=\"selectGroup(group.id)\"\n                    >\n                      <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                      @if (draft.pendingGroupIds().has(group.id)) {\n                        <yuw-badge\n                          dot\n                          color=\"secondary\"\n                          style=\"width: 0.5rem; height: 0.5rem\"\n                          [attr.aria-label]=\"labels().pending\"\n                          [attr.title]=\"labels().pending\"\n                        />\n                      }\n                    </button>\n                  </li>\n                }\n              </ul>\n\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n\n            @if (activeGroup(); as group) {\n              <div class=\"flex min-w-44 flex-1 flex-col gap-3 border-s p-3\">\n                <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contents: [{ type: i0.Input, args: [{ isSignal: true, alias: "contents", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 /**
@@ -6738,7 +6770,7 @@ class YuwSidebarSubmenuSheetComponent {
         return resolved || this.config.sidebarWidthIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarSubmenuSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSidebarSubmenuSheetComponent, isStandalone: true, selector: "yuw-sidebar-submenu-sheet", outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<yuw-sheet\n  side=\"left\"\n  [open]=\"_submenu.open()\"\n  (openChange)=\"onOpenChange($event)\"\n  [showTrigger]=\"false\"\n  [ariaLabel]=\"_label()\"\n  [panelClass]=\"panelClass\"\n  [overlayClass]=\"overlayClass\"\n  [ariaModal]=\"false\"\n  [closeOnOutsidePointerEvents]=\"false\"\n  scrollStrategy=\"reposition\"\n>\n  <div [class]=\"bodyClass\">\n    <span [class]=\"labelClass\">{{ _label() }}</span>\n\n    <ul yuwSidebarMenuSub>\n      @for (child of _children(); track child.id) {\n        <li yuwSidebarMenuSubItem>\n          @if (child.route) {\n            <a\n              yuwSidebarMenuSubButton\n              #childLink=\"routerLinkActive\"\n              routerLinkActive\n              class=\"px-4 h-12!\"\n              [routerLink]=\"child.route\"\n              [routerLinkActiveOptions]=\"_activeOptions()[child.id]\"\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              (click)=\"_submenu.close()\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </a>\n          } @else if (child.href) {\n            <a\n              yuwSidebarMenuSubButton\n              class=\"px-4 h-12!\"\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              (click)=\"_submenu.close()\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </a>\n          } @else {\n            <button\n              yuwSidebarMenuSubButton\n              type=\"button\"\n              class=\"px-4 h-12!\"\n              [disabled]=\"child.disabled ?? false\"\n              (click)=\"onChildClick(child.id, $event)\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n</yuw-sheet>\n", dependencies: [{ kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { 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: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { 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: YuwSidebarSubmenuSheetComponent, isStandalone: true, selector: "yuw-sidebar-submenu-sheet", outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<yuw-sheet\n  side=\"left\"\n  [open]=\"_submenu.open()\"\n  (openChange)=\"onOpenChange($event)\"\n  [showTrigger]=\"false\"\n  [ariaLabel]=\"_label()\"\n  [panelClass]=\"panelClass\"\n  [overlayClass]=\"overlayClass\"\n  [ariaModal]=\"false\"\n  [closeOnOutsidePointerEvents]=\"false\"\n  scrollStrategy=\"reposition\"\n>\n  <div [class]=\"bodyClass\">\n    <span [class]=\"labelClass\">{{ _label() }}</span>\n\n    <ul yuwSidebarMenuSub>\n      @for (child of _children(); track child.id) {\n        <li yuwSidebarMenuSubItem>\n          @if (child.route) {\n            <a\n              yuwSidebarMenuSubButton\n              #childLink=\"routerLinkActive\"\n              routerLinkActive\n              class=\"px-4 h-12!\"\n              [routerLink]=\"child.route\"\n              [routerLinkActiveOptions]=\"_activeOptions()[child.id]\"\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              (click)=\"_submenu.close()\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </a>\n          } @else if (child.href) {\n            <a\n              yuwSidebarMenuSubButton\n              class=\"px-4 h-12!\"\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              (click)=\"_submenu.close()\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </a>\n          } @else {\n            <button\n              yuwSidebarMenuSubButton\n              type=\"button\"\n              class=\"px-4 h-12!\"\n              [disabled]=\"child.disabled ?? false\"\n              (click)=\"onChildClick(child.id, $event)\"\n            >\n              @if (child.icon) {\n                <ng-icon [name]=\"child.icon\" />\n              }\n              <span>{{ child.label }}</span>\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n</yuw-sheet>\n", dependencies: [{ kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "bodyClass", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { 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: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { 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: YuwSidebarSubmenuSheetComponent, decorators: [{
             type: Component,
@@ -7096,5 +7128,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, 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, YuwFieldBase, YuwFilterContentDirective, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, 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, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, 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, YuwFieldBase, YuwFilterContentDirective, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, 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, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
 //# sourceMappingURL=yukit-web.mjs.map