yukit-web 0.3.4 → 0.4.0

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, DestroyRef, Injector, afterNextRender, numberAttribute, DOCUMENT as DOCUMENT$1, runInInjectionContext } from '@angular/core';
+import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, DestroyRef, Injector, afterNextRender, numberAttribute, runInInjectionContext } from '@angular/core';
 import { classes, hlm } from 'yukit-web/helm/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -15,58 +15,57 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
 import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
 import { Router, NavigationEnd, isActive, RouterLink, RouterLinkActive } from '@angular/router';
 import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
-import { BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
-import * as i1$3 from 'yukit-web/helm/combobox';
+import * as i1$3 from '@spartan-ng/brain/combobox';
+import { BrnComboboxTrigger, BrnComboboxAnchor, BrnComboboxPopoverTrigger, BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
+import * as i1$4 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
 import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
 import { HlmInput } from 'yukit-web/helm/input';
-import * as i1$9 from 'yukit-web/helm/input-group';
+import * as i1$a from 'yukit-web/helm/input-group';
 import { HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon, HlmInputGroupTextarea, HlmInputGroupImports } from 'yukit-web/helm/input-group';
 import { BrnField } from '@spartan-ng/brain/field';
-import * as i1$4 from 'yukit-web/helm/avatar';
+import * as i1$5 from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
-import * as i1$6 from 'yukit-web/helm/popover';
+import * as i1$7 from 'yukit-web/helm/popover';
 import { HlmPopoverImports } from 'yukit-web/helm/popover';
-import * as i1$5 from '@spartan-ng/brain/popover';
+import * as i1$6 from '@spartan-ng/brain/popover';
 import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import * as i1$7 from '@spartan-ng/brain/sheet';
+import * as i1$8 from '@spartan-ng/brain/sheet';
 import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
-import * as i1$8 from 'yukit-web/helm/sheet';
+import * as i1$9 from 'yukit-web/helm/sheet';
 import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
 import { HlmTextarea } from 'yukit-web/helm/textarea';
 import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
-import * as i1$a from 'yukit-web/helm/input-otp';
+import * as i1$b from 'yukit-web/helm/input-otp';
 import { HlmInputOtpImports } from 'yukit-web/helm/input-otp';
 import { HlmLabel } from 'yukit-web/helm/label';
 import { HlmCheckbox } from 'yukit-web/helm/checkbox';
-import * as i1$b from 'yukit-web/helm/switch';
+import * as i1$c from 'yukit-web/helm/switch';
 import { HlmSwitchImports } from 'yukit-web/helm/switch';
-import * as i1$c from 'yukit-web/helm/radio-group';
+import * as i1$d from 'yukit-web/helm/radio-group';
 import { HlmRadioGroupImports } from 'yukit-web/helm/radio-group';
-import * as i1$d from 'yukit-web/helm/skeleton';
+import * as i1$e from 'yukit-web/helm/skeleton';
 import { HlmSkeleton } from 'yukit-web/helm/skeleton';
-import * as i1$e from 'yukit-web/helm/card';
+import * as i1$f from 'yukit-web/helm/card';
 import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction, HlmCardContent, HlmCardFooter } from 'yukit-web/helm/card';
-import * as i1$f from 'yukit-web/helm/empty';
+import * as i1$g from 'yukit-web/helm/empty';
 import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
 import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
-import * as i1$g from 'yukit-web/helm/context-menu';
+import * as i1$h from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
-import * as i1$h from 'yukit-web/helm/date-picker';
+import * as i1$i from 'yukit-web/helm/date-picker';
 import { injectHlmMonthYearPickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
-import * as i1$i from 'yukit-web/helm/table';
+import * as i1$j from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
-import * as i1$j from 'yukit-web/helm/tabs';
-import { HlmTabsImports } from 'yukit-web/helm/tabs';
 import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
 import { injectTable, FlexRenderDirective, flexRenderComponent } from '@tanstack/angular-table';
 import * as i1$k from 'yukit-web/helm/item';
@@ -83,14 +82,16 @@ import * as i1$o from 'yukit-web/helm/alert-dialog';
 import { HlmAlertDialogImports } from 'yukit-web/helm/alert-dialog';
 import * as i1$n from '@spartan-ng/brain/alert-dialog';
 import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
-import * as i1$p from 'yukit-web/helm/attachment';
+import * as i1$p from 'yukit-web/helm/tabs';
+import { HlmTabsImports } from 'yukit-web/helm/tabs';
+import * as i1$q from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
 import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
-import * as i1$q from 'yukit-web/helm/sidebar';
+import * as i1$r from 'yukit-web/helm/sidebar';
 import { HlmSidebarService, provideHlmSidebarConfig, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import * as i1$r from 'yukit-web/helm/command';
+import * as i1$s from 'yukit-web/helm/command';
 import { HlmCommandImports, HlmCommandDialog } from 'yukit-web/helm/command';
 
 /**
@@ -1001,6 +1002,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }], propDecorators: { typeOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwComboboxItemTypeOf", required: false }] }] } });
 
+/**
+ * Turns `<yuw-combobox>` into a button that opens its option list directly, with the search field
+ * inside the list. The template is the button's content; the button itself is a `<yuw-button>`
+ * styled by the combobox `trigger*` inputs.
+ *
+ * Usage:
+ * ```html
+ * <yuw-combobox multiple [options]="columns" [(value)]="hidden" triggerAriaLabel="Columns" triggerSize="icon">
+ *   <ng-template yuwComboboxTrigger let-selected>
+ *     <ng-icon name="lucideSettings2" />
+ *   </ng-template>
+ * </yuw-combobox>
+ * ```
+ */
+class YuwComboboxTriggerDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwComboboxTriggerDirective, isStandalone: true, selector: "ng-template[yuwComboboxTrigger]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwComboboxTrigger]',
+                }]
+        }] });
+/**
+ * Makes a `<yuw-button>` the trigger and anchor of the surrounding brain combobox. The brain
+ * trigger's selector only matches a native `button`, so composing the directives here is what lets
+ * the combobox reuse `<yuw-button>`; its `inline-flex` host gives the overlay a box to anchor to and
+ * receives the click bubbling up from the inner button.
+ */
+class YuwComboboxTriggerButtonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxTriggerButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwComboboxTriggerButtonDirective, isStandalone: true, selector: "yuw-button[yuwComboboxTriggerButton]", host: { attributes: { "data-slot": "combobox-trigger" } }, hostDirectives: [{ directive: i1$3.BrnComboboxTrigger }, { directive: i1$3.BrnComboboxAnchor }, { directive: i1$3.BrnComboboxPopoverTrigger }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxTriggerButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwComboboxTriggerButton]',
+                    hostDirectives: [BrnComboboxTrigger, BrnComboboxAnchor, BrnComboboxPopoverTrigger],
+                    host: { 'data-slot': 'combobox-trigger' },
+                }]
+        }] });
+
 /** Module-level counter for the fallback control id, so external labels always have a stable,
  * unique target even when the consumer doesn't pass `inputId`. */
 let nextUniqueId$2 = 0;
@@ -1032,8 +1082,19 @@ let nextUniqueId$2 = 0;
  * - `inputId`: HTML `id` for the focusable control (the search input, or the trigger button when
  *   `readonlyTrigger` is set), enabling external `<label for="...">` association.
  * - `readonlyTrigger`: Renders control as a button showing selected label, placing search input inside popover.
+ * - `triggerColor`, `triggerSize`, `triggerVariant`, `triggerClass`: Look of the button rendered by a
+ *   projected `yuwComboboxTrigger` template, same vocabulary as `<yuw-popover>`. Defaults are
+ *   `'neutral'`, `'default'`, `'outline'` and `''`.
+ *
+ * A projected `<ng-template yuwComboboxTrigger>` replaces the control, in either mode, with a
+ * `<yuw-button>` whose content is that template: clicking it opens the option list straight away,
+ * with the search field inside it. `triggerAriaLabel` names that button, so pass one that reads well
+ * for an icon-only trigger. See `YuwComboboxTriggerDirective`.
  * - `invalid`: Forces invalid styling.
  *
+ * Content marked `yuwComboboxFooter` is projected at the bottom of the option list, for actions
+ * that belong with it (a "clear all", say); the consumer renders and styles it.
+ *
  * `multiple` takes precedence over `readonlyTrigger`: when both are set the multi-select
  * chips shape renders and `readonlyTrigger` is ignored.
  *
@@ -1056,6 +1117,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
         this._singleBox = viewChild(BrnCombobox, ...(ngDevMode ? [{ debugName: "_singleBox" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(YuwComboboxItemDirective, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.triggerTemplate = contentChild(YuwComboboxTriggerDirective, ...(ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []));
         this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
         this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
@@ -1069,12 +1131,17 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this.searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.triggerAriaLabel = input.required(...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this._focusSelectors = ['input', 'button'];
         this._generatedId = `yuw-combobox-${++nextUniqueId$2}`;
         this._itemToString = (value) => this._labelByValue().get(value) ?? value;
         this._chipsClass = computed(() => yuwFieldMinHeightVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_chipsClass" }] : /* istanbul ignore next */ []));
         this._clearVisible = computed(() => this.clearAriaLabel() !== undefined, ...(ngDevMode ? [{ debugName: "_clearVisible" }] : /* istanbul ignore next */ []));
+        this._contentClass = computed(() => (this.triggerTemplate() ? 'w-auto min-w-56 max-w-80' : ''), ...(ngDevMode ? [{ debugName: "_contentClass" }] : /* istanbul ignore next */ []));
         this._controlId = computed(() => this.inputId() ?? this._generatedId, ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
         this._fieldClass = computed(() => yuwFieldSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_fieldClass" }] : /* istanbul ignore next */ []));
         this._labelByValue = computed(() => new Map(this.options().map((option) => [option.value, option.label])), ...(ngDevMode ? [{ debugName: "_labelByValue" }] : /* istanbul ignore next */ []));
@@ -1085,6 +1152,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
             }
             return Array.isArray(value) ? value : [value];
         }, ...(ngDevMode ? [{ debugName: "_multipleValue" }] : /* istanbul ignore next */ []));
+        this._searchInPanel = computed(() => this.readonlyTrigger() || !!this.triggerTemplate(), ...(ngDevMode ? [{ debugName: "_searchInPanel" }] : /* istanbul ignore next */ []));
         this._selectedChips = computed(() => {
             const labels = this._labelByValue();
             return this._multipleValue().map((value) => ({ value, label: labels.get(value) ?? value }));
@@ -1095,6 +1163,10 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
             return Array.isArray(value) ? value[0] : value;
         }, ...(ngDevMode ? [{ debugName: "_singleValue" }] : /* istanbul ignore next */ []));
         this._triggerClass = computed(() => yuwButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
+        this._triggerContext = computed(() => {
+            const labels = this._selectedChips().map((chip) => chip.label);
+            return { $implicit: labels.join(', '), labels };
+        }, ...(ngDevMode ? [{ debugName: "_triggerContext" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => onCleanup(this._guardEscape() ?? (() => undefined)));
     }
     /**
@@ -1151,14 +1223,14 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$3.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$3.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$3.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$3.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$3.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$3.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$3.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$3.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$3.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$3.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$3.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$3.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$3.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: YuwComboboxTriggerDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else {\n      <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n        @for (chip of _selectedChips(); track chip.value) {\n          <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n        }\n        <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-chips>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$4.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$4.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$4.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$4.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$4.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$4.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$4.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$4.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$4.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$4.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$4.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { 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: YuwComboboxTriggerButtonDirective, selector: "yuw-button[yuwComboboxTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
+            args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet, YuwButtonComponent, YuwComboboxTriggerButtonDirective], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else {\n      <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n        @for (chip of _selectedChips(); track chip.value) {\n          <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n        }\n        <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-chips>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxTriggerDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot.
@@ -1176,7 +1248,7 @@ class YuwPageSizeComponent {
         this.message = computed(() => this.labels().range(this.list().range()), ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwPageSizeComponent, isStandalone: true, selector: "yuw-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwPageSizeComponent, isStandalone: true, selector: "yuw-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageSizeComponent, decorators: [{
             type: Component,
@@ -1562,7 +1634,7 @@ class YuwAvatarComponent {
         this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$4.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$4.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$4.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$4.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$4.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$4.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$5.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$5.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$5.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$5.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$5.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, decorators: [{
             type: Component,
@@ -1585,7 +1657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwPopoverTriggerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$5.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$6.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
             type: Directive,
@@ -1657,7 +1729,7 @@ class YuwPopoverComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$6.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$6.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$6.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$6.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$6.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$6.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$7.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$7.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$7.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$7.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$7.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
@@ -1675,7 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwSheetTriggerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$7.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$8.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
             type: Directive,
@@ -1688,7 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
 class YuwSheetCloseDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$7.BrnSheetClose }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$8.BrnSheetClose }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
             type: Directive,
@@ -1809,7 +1881,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._bodyClass = computed(() => cn('flex-1 overflow-y-auto px-4 scroll-fade-y [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', 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));
@@ -1825,7 +1897,7 @@ 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 }, 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 }); }
+    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$9.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$9.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$9.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$9.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$9.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$9.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$9.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,
@@ -2386,7 +2458,7 @@ class YuwSearchInputComponent extends YuwTextFieldBase {
         this.searched.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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  <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n    <hlm-input-group [class]=\"_classes()\">\n      <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n        @if (_showExpandButton()) {\n          <button\n            hlmInputGroupButton\n            size=\"icon-sm\"\n            [class]=\"_expandButtonClasses()\"\n            [attr.aria-label]=\"expandAriaLabel()\"\n            [attr.aria-expanded]=\"false\"\n            (focus)=\"onExpandFocus($event)\"\n            (click)=\"onExpand()\"\n          >\n            <ng-icon name=\"lucideSearch\" />\n          </button>\n        } @else {\n          <ng-icon name=\"lucideSearch\" />\n        }\n      </hlm-input-group-addon>\n\n      <input\n        #searchInput\n        hlmInputGroupInput\n        [class]=\"_fieldClasses()\"\n        [id]=\"_inputId()\"\n        type=\"text\"\n        inputmode=\"search\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        [attr.tabindex]=\"expanded() ? null : -1\"\n        [attr.aria-hidden]=\"expanded() ? null : true\"\n        (input)=\"onInput($event)\"\n        (keydown.enter)=\"onEnter()\"\n        (keydown.escape)=\"onEscape()\"\n        (blur)=\"onBlur()\"\n      />\n\n      @if (_showClear()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n            <ng-icon name=\"lucideX\" />\n          </button>\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  </div>\n\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: 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: i1$9.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$9.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$9.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$9.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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  <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n    <hlm-input-group [class]=\"_classes()\">\n      <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n        @if (_showExpandButton()) {\n          <button\n            hlmInputGroupButton\n            size=\"icon-sm\"\n            [class]=\"_expandButtonClasses()\"\n            [attr.aria-label]=\"expandAriaLabel()\"\n            [attr.aria-expanded]=\"false\"\n            (focus)=\"onExpandFocus($event)\"\n            (click)=\"onExpand()\"\n          >\n            <ng-icon name=\"lucideSearch\" />\n          </button>\n        } @else {\n          <ng-icon name=\"lucideSearch\" />\n        }\n      </hlm-input-group-addon>\n\n      <input\n        #searchInput\n        hlmInputGroupInput\n        [class]=\"_fieldClasses()\"\n        [id]=\"_inputId()\"\n        type=\"text\"\n        inputmode=\"search\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        [attr.tabindex]=\"expanded() ? null : -1\"\n        [attr.aria-hidden]=\"expanded() ? null : true\"\n        (input)=\"onInput($event)\"\n        (keydown.enter)=\"onEnter()\"\n        (keydown.escape)=\"onEscape()\"\n        (blur)=\"onBlur()\"\n      />\n\n      @if (_showClear()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n            <ng-icon name=\"lucideX\" />\n          </button>\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  </div>\n\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: 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: i1$a.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$a.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$a.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$a.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
@@ -2464,7 +2536,7 @@ class YuwPasswordInputComponent extends YuwTextFieldBase {
         this.masked.update((masked) => !masked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"_reveal().inputType\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n\n    @if (revealAriaLabel(); as label) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button\n          hlmInputGroupButton\n          size=\"icon-xs\"\n          [disabled]=\"_disabled()\"\n          [attr.aria-label]=\"label\"\n          [attr.aria-pressed]=\"!_reveal().struck\"\n          (click)=\"onToggleReveal()\"\n        >\n          <ng-icon [name]=\"_reveal().icon\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n\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: 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: i1$9.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$9.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$9.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$9.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"_reveal().inputType\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n\n    @if (revealAriaLabel(); as label) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button\n          hlmInputGroupButton\n          size=\"icon-xs\"\n          [disabled]=\"_disabled()\"\n          [attr.aria-label]=\"label\"\n          [attr.aria-pressed]=\"!_reveal().struck\"\n          (click)=\"onToggleReveal()\"\n        >\n          <ng-icon [name]=\"_reveal().icon\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n\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: 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: i1$a.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$a.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$a.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$a.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
             type: Component,
@@ -2581,7 +2653,7 @@ class YuwInputOtpComponent extends YuwFieldBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <brn-input-otp\n    hlmInputOtp\n    [class]=\"_classes()\"\n    [inputId]=\"_inputId()\"\n    [length]=\"_length()\"\n    [value]=\"value()\"\n    [inputMode]=\"mode()\"\n    [disabled]=\"_disabled()\"\n    [autofocus]=\"autofocus()\"\n    [transformPaste]=\"transformPaste()\"\n    inputAutocomplete=\"one-time-code\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusout)=\"_onBlur()\"\n    (completed)=\"completed.emit($event)\"\n    (keydown.enter)=\"onEnterPressed()\"\n  >\n    @for (group of _groups(); track $index) {\n      @if (group.precededBySeparator) {\n        <hlm-input-otp-separator />\n      }\n\n      <hlm-input-otp-group>\n        @for (index of group.indices; track index) {\n          <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n        }\n      </hlm-input-otp-group>\n    }\n  </brn-input-otp>\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: 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: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$a.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$a.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$a.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$a.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <brn-input-otp\n    hlmInputOtp\n    [class]=\"_classes()\"\n    [inputId]=\"_inputId()\"\n    [length]=\"_length()\"\n    [value]=\"value()\"\n    [inputMode]=\"mode()\"\n    [disabled]=\"_disabled()\"\n    [autofocus]=\"autofocus()\"\n    [transformPaste]=\"transformPaste()\"\n    inputAutocomplete=\"one-time-code\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusout)=\"_onBlur()\"\n    (completed)=\"completed.emit($event)\"\n    (keydown.enter)=\"onEnterPressed()\"\n  >\n    @for (group of _groups(); track $index) {\n      @if (group.precededBySeparator) {\n        <hlm-input-otp-separator />\n      }\n\n      <hlm-input-otp-group>\n        @for (index of group.indices; track index) {\n          <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n        }\n      </hlm-input-otp-group>\n    }\n  </brn-input-otp>\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: 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: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$b.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$b.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$b.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$b.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
             type: Component,
@@ -2829,7 +2901,7 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$b.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$c.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
@@ -2893,7 +2965,7 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$c.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$c.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$c.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$d.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$d.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$d.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
@@ -2915,7 +2987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwSkeletonDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSkeletonDirective, isStandalone: true, selector: "[yuwSkeleton]", host: { attributes: { "aria-hidden": "true" } }, hostDirectives: [{ directive: i1$d.HlmSkeleton }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSkeletonDirective, isStandalone: true, selector: "[yuwSkeleton]", host: { attributes: { "aria-hidden": "true" } }, hostDirectives: [{ directive: i1$e.HlmSkeleton }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, decorators: [{
             type: Directive,
@@ -3004,7 +3076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwCardDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDirective, isStandalone: true, selector: "[yuwCard]", hostDirectives: [{ directive: i1$e.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDirective, isStandalone: true, selector: "[yuwCard]", hostDirectives: [{ directive: i1$f.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, decorators: [{
             type: Directive,
@@ -3016,7 +3088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header container directive for a card. */
 class YuwCardHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardHeaderDirective, isStandalone: true, selector: "[yuwCardHeader]", hostDirectives: [{ directive: i1$e.HlmCardHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardHeaderDirective, isStandalone: true, selector: "[yuwCardHeader]", hostDirectives: [{ directive: i1$f.HlmCardHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, decorators: [{
             type: Directive,
@@ -3028,7 +3100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Heading directive for card title text. */
 class YuwCardTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardTitleDirective, isStandalone: true, selector: "[yuwCardTitle]", hostDirectives: [{ directive: i1$e.HlmCardTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardTitleDirective, isStandalone: true, selector: "[yuwCardTitle]", hostDirectives: [{ directive: i1$f.HlmCardTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, decorators: [{
             type: Directive,
@@ -3040,7 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Subtitle or description directive for card text. */
 class YuwCardDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDescriptionDirective, isStandalone: true, selector: "[yuwCardDescription]", hostDirectives: [{ directive: i1$e.HlmCardDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDescriptionDirective, isStandalone: true, selector: "[yuwCardDescription]", hostDirectives: [{ directive: i1$f.HlmCardDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, decorators: [{
             type: Directive,
@@ -3052,7 +3124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header action directive for placing top-right controls (e.g. menu button or status badge). */
 class YuwCardActionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardActionDirective, isStandalone: true, selector: "[yuwCardAction]", hostDirectives: [{ directive: i1$e.HlmCardAction }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardActionDirective, isStandalone: true, selector: "[yuwCardAction]", hostDirectives: [{ directive: i1$f.HlmCardAction }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, decorators: [{
             type: Directive,
@@ -3064,7 +3136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Main body container directive for card content. */
 class YuwCardContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardContentDirective, isStandalone: true, selector: "[yuwCardContent]", hostDirectives: [{ directive: i1$e.HlmCardContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardContentDirective, isStandalone: true, selector: "[yuwCardContent]", hostDirectives: [{ directive: i1$f.HlmCardContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, decorators: [{
             type: Directive,
@@ -3076,7 +3148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Footer container directive for card action buttons or summary info. */
 class YuwCardFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardFooterDirective, isStandalone: true, selector: "[yuwCardFooter]", hostDirectives: [{ directive: i1$e.HlmCardFooter }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardFooterDirective, isStandalone: true, selector: "[yuwCardFooter]", hostDirectives: [{ directive: i1$f.HlmCardFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, decorators: [{
             type: Directive,
@@ -3117,7 +3189,7 @@ const YuwCardImports = [
  */
 class YuwEmptyDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDirective, isStandalone: true, selector: "[yuwEmpty]", hostDirectives: [{ directive: i1$f.HlmEmpty }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDirective, isStandalone: true, selector: "[yuwEmpty]", hostDirectives: [{ directive: i1$g.HlmEmpty }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, decorators: [{
             type: Directive,
@@ -3129,7 +3201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header container directive for empty-state title and media. */
 class YuwEmptyHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyHeaderDirective, isStandalone: true, selector: "[yuwEmptyHeader]", hostDirectives: [{ directive: i1$f.HlmEmptyHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyHeaderDirective, isStandalone: true, selector: "[yuwEmptyHeader]", hostDirectives: [{ directive: i1$g.HlmEmptyHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, decorators: [{
             type: Directive,
@@ -3141,7 +3213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Slot directive for empty-state icons or illustrations. Supports `variant` input. */
 class YuwEmptyMediaDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyMediaDirective, isStandalone: true, selector: "[yuwEmptyMedia]", hostDirectives: [{ directive: i1$f.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyMediaDirective, isStandalone: true, selector: "[yuwEmptyMedia]", hostDirectives: [{ directive: i1$g.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, decorators: [{
             type: Directive,
@@ -3153,7 +3225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Title heading directive for empty state message. */
 class YuwEmptyTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyTitleDirective, isStandalone: true, selector: "[yuwEmptyTitle]", hostDirectives: [{ directive: i1$f.HlmEmptyTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyTitleDirective, isStandalone: true, selector: "[yuwEmptyTitle]", hostDirectives: [{ directive: i1$g.HlmEmptyTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, decorators: [{
             type: Directive,
@@ -3165,7 +3237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Description paragraph directive explaining the empty state. */
 class YuwEmptyDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDescriptionDirective, isStandalone: true, selector: "[yuwEmptyDescription]", hostDirectives: [{ directive: i1$f.HlmEmptyDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDescriptionDirective, isStandalone: true, selector: "[yuwEmptyDescription]", hostDirectives: [{ directive: i1$g.HlmEmptyDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, decorators: [{
             type: Directive,
@@ -3177,7 +3249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Content slot directive for action buttons or call-to-action controls in an empty state. */
 class YuwEmptyContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyContentDirective, isStandalone: true, selector: "[yuwEmptyContent]", hostDirectives: [{ directive: i1$f.HlmEmptyContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyContentDirective, isStandalone: true, selector: "[yuwEmptyContent]", hostDirectives: [{ directive: i1$g.HlmEmptyContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, decorators: [{
             type: Directive,
@@ -3316,7 +3388,7 @@ class YuwContextMenuTriggerDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwContextMenuTriggerDirective, isStandalone: true, selector: "[yuwContextMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "yuwContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "yuwContextMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, hostDirectives: [{ directive: i1$g.HlmContextMenuTrigger, inputs: ["disabled", "disabled", "align", "align", "side", "side"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwContextMenuTriggerDirective, isStandalone: true, selector: "[yuwContextMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "yuwContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "yuwContextMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, hostDirectives: [{ directive: i1$h.HlmContextMenuTrigger, inputs: ["disabled", "disabled", "align", "align", "side", "side"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwContextMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -3648,7 +3720,7 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$h.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$h.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$i.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$i.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
@@ -3676,7 +3748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwTableContainerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableContainerDirective, isStandalone: true, selector: "[yuwTableContainer]", hostDirectives: [{ directive: i1$i.HlmTableContainer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableContainerDirective, isStandalone: true, selector: "[yuwTableContainer]", hostDirectives: [{ directive: i1$j.HlmTableContainer }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, decorators: [{
             type: Directive,
@@ -3688,7 +3760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table element styling directive applied to native `<table>`. */
 class YuwTableDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableDirective, isStandalone: true, selector: "[yuwTable]", hostDirectives: [{ directive: i1$i.HlmTable }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableDirective, isStandalone: true, selector: "[yuwTable]", hostDirectives: [{ directive: i1$j.HlmTable }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, decorators: [{
             type: Directive,
@@ -3700,7 +3772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table header container directive applied to native `<thead>`. */
 class YuwTHeadDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTHeadDirective, isStandalone: true, selector: "[yuwTHead]", hostDirectives: [{ directive: i1$i.HlmTHead }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTHeadDirective, isStandalone: true, selector: "[yuwTHead]", hostDirectives: [{ directive: i1$j.HlmTHead }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, decorators: [{
             type: Directive,
@@ -3712,7 +3784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table body container directive applied to native `<tbody>`. */
 class YuwTBodyDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTBodyDirective, isStandalone: true, selector: "[yuwTBody]", hostDirectives: [{ directive: i1$i.HlmTBody }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTBodyDirective, isStandalone: true, selector: "[yuwTBody]", hostDirectives: [{ directive: i1$j.HlmTBody }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, decorators: [{
             type: Directive,
@@ -3724,7 +3796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table footer container directive applied to native `<tfoot>`. */
 class YuwTFootDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTFootDirective, isStandalone: true, selector: "[yuwTFoot]", hostDirectives: [{ directive: i1$i.HlmTFoot }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTFootDirective, isStandalone: true, selector: "[yuwTFoot]", hostDirectives: [{ directive: i1$j.HlmTFoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, decorators: [{
             type: Directive,
@@ -3736,7 +3808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table row directive applied to native `<tr>`. */
 class YuwTrDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTrDirective, isStandalone: true, selector: "[yuwTr]", hostDirectives: [{ directive: i1$i.HlmTr }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTrDirective, isStandalone: true, selector: "[yuwTr]", hostDirectives: [{ directive: i1$j.HlmTr }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, decorators: [{
             type: Directive,
@@ -3748,7 +3820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table header cell directive applied to native `<th>`. */
 class YuwThDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwThDirective, isStandalone: true, selector: "[yuwTh]", hostDirectives: [{ directive: i1$i.HlmTh }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwThDirective, isStandalone: true, selector: "[yuwTh]", hostDirectives: [{ directive: i1$j.HlmTh }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, decorators: [{
             type: Directive,
@@ -3760,7 +3832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table data cell directive applied to native `<td>`. */
 class YuwTdDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTdDirective, isStandalone: true, selector: "[yuwTd]", hostDirectives: [{ directive: i1$i.HlmTd }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTdDirective, isStandalone: true, selector: "[yuwTd]", hostDirectives: [{ directive: i1$j.HlmTd }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, decorators: [{
             type: Directive,
@@ -3772,7 +3844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table caption directive applied to native `<caption>`. */
 class YuwCaptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCaptionDirective, isStandalone: true, selector: "[yuwCaption]", hostDirectives: [{ directive: i1$i.HlmCaption }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCaptionDirective, isStandalone: true, selector: "[yuwCaption]", hostDirectives: [{ directive: i1$j.HlmCaption }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, decorators: [{
             type: Directive,
@@ -3807,19 +3879,26 @@ const YuwTableImports = [
 ];
 
 /**
- * Replaces the checkbox list of one filter group inside `<yuw-list-toolbar>` with projected markup.
- * Apply it to an `<ng-template>` and pass the id of the group it renders; that group needs no
- * `options`.
+ * Replaces the combobox of one active filter inside `<yuw-list-toolbar>` with projected markup; the
+ * remove button stays after it. Apply it to an `<ng-template>` and pass the id of the group it
+ * renders; that group needs no `options`.
  *
- * The template feeds the same staged selection as the checkboxes: calling `change` stages the value
- * under the group id, so the pending dot, the applied count, Apply, Clear and saved sets all work
- * without extra wiring.
+ * The template feeds the same applied selection as the comboboxes: calling `change` writes the value
+ * under the group id, so removing, clearing and saved sets work without extra wiring.
+ *
+ * To match the library's filters, render a `yuw-combobox` with a `yuwComboboxTrigger` template that
+ * reads the group label and the selected labels; the row squares its trailing edge and welds it to the
+ * remove button.
  *
  * Usage:
  * ```html
  * <yuw-list-toolbar [filterGroups]="groups" [(selection)]="selection" [labels]="labels">
- *   <ng-template yuwFilterContent="customer" let-value="value" let-change="change">
- *     <yuw-combobox [options]="customers" [value]="value ?? ''" (valueChange)="change($event)" />
+ *   <ng-template yuwFilterContent="customer" let-group let-value="value" let-change="change">
+ *     <yuw-combobox [options]="customers" [value]="value" [triggerAriaLabel]="group.label" (valueChange)="change($event)">
+ *       <ng-template yuwComboboxTrigger let-summary>
+ *         <span class="font-semibold">{{ group.label }}</span> {{ summary }}
+ *       </ng-template>
+ *     </yuw-combobox>
  *   </ng-template>
  * </yuw-list-toolbar>
  * ```
@@ -3844,11 +3923,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 const VIEW_MODES = ['list', 'block'];
 const DEFAULT_VIEW_MODE_ICONS = { list: 'lucideList', block: 'lucideLayoutGrid' };
-/**
- * What counts as inside the columns popover: its trigger, its panel and the combobox list, which
- * renders in its own overlay outside the panel.
- */
-const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-combobox-content';
 /**
  * Action row of `yuw-list-toolbar`: search, export and column visibility, each rendered only when
  * its input is set. Below `md` the search collapses into a popover; both widths bind the same
@@ -3856,10 +3930,8 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * holding `yuwPopoverTrigger`.
  *
  * `hiddenColumns` is two-way: the consumer can seed it (a restored preference) and the combobox
- * reflects it. While it is not empty the columns button carries a red dot. Opening the columns
- * popover also opens the combobox list, so the choice is one click away. That list lives in its own
- * overlay, which swallows the first outside press, so a press outside both closes the popover
- * directly and one click is enough. Tabbing focus out of the popover closes it the same way.
+ * reflects it. The columns button is the combobox's own trigger, so a click opens the column list
+ * directly. While some column is hidden the button carries a red dot.
  *
  * A set `viewMode` adds the list/block switch. The selected entry drops its border so both entries
  * keep the same height, and the entry after it takes back the leading border the group strips, so the
@@ -3882,9 +3954,6 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  */
 class YuwListToolbarActionsComponent {
     constructor() {
-        this._document = inject(DOCUMENT$1);
-        this._injector = inject(Injector);
-        this._columnsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_columnsCombobox" }] : /* istanbul ignore next */ []));
         this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
         this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
         this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
@@ -3897,7 +3966,6 @@ class YuwListToolbarActionsComponent {
         this.exported = output();
         this.searched = output();
         this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
-        this.settingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "settingsOpen" }] : /* istanbul ignore next */ []));
         this._searchIsOnlyAction = computed(() => !this.showExport() && !this.hideableColumns(), ...(ngDevMode ? [{ debugName: "_searchIsOnlyAction" }] : /* istanbul ignore next */ []));
         this.hasHiddenColumns = computed(() => this.hiddenColumns().length > 0, ...(ngDevMode ? [{ debugName: "hasHiddenColumns" }] : /* istanbul ignore next */ []));
         this.searchPopoverAlign = computed(() => (this._searchIsOnlyAction() ? 'end' : 'center'), ...(ngDevMode ? [{ debugName: "searchPopoverAlign" }] : /* istanbul ignore next */ []));
@@ -3918,27 +3986,6 @@ class YuwListToolbarActionsComponent {
             ...DEFAULT_VIEW_MODE_ICONS,
             ...this.viewModeIcons(),
         }), ...(ngDevMode ? [{ debugName: "viewModeIconNames" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (this.settingsOpen()) {
-                afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
-            }
-        });
-        effect((onCleanup) => {
-            if (!this.settingsOpen()) {
-                return;
-            }
-            const closeWhenOutside = (event) => {
-                if (event.target instanceof Element && !event.target.closest(INSIDE_COLUMNS_SELECTOR)) {
-                    this.settingsOpen.set(false);
-                }
-            };
-            this._document.addEventListener('pointerdown', closeWhenOutside, true);
-            this._document.addEventListener('focusin', closeWhenOutside, true);
-            onCleanup(() => {
-                this._document.removeEventListener('pointerdown', closeWhenOutside, true);
-                this._document.removeEventListener('focusin', closeWhenOutside, true);
-            });
-        });
     }
     onHiddenColumnsChange(value) {
         this.hiddenColumns.set(Array.isArray(value) ? value : value ? [value] : []);
@@ -3947,7 +3994,7 @@ class YuwListToolbarActionsComponent {
         this.viewMode.set(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-combobox\n    multiple\n    keepValueOnEscape\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [options]=\"columns\"\n    [value]=\"hiddenColumns()\"\n    [searchPlaceholder]=\"labels().columns.placeholder\"\n    [emptyText]=\"labels().columns.empty\"\n    [triggerAriaLabel]=\"labels().columns.trigger\"\n    (valueChange)=\"onHiddenColumnsChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </ng-template>\n  </yuw-combobox>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -3958,149 +4005,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwButtonGroupComponent,
                         YuwButtonGroupContentDirective,
                         YuwComboboxComponent,
+                        YuwComboboxTriggerDirective,
                         YuwPopoverComponent,
                         YuwSearchInputComponent,
-                    ], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
-
-/**
- * Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
- * entry it belongs to; the template is exposed through `templateRef` for the host to render.
- *
- * Inputs:
- * - `yuwTabContent`: Required string; id of the tab entry this template is the content of.
- */
-class YuwTabContentDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwTabContent' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabContentDirective, isStandalone: true, selector: "ng-template[yuwTabContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwTabContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[yuwTabContent]',
-                }]
-        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabContent", required: true }] }] } });
-
-/**
- * Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
- * id of the tab it belongs to, matching an entry in the `tabs` input.
- *
- * Usage:
- * ```html
- * <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
- * ```
- *
- * Inputs:
- * - `yuwTabPanel`: Required string; id of the tab, matching an entry in the `tabs` input, that this panel renders for.
- */
-class YuwTabPanelDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'yuwTabPanel' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabPanelDirective, isStandalone: true, selector: "ng-template[yuwTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "yuwTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[yuwTabPanel]',
-                }]
-        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
-
-/**
- * Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
- *
- * Two things scale, and both have to be written with the helm's own modifier prefixes so
- * tailwind-merge displaces the helm class rather than leaving it standing:
- *
- * - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
- *   orientation has a fixed height; the vertical one is `h-fit` and is left alone.
- * - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
- *   tight enough that a taller list would look cramped, and the triggers are separate components
- *   with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
- *   list.
- */
-const yuwTabsSizeVariants = cva('', {
-    variants: {
-        size: {
-            default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
-            xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
-            sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
-            lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-
-/**
- * Tabbed navigation between sibling panels.
- *
- * Triggers come from the `tabs` input; each panel's content is declared by the consumer as an
- * `<ng-template yuwTabPanel="<id>">` whose id matches a tab. Panels are lazy: a panel's content
- * is only instantiated the first time its tab becomes active (and stays alive, hidden, after
- * switching away).
- *
- * Inputs / Models:
- * - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
- * - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
- *   programmatically; listen to `activeTabChange` to react to activations.
- * - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
- * - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
- * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
- * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
- *   `'manual'` requires Enter/Space). Default is `'automatic'`.
- * - `class`: Extra classes merged onto the tab list, last, so they win over the component's own classes.
- *
- * Usage:
- * ```html
- * <yuw-tabs [tabs]="tabs" [(activeTab)]="selected">
- *   <ng-template yuwTabPanel="general">Contenido general</ng-template>
- *   <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
- * </yuw-tabs>
- * ```
- */
-class YuwTabsComponent {
-    constructor() {
-        this._contents = contentChildren(YuwTabContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
-        this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
-        this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
-        this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this._listClass = computed(() => cn(yuwTabsSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
-        this._resolved = computed(() => {
-            const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
-            const entries = this.tabs();
-            return entries.map((entry) => {
-                return {
-                    ...entry,
-                    template: templates.get(entry.id),
-                };
-            });
-        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
-    }
-    onTabActivated(tabId) {
-        this.activeTab.set(tabId);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$j.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$j.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$j.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$j.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$j.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
-        }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+                    ], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-combobox\n    multiple\n    keepValueOnEscape\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [options]=\"columns\"\n    [value]=\"hiddenColumns()\"\n    [searchPlaceholder]=\"labels().columns.placeholder\"\n    [emptyText]=\"labels().columns.empty\"\n    [triggerAriaLabel]=\"labels().columns.trigger\"\n    (valueChange)=\"onHiddenColumnsChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </ng-template>\n  </yuw-combobox>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n" }]
+        }], propDecorators: { hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /** Number of selected values across every group, not the number of groups. */
 function countSelectedValues(selection) {
@@ -4110,77 +4019,26 @@ function isSameSelection(first, second) {
     const groupIds = new Set([...Object.keys(first), ...Object.keys(second)]);
     return [...groupIds].every((groupId) => isSameEntry(first[groupId], second[groupId]));
 }
-function isSameEntry(applied, staged) {
-    if (Array.isArray(applied) && Array.isArray(staged)) {
-        return applied.length === staged.length && new Set(applied).size === new Set([...applied, ...staged]).size;
-    }
-    return applied === staged;
-}
 /**
- * Staged selection behind the filter editor. Picking an option changes the draft, not the applied
- * selection, so the page does not re-query on every click; only `snapshot()` is committed.
+ * Returns `selection` with `value` stored under `groupId`; `undefined`, `''` or an empty array drops
+ * the group. Returns the same reference when nothing changes, so a signal holding it does not notify.
  */
-class YuwFilterDraft {
-    clear() {
-        this._entries.set({});
-    }
-    constructor(applied) {
-        this.applied = applied;
-        this._entries = linkedSignal(() => ({ ...this.applied() }), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
-        this.values = this._entries.asReadonly();
-        this.pendingGroupIds = computed(() => {
-            const committed = this.applied();
-            const staged = this._entries();
-            return new Set([...new Set([...Object.keys(committed), ...Object.keys(staged)])].filter((groupId) => !isSameEntry(committed[groupId], staged[groupId])));
-        }, ...(ngDevMode ? [{ debugName: "pendingGroupIds" }] : /* istanbul ignore next */ []));
-        this.checkedValues = computed(() => Object.fromEntries(Object.entries(this._entries()).map(([groupId, entry]) => [
-            groupId,
-            new Set(Array.isArray(entry) ? entry : [entry]),
-        ])), ...(ngDevMode ? [{ debugName: "checkedValues" }] : /* istanbul ignore next */ []));
-        this.selectedCount = computed(() => countSelectedValues(this._entries()), ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
-    }
-    reset() {
-        this._entries.set({ ...this.applied() });
-    }
-    /** Stages a whole value for a group; `undefined` or an empty array clears it. */
-    set(groupId, value) {
-        this._setSingle(groupId, Array.isArray(value) && value.length === 0 ? undefined : value);
-    }
-    snapshot() {
-        return this._entries();
-    }
-    /**
-     * A `single` group behaves like a radio that can also be emptied: checking replaces the held
-     * value, and unchecking only clears the group when it names the value actually held.
-     */
-    toggle(group, value, checked) {
-        if (group.mode === 'multiple') {
-            this._setMultiple(group.id, value, checked);
-            return;
-        }
-        if (checked) {
-            this._setSingle(group.id, value);
-            return;
-        }
-        if (this.checkedValues()[group.id]?.has(value)) {
-            this._setSingle(group.id, undefined);
+function withFilterValue(selection, groupId, value) {
+    const empty = value === undefined || value === '' || (Array.isArray(value) && value.length === 0);
+    if (empty) {
+        if (!(groupId in selection)) {
+            return selection;
         }
-    }
-    _setMultiple(groupId, value, checked) {
-        this._entries.update((entries) => {
-            const entry = entries[groupId];
-            const current = Array.isArray(entry) ? entry : [];
-            const next = checked ? [...current, value] : current.filter((item) => item !== value);
-            return next.length === 0 ? YuwFilterDraft.without(entries, groupId) : { ...entries, [groupId]: next };
-        });
-    }
-    _setSingle(groupId, value) {
-        this._entries.update((entries) => value === undefined ? YuwFilterDraft.without(entries, groupId) : { ...entries, [groupId]: value });
-    }
-    static without(entries, groupId) {
-        const { [groupId]: _removed, ...rest } = entries;
+        const { [groupId]: _removed, ...rest } = selection;
         return rest;
     }
+    return isSameEntry(selection[groupId], value) ? selection : { ...selection, [groupId]: value };
+}
+function isSameEntry(first, second) {
+    if (Array.isArray(first) && Array.isArray(second)) {
+        return first.length === second.length && new Set(first).size === new Set([...first, ...second]).size;
+    }
+    return first === second;
 }
 
 const NAME_MAX_LENGTH = 25;
@@ -4310,152 +4168,62 @@ class YuwListToolbarFilterSetsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetsComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-sets", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: true, transformFunction: null }, stretchActions: { classPropertyName: "stretchActions", publicName: "stretchActions", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteRequested: "deleteRequested", editRequested: "editRequested", itemEditRequested: "itemEditRequested", picked: "picked", saveRequested: "saveRequested" }, host: { classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], viewQueries: [{ propertyName: "_combobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span class=\"yuw-reveal inline-flex\" (click)=\"$event.stopPropagation()\">\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetsComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-sets", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: true, transformFunction: null }, stretchActions: { classPropertyName: "stretchActions", publicName: "stretchActions", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteRequested: "deleteRequested", editRequested: "editRequested", itemEditRequested: "itemEditRequested", picked: "picked", saveRequested: "saveRequested" }, host: { classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], viewQueries: [{ propertyName: "_combobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span class=\"yuw-reveal inline-flex\" (click)=\"$event.stopPropagation()\">\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-list-toolbar-filter-sets', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwComboboxComponent, YuwComboboxItemDirective], providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], host: { class: 'flex max-w-full flex-col gap-3' }, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span class=\"yuw-reveal inline-flex\" (click)=\"$event.stopPropagation()\">\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { _combobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSave", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: true }] }], stretchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretchActions", required: false }] }], titleHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHidden", required: false }] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }], editRequested: [{ type: i0.Output, args: ["editRequested"] }], itemEditRequested: [{ type: i0.Output, args: ["itemEditRequested"] }], picked: [{ type: i0.Output, args: ["picked"] }], saveRequested: [{ type: i0.Output, args: ["saveRequested"] }] } });
 
-const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
-/**
- * Filter control of `yuw-list-toolbar`: one welded group of buttons that opens a single panel, a
- * popover from `md` up and a bottom sheet below it. The panel shows one view at a time: the filter
- * editor (two panes in the popover, one tab per group in the sheet), the saved sets, or the form
- * that names, renames or deletes a set.
- *
- * The group reads: star (sets) followed by the name of the set that matches the applied selection,
- * filter icon with the count of applied values, and a clear button. Every button swaps the panel view itself
- * and stops the click, so the popover trigger never double-toggles; pressing the button of the
- * view already showing closes the panel. `activeCount` reads the applied selection, not the draft,
- * and opening the panel discards unapplied draft changes.
- *
- * Saved sets are on when both `sets` and `labels.sets` are given; without them the star is not
- * rendered. The star is never disabled. The sets view lists the sets and offers what fits the
- * applied selection: save it when it matches no set, edit or delete when it matches one. Choosing
- * "none" restores the selection held before the first set was applied, but only while a set is the
- * one applied, so it never discards hand-picked filters. The view is reset when the panel is
- * opened from a button, not when it closes, so it does not flash back while closing. A change of
- * layout closes the panel, since a popover opened from a sheet has no anchor to position against.
- * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
+/**
+ * Saved-sets control of the filter row: a star button, widened with the name of the set that matches
+ * the applied selection, opening a popover with the sets list or the form that saves, renames or
+ * deletes a set. Opening it from the star always lands on the list.
+ *
+ * Choosing "none" restores the selection held before the first set was applied, but only while a
+ * set is the one applied, so it never discards hand-picked filters. Persisting is the consumer's job:
+ * this component only emits `setSaved`, `setRenamed`, `setDeleted`, and `sets` may come from any
+ * store (an IndexedDB per project, say).
  *
  * Inputs:
- * - `contents`: `yuwFilterContent` templates; a group whose id has one renders it instead of the checkbox list. Default is `[]`.
- * - `disabled`: Disables every button of the group. Default is `false`.
- * - `groups`: Required filter groups the editor offers, one pane or tab each.
- * - `idleColor`: Required tone of the buttons while no filter is applied.
- * - `isMobile`: Required flag; true opens the panel as a bottom sheet, false as a popover.
- * - `labels`: Required `YuwListToolbarFilterLabels` with the consumer's text for the panel and its buttons.
+ * - `idleColor`: Required tone of the outline star while no set is applied; an applied set turns it `secondary`.
+ * - `labels`: Required `YuwFilterSetLabels` with the consumer's text.
  * - `selection`: Two-way (`[(selection)]`) applied filter selection. Default is `{}`.
- * - `sets`: Saved filter sets; the sets star renders only when given together with `labels.sets`.
+ * - `sets`: Required saved sets.
+ *
+ * Outputs:
+ * - `setDeleted`: Emits the id of the set to delete.
+ * - `setRenamed`: Emits the id and new name of a set.
+ * - `setSaved`: Emits the typed name and the applied selection.
  */
-class YuwListToolbarFiltersComponent {
+class YuwListToolbarFilterSetPickerComponent {
     constructor() {
-        this.contents = input([], ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
         this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
-        this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
         this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        this.sets = input(...(ngDevMode ? [undefined, { debugName: "sets" }] : /* istanbul ignore next */ []));
+        this.sets = input.required(...(ngDevMode ? [{ debugName: "sets" }] : /* istanbul ignore next */ []));
         this.setDeleted = output();
         this.setRenamed = output();
         this.setSaved = output();
-        this._activeGroupId = signal(null, ...(ngDevMode ? [{ debugName: "_activeGroupId" }] : /* istanbul ignore next */ []));
+        this._formSetId = signal(undefined, ...(ngDevMode ? [{ debugName: "_formSetId" }] : /* istanbul ignore next */ []));
         this._selectionBeforeSet = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectionBeforeSet" }] : /* istanbul ignore next */ []));
-        this._setPanelId = signal(undefined, ...(ngDevMode ? [{ debugName: "_setPanelId" }] : /* istanbul ignore next */ []));
-        this.draft = new YuwFilterDraft(this.selection);
+        this.formMode = signal(null, ...(ngDevMode ? [{ debugName: "formMode" }] : /* istanbul ignore next */ []));
         this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.panelView = signal('filters', ...(ngDevMode ? [{ debugName: "panelView" }] : /* istanbul ignore next */ []));
-        this.activeCount = computed(() => countSelectedValues(this.selection()), ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
-        this.activeGroup = computed(() => {
-            const groups = this.groups();
-            const id = this._activeGroupId();
-            return groups.find((group) => group.id === id) ?? groups.at(0) ?? null;
-        }, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
-        this.hasActive = computed(() => this.activeCount() > 0, ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
+        this.hasActive = computed(() => countSelectedValues(this.selection()) > 0, ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
         this.matchingSet = computed(() => {
             const selection = this.selection();
-            return this.hasActive() ? this.sets()?.find((set) => isSameSelection(set.selection, selection)) : undefined;
+            return this.hasActive() ? this.sets().find((set) => isSameSelection(set.selection, selection)) : undefined;
         }, ...(ngDevMode ? [{ debugName: "matchingSet" }] : /* istanbul ignore next */ []));
-        this.setLabels = computed(() => (this.sets() ? this.labels().sets : undefined), ...(ngDevMode ? [{ debugName: "setLabels" }] : /* istanbul ignore next */ []));
-        this.buttons = computed(() => {
-            const variant = this.hasActive() ? 'secondary' : 'outline';
-            const borderless = this.hasActive() ? 'border-0' : '';
-            const disabled = this.disabled();
-            const { title, clearAll } = this.labels();
-            const setLabels = this.setLabels();
-            const entries = [
-                { id: 'filters', ariaLabel: title, tooltip: title, size: 'icon', variant, disabled, class: borderless },
-            ];
-            if (setLabels) {
-                entries.unshift({
-                    id: 'sets',
-                    ariaLabel: setLabels.title,
-                    tooltip: setLabels.title,
-                    size: this.matchingSet() ? 'default' : 'icon',
-                    variant,
-                    disabled,
-                    class: borderless,
-                });
-            }
-            if (this.hasActive()) {
-                entries.push({ id: 'clear', ariaLabel: clearAll, size: 'icon', disabled, class: borderless });
-            }
-            return entries;
-        }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
-        this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
-        this.canSaveSet = computed(() => this.hasActive() && !this.matchingSet(), ...(ngDevMode ? [{ debugName: "canSaveSet" }] : /* istanbul ignore next */ []));
-        this.changers = computed(() => Object.fromEntries(this.groups().map((group) => [group.id, (value) => this.draft.set(group.id, value)])), ...(ngDevMode ? [{ debugName: "changers" }] : /* istanbul ignore next */ []));
-        this.contentTemplates = computed(() => Object.fromEntries(this.contents().map((content) => [content.groupId(), content.templateRef])), ...(ngDevMode ? [{ debugName: "contentTemplates" }] : /* istanbul ignore next */ []));
+        this.canSave = computed(() => this.hasActive() && !this.matchingSet(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+        this.formName = computed(() => this.sets().find((set) => set.id === this._formSetId())?.name ?? '', ...(ngDevMode ? [{ debugName: "formName" }] : /* istanbul ignore next */ []));
         this.selectedSetId = computed(() => this.matchingSet()?.id ?? NO_FILTER_SET, ...(ngDevMode ? [{ debugName: "selectedSetId" }] : /* istanbul ignore next */ []));
-        this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
-        this.setPanelMode = computed(() => {
-            const view = this.panelView();
-            return FORM_VIEWS.has(view) ? view : null;
-        }, ...(ngDevMode ? [{ debugName: "setPanelMode" }] : /* istanbul ignore next */ []));
-        this.setPanelName = computed(() => this.sets()?.find((set) => set.id === this._setPanelId())?.name ?? '', ...(ngDevMode ? [{ debugName: "setPanelName" }] : /* istanbul ignore next */ []));
-        this.sheetTitle = computed(() => {
-            const mode = this.setPanelMode();
-            const setLabels = this.setLabels();
-            if (mode && setLabels) {
-                return filterSetFormTitle(mode, setLabels);
-            }
-            return this.panelView() === 'sets' && setLabels ? setLabels.title : this.labels().title;
-        }, ...(ngDevMode ? [{ debugName: "sheetTitle" }] : /* istanbul ignore next */ []));
-        this.tabs = computed(() => this.groups().map((group) => ({ id: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (this.open()) {
-                untracked(() => this.draft.reset());
-            }
-        });
-        effect(() => {
-            this.isMobile();
-            untracked(() => this.open.set(false));
-        });
+        this.triggerColor = computed(() => (this.matchingSet() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerSize = computed(() => (this.matchingSet() ? 'default' : 'icon'), ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = computed(() => (this.matchingSet() ? 'secondary' : 'outline'), ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
     }
-    onApply() {
-        this.commit(this.draft.snapshot());
-    }
-    onButtonClicked({ id, event }) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (id === 'clear') {
-            this.commit({});
-            return;
-        }
-        this.togglePanel(id === 'filters' ? 'filters' : 'sets');
-    }
-    onOptionChange(group, value, checked) {
-        this.draft.toggle(group, value, checked);
-    }
-    onSetDeleteRequested() {
-        this.panelView.set('delete');
-    }
-    onSetFormConfirmed(name) {
-        const mode = this.setPanelMode();
-        const setId = this._setPanelId() ?? '';
+    onFormConfirmed(name) {
+        const mode = this.formMode();
+        const setId = this._formSetId() ?? '';
         const handlers = {
             save: () => this.setSaved.emit({ name, selection: this.selection() }),
             rename: () => this.setRenamed.emit({ id: setId, name }),
@@ -4466,7 +4234,13 @@ class YuwListToolbarFiltersComponent {
         }
         this.open.set(false);
     }
-    onSetPicked(value) {
+    onOpenChange(open) {
+        if (open) {
+            this.formMode.set(null);
+        }
+        this.open.set(open);
+    }
+    onPicked(value) {
         if (value === this.selectedSetId()) {
             return;
         }
@@ -4475,7 +4249,7 @@ class YuwListToolbarFiltersComponent {
             this._selectionBeforeSet.set(undefined);
             return;
         }
-        const set = this.sets()?.find((candidate) => candidate.id === value);
+        const set = this.sets().find((candidate) => candidate.id === value);
         if (!set) {
             return;
         }
@@ -4484,68 +4258,171 @@ class YuwListToolbarFiltersComponent {
         }
         this.selection.set(set.selection);
     }
-    openSetPanel(mode, setId) {
-        this._setPanelId.set(setId);
-        this.panelView.set(mode);
-        this.open.set(true);
+    openForm(mode, setId) {
+        this._formSetId.set(setId);
+        this.formMode.set(mode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetPickerComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-set-picker", inputs: { idleColor: { classPropertyName: "idleColor", publicName: "idleColor", 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: true, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideStar })], ngImport: i0, template: "<yuw-popover\n  align=\"start\"\n  panelClass=\"w-64 p-2 dark:border\"\n  triggerClass=\"shrink-0 gap-1.5\"\n  [triggerColor]=\"triggerColor()\"\n  [triggerSize]=\"triggerSize()\"\n  [triggerVariant]=\"triggerVariant()\"\n  [open]=\"open()\"\n  (openChange)=\"onOpenChange($event)\"\n>\n  <span yuwPopoverTrigger class=\"flex min-w-0 items-center gap-1.5\" [attr.aria-label]=\"labels().title\">\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  </span>\n\n  @if (formMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      class=\"p-1\"\n      [labels]=\"labels()\"\n      [mode]=\"mode\"\n      [name]=\"formName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onFormConfirmed($event)\"\n      (deleteRequested)=\"formMode.set('delete')\"\n    />\n  } @else {\n    <yuw-list-toolbar-filter-sets\n      class=\"p-1\"\n      [stretchActions]=\"true\"\n      [labels]=\"labels()\"\n      [sets]=\"sets()\"\n      [selectedId]=\"selectedSetId()\"\n      [canSave]=\"canSave()\"\n      [canEdit]=\"!!matchingSet()\"\n      (picked)=\"onPicked($event)\"\n      (itemEditRequested)=\"openForm('rename', $event)\"\n      (saveRequested)=\"openForm('save')\"\n      (editRequested)=\"openForm('rename', matchingSet()?.id)\"\n      (deleteRequested)=\"openForm('delete', matchingSet()?.id)\"\n    />\n  }\n</yuw-popover>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-list-toolbar-filter-set-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwListToolbarFilterSetFormComponent, YuwListToolbarFilterSetsComponent, YuwPopoverComponent], providers: [provideIcons({ lucideStar })], host: { class: 'contents' }, template: "<yuw-popover\n  align=\"start\"\n  panelClass=\"w-64 p-2 dark:border\"\n  triggerClass=\"shrink-0 gap-1.5\"\n  [triggerColor]=\"triggerColor()\"\n  [triggerSize]=\"triggerSize()\"\n  [triggerVariant]=\"triggerVariant()\"\n  [open]=\"open()\"\n  (openChange)=\"onOpenChange($event)\"\n>\n  <span yuwPopoverTrigger class=\"flex min-w-0 items-center gap-1.5\" [attr.aria-label]=\"labels().title\">\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  </span>\n\n  @if (formMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      class=\"p-1\"\n      [labels]=\"labels()\"\n      [mode]=\"mode\"\n      [name]=\"formName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onFormConfirmed($event)\"\n      (deleteRequested)=\"formMode.set('delete')\"\n    />\n  } @else {\n    <yuw-list-toolbar-filter-sets\n      class=\"p-1\"\n      [stretchActions]=\"true\"\n      [labels]=\"labels()\"\n      [sets]=\"sets()\"\n      [selectedId]=\"selectedSetId()\"\n      [canSave]=\"canSave()\"\n      [canEdit]=\"!!matchingSet()\"\n      (picked)=\"onPicked($event)\"\n      (itemEditRequested)=\"openForm('rename', $event)\"\n      (saveRequested)=\"openForm('save')\"\n      (editRequested)=\"openForm('rename', matchingSet()?.id)\"\n      (deleteRequested)=\"openForm('delete', matchingSet()?.id)\"\n    />\n  }\n</yuw-popover>\n" }]
+        }], propDecorators: { idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", 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: true }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
+
+/**
+ * Squares the trailing edge of the combobox trigger in an active filter, the library's or one a
+ * `yuwFilterContent` template renders, so it and the remove button read as one control.
+ */
+const WELD_CLASS = '[&_[data-slot=combobox-trigger]>button]:rounded-e-none [&_[data-slot=combobox-trigger]>button]:border-e-0';
+/**
+ * Filter row of `yuw-list-toolbar`: the saved-sets star, the add-filter button and the active filters
+ * in a horizontally scrolling strip.
+ *
+ * Every active filter is a `yuw-combobox` whose `secondary` trigger reads "Group values", welded to a
+ * `secondary` `yuw-button` that removes the filter, value included, so both read as one control. A click opens the option list directly and
+ * every pick applies at once. The add-filter button is a multiple combobox listing every group, the
+ * active ones checked: checking adds a filter and opens its list, unchecking removes it, and while any filter is active
+ * its list ends with a button that removes them all. A group with a value is always active, so a
+ * selection set from outside (a restored IndexedDB entry, a saved set) shows its filters on its own;
+ * an added group without a value stays until it is removed.
+ *
+ * `disabled` disables the whole row through a native `<fieldset disabled>`, which reaches every
+ * button inside without wiring each control.
+ *
+ * Inputs:
+ * - `contents`: `yuwFilterContent` templates; a group whose id has one renders it instead of its combobox. Default is `[]`.
+ * - `disabled`: Disables every control of the row. Default is `false`.
+ * - `groups`: Required filter groups the row offers.
+ * - `idleColor`: Required tone of the active filters, and of the star while no set is applied.
+ * - `labels`: Required `YuwListToolbarFilterLabels` with the consumer's text.
+ * - `selection`: Two-way (`[(selection)]`) applied filter selection. Default is `{}`.
+ * - `sets`: Saved filter sets; the star renders only when given together with `labels.sets`.
+ *
+ * Outputs:
+ * - `setDeleted`, `setRenamed`, `setSaved`: Saved-set requests the consumer persists.
+ */
+class YuwListToolbarFiltersComponent {
+    constructor() {
+        this._host = inject(ElementRef);
+        this._injector = inject(Injector);
+        this._addBox = viewChild('addBox', ...(ngDevMode ? [{ debugName: "_addBox" }] : /* istanbul ignore next */ []));
+        this.contents = input([], ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
+        this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.sets = input(...(ngDevMode ? [undefined, { debugName: "sets" }] : /* istanbul ignore next */ []));
+        this.setDeleted = output();
+        this.setRenamed = output();
+        this.setSaved = output();
+        this._activated = signal([], ...(ngDevMode ? [{ debugName: "_activated" }] : /* istanbul ignore next */ []));
+        this.weldClass = WELD_CLASS;
+        this.activeIds = computed(() => {
+            const activated = this._activated();
+            return [...activated, ...Object.keys(this.selection()).filter((id) => !activated.includes(id))];
+        }, ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+        this.activeGroups = computed(() => {
+            const byId = new Map(this.groups().map((group) => [group.id, group]));
+            return this.activeIds()
+                .map((id) => byId.get(id))
+                .filter((group) => group !== undefined);
+        }, ...(ngDevMode ? [{ debugName: "activeGroups" }] : /* istanbul ignore next */ []));
+        this.addOptions = computed(() => this.groups().map((group) => ({ value: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "addOptions" }] : /* istanbul ignore next */ []));
+        this.addValue = computed(() => [...this.activeIds()], ...(ngDevMode ? [{ debugName: "addValue" }] : /* istanbul ignore next */ []));
+        this.changers = computed(() => Object.fromEntries(this.groups().map((group) => [
+            group.id,
+            (value) => this.onValueChange(group.id, value),
+        ])), ...(ngDevMode ? [{ debugName: "changers" }] : /* istanbul ignore next */ []));
+        this.contentTemplates = computed(() => Object.fromEntries(this.contents().map((content) => [content.groupId(), content.templateRef])), ...(ngDevMode ? [{ debugName: "contentTemplates" }] : /* istanbul ignore next */ []));
+        this.options = computed(() => Object.fromEntries(this.groups().map((group) => [group.id, (group.options ?? []).map((option) => ({ ...option }))])), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.setLabels = computed(() => (this.sets() ? this.labels().sets : undefined), ...(ngDevMode ? [{ debugName: "setLabels" }] : /* istanbul ignore next */ []));
+        this.values = computed(() => Object.fromEntries(Object.entries(this.selection()).map(([id, value]) => [id, Array.isArray(value) ? [...value] : value])), ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Syncs the active filters with the checked groups: unchecked ones are removed with their value and
+     * new ones added at the start of the strip, next to the add button, so the first filter added ends
+     * up rightmost. Checking a group also closes the add list and, once rendered, opens the new filter.
+     */
+    onActiveChange(value) {
+        const checked = Array.isArray(value) ? value : value ? [value] : [];
+        const active = this.activeIds();
+        const added = checked.filter((id) => !active.includes(id));
+        active.filter((id) => !checked.includes(id)).forEach((id) => this.onRemoved(id));
+        this._activated.update((ids) => [...[...added].reverse(), ...ids]);
+        const opened = added.at(-1);
+        if (opened === undefined) {
+            return;
+        }
+        this._addBox()?.close();
+        afterNextRender(() => this._openFilter(opened), { injector: this._injector });
+    }
+    onClearAll() {
+        this._activated.set([]);
+        this.selection.set({});
+        this._addBox()?.close();
     }
-    selectGroup(groupId) {
-        this._activeGroupId.set(groupId);
+    onRemoved(groupId) {
+        this._activated.update((ids) => ids.filter((id) => id !== groupId));
+        this.onValueChange(groupId, undefined);
     }
-    commit(selection) {
-        this.selection.set(selection);
-        this.open.set(false);
+    onValueChange(groupId, value) {
+        this.selection.update((selection) => withFilterValue(selection, groupId, value));
     }
-    togglePanel(view) {
-        if (this.open() && this.panelView() === view) {
-            this.open.set(false);
+    /**
+     * Focuses a filter and opens its list. The filter may come from a `yuwFilterContent` template, whose
+     * combobox this component cannot query, so it is found in the DOM: the combobox trigger inside the
+     * filter is focused and clicked as the user would; without one, its first focusable control is
+     * focused.
+     */
+    _openFilter(groupId) {
+        const filter = this._host.nativeElement.querySelector(`[data-filter-id="${CSS.escape(groupId)}"]`);
+        const trigger = filter?.querySelector('[data-slot=combobox-trigger] button');
+        if (trigger) {
+            trigger.focus();
+            trigger.click();
             return;
         }
-        this.panelView.set(view);
-        this.open.set(true);
+        filter?.querySelector('button, input, [tabindex]')?.focus();
     }
     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  <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 }); }
+    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 }, 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" }, providers: [provideIcons({ lucidePlus, lucideX })], viewQueries: [{ propertyName: "_addBox", first: true, predicate: ["addBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset class=\"m-0 flex min-w-0 items-center gap-2 border-0 p-0\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuw-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      class=\"-my-1 flex min-w-0 items-center gap-2 overflow-x-auto px-px py-1 scroll-fade-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { kind: "component", type: YuwListToolbarFilterSetPickerComponent, selector: "yuw-list-toolbar-filter-set-picker", inputs: ["idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-list-toolbar-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet,
                         NgIcon,
-                        YuwBadgeComponent,
+                        NgTemplateOutlet,
                         YuwButtonComponent,
-                        YuwButtonGroupComponent,
-                        YuwButtonGroupContentDirective,
-                        YuwCheckboxComponent,
-                        YuwListToolbarFilterSetFormComponent,
-                        YuwListToolbarFilterSetsComponent,
-                        YuwPopoverComponent,
-                        YuwSheetComponent,
-                        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  <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"] }] } });
+                        YuwComboboxComponent,
+                        YuwComboboxTriggerDirective,
+                        YuwListToolbarFilterSetPickerComponent,
+                    ], providers: [provideIcons({ lucidePlus, lucideX })], host: { class: 'flex min-w-0 max-w-full' }, template: "<fieldset class=\"m-0 flex min-w-0 items-center gap-2 border-0 p-0\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuw-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      class=\"-my-1 flex min-w-0 items-center gap-2 overflow-x-auto px-px py-1 scroll-fade-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n" }]
+        }], propDecorators: { _addBox: [{ type: i0.ViewChild, args: ['addBox', { isSignal: true }] }], 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 }] }], 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"] }] } });
 
 /**
  * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
- * trailing one, and projected content after them.
+ * trailing one, and projected content after them. The trailing actions keep the room they need (the
+ * search grows into it when expanded) and the filter row takes the rest, scrolling its active
+ * filters horizontally with faded edges when they do not fit.
  *
  * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
  * `showExport`, `hideableColumns`, `viewMode`. Setting `viewMode` adds a list/block switch bound
  * two-way to it (`viewModeChange` is the click listener); its names come from `labels.viewMode`. Saved filter sets need `filterSets` and `labels.filters.sets`;
  * the toolbar emits `setSaved`, `setRenamed` and `setDeleted` and the consumer persists them. `labels` holds every text and the consumer translates it;
- * `idleColor` is the filter trigger tone while nothing is applied. A filter group may omit `options` and be
- * rendered by a projected `<ng-template yuwFilterContent="groupId">` instead (a combobox, say); see
- * `YuwFilterContentDirective`.
+ * `idleColor` is the tone of the filter row's outline controls (filters, add button, star). Each active
+ * group renders a combobox opened from an outline button; a projected `<ng-template yuwFilterContent="groupId">` replaces it (see
+ * `YuwFilterContentDirective`). `selection` may be set from outside at any time, e.g. restored from
+ * IndexedDB, and the row shows a filter for every group it holds.
  *
  * Inputs:
  * - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
  * - `filterSets`: Saved filter sets; together with `labels.filters.sets` it enables the sets star.
- * - `filtersDisabled`: Disables the filter buttons. Default is `false`.
+ * - `filtersDisabled`: Disables every control of the filter row. Default is `false`.
  * - `hiddenColumns`: Two-way (`[(hiddenColumns)]`) ids of the columns currently hidden. Default is `[]`.
  * - `hideableColumns`: Options of the columns the user may hide; the columns button renders only when set.
- * - `idleColor`: `YuwColorDto` tone of the filter trigger while nothing is applied. Default is `'neutral'`.
+ * - `idleColor`: `YuwColorDto` tone of the filter row's outline controls. Default is `'neutral'`.
  * - `labels`: Required `YuwListToolbarLabels` with the consumer's translated text for every control.
  * - `search`: Two-way (`[(search)]`) text of the search field. Default is `''`.
  * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
@@ -4582,11 +4459,11 @@ class YuwListToolbarComponent {
         this.isMobile = injectIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, queries: [{ propertyName: "filterContents", predicate: YuwFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "isMobile", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex items-center gap-3" }, queries: [{ propertyName: "filterContents", predicate: YuwFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 flex-1 items-center overflow-hidden\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex shrink-0 items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
+            args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex items-center gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 flex-1 items-center overflow-hidden\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex shrink-0 items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
         }], propDecorators: { filterContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwFilterContentDirective), { isSignal: true }] }], filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 const YUW_DATATABLE_FEATURES = {
@@ -5597,6 +5474,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\" />\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content />\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
         }], propDecorators: { hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", 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"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
 
+/**
+ * Size classes for `<yuw-tabs>`, applied to the `hlm-tabs-list`.
+ *
+ * Two things scale, and both have to be written with the helm's own modifier prefixes so
+ * tailwind-merge displaces the helm class rather than leaving it standing:
+ *
+ * - The list height, declared by the helm as `group-data-horizontal/tabs:h-8`. Only the horizontal
+ *   orientation has a fixed height; the vertical one is `h-fit` and is left alone.
+ * - The triggers' horizontal padding, reached through a descendant selector. The helm's `px-1.5` is
+ *   tight enough that a taller list would look cramped, and the triggers are separate components
+ *   with no class passthrough. Their height needs nothing — `h-[calc(100%-1px)]` already tracks the
+ *   list.
+ */
+const yuwTabsSizeVariants = cva('', {
+    variants: {
+        size: {
+            default: 'group-data-horizontal/tabs:h-10 [&_[data-slot=tabs-trigger]]:px-2.5',
+            xs: 'group-data-horizontal/tabs:h-7 [&_[data-slot=tabs-trigger]]:px-1.5',
+            sm: 'group-data-horizontal/tabs:h-9 [&_[data-slot=tabs-trigger]]:px-2',
+            lg: 'group-data-horizontal/tabs:h-11 [&_[data-slot=tabs-trigger]]:px-3',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
+/**
+ * Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
+ * id of the tab it belongs to, matching an entry in the `tabs` input.
+ *
+ * Usage:
+ * ```html
+ * <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
+ * ```
+ *
+ * Inputs:
+ * - `yuwTabPanel`: Required string; id of the tab, matching an entry in the `tabs` input, that this panel renders for.
+ */
+class YuwTabPanelDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'yuwTabPanel' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabPanelDirective, isStandalone: true, selector: "ng-template[yuwTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "yuwTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwTabPanel]',
+                }]
+        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
+
+/**
+ * Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
+ * entry it belongs to; the template is exposed through `templateRef` for the host to render.
+ *
+ * Inputs:
+ * - `yuwTabContent`: Required string; id of the tab entry this template is the content of.
+ */
+class YuwTabContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwTabContent' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabContentDirective, isStandalone: true, selector: "ng-template[yuwTabContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwTabContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwTabContent]',
+                }]
+        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabContent", required: true }] }] } });
+
+/**
+ * Tabbed navigation between sibling panels.
+ *
+ * Triggers come from the `tabs` input; each panel's content is declared by the consumer as an
+ * `<ng-template yuwTabPanel="<id>">` whose id matches a tab. Panels are lazy: a panel's content
+ * is only instantiated the first time its tab becomes active (and stays alive, hidden, after
+ * switching away).
+ *
+ * Inputs / Models:
+ * - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
+ * - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
+ *   programmatically; listen to `activeTabChange` to react to activations.
+ * - `size`: Tab-list height, matching the `<yuw-button>` of the same name.
+ * - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
+ * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
+ * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
+ *   `'manual'` requires Enter/Space). Default is `'automatic'`.
+ * - `class`: Extra classes merged onto the tab list, last, so they win over the component's own classes.
+ *
+ * Usage:
+ * ```html
+ * <yuw-tabs [tabs]="tabs" [(activeTab)]="selected">
+ *   <ng-template yuwTabPanel="general">Contenido general</ng-template>
+ *   <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
+ * </yuw-tabs>
+ * ```
+ */
+class YuwTabsComponent {
+    constructor() {
+        this._contents = contentChildren(YuwTabContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
+        this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+        this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+        this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this._listClass = computed(() => cn(yuwTabsSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
+        this._resolved = computed(() => {
+            const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
+            const entries = this.tabs();
+            return entries.map((entry) => {
+                return {
+                    ...entry,
+                    template: templates.get(entry.id),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    }
+    onTabActivated(tabId) {
+        this.activeTab.set(tabId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$p.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$p.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$p.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$p.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$p.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
+        }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
 /**
  * Container directive for a single file attachment card.
  *
@@ -5620,7 +5636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwAttachmentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentDirective, isStandalone: true, selector: "[yuwAttachment], yuw-attachment", hostDirectives: [{ directive: i1$p.HlmAttachment, inputs: ["state", "state", "size", "size", "orientation", "orientation"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentDirective, isStandalone: true, selector: "[yuwAttachment], yuw-attachment", hostDirectives: [{ directive: i1$q.HlmAttachment, inputs: ["state", "state", "size", "size", "orientation", "orientation"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentDirective, decorators: [{
             type: Directive,
@@ -5632,7 +5648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Scrollable, snapping row that lays out several attachment cards. */
 class YuwAttachmentGroupDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentGroupDirective, isStandalone: true, selector: "[yuwAttachmentGroup], yuw-attachment-group", hostDirectives: [{ directive: i1$p.HlmAttachmentGroup }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentGroupDirective, isStandalone: true, selector: "[yuwAttachmentGroup], yuw-attachment-group", hostDirectives: [{ directive: i1$q.HlmAttachmentGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentGroupDirective, decorators: [{
             type: Directive,
@@ -5644,7 +5660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Leading media slot of an attachment, for a file-type icon or an image preview. Supports `variant` (`'icon'`, `'image'`). */
 class YuwAttachmentMediaDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentMediaDirective, isStandalone: true, selector: "[yuwAttachmentMedia], yuw-attachment-media", hostDirectives: [{ directive: i1$p.HlmAttachmentMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentMediaDirective, isStandalone: true, selector: "[yuwAttachmentMedia], yuw-attachment-media", hostDirectives: [{ directive: i1$q.HlmAttachmentMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentMediaDirective, decorators: [{
             type: Directive,
@@ -5656,7 +5672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Text content container of an attachment, holding its title and description. */
 class YuwAttachmentContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentContentDirective, isStandalone: true, selector: "[yuwAttachmentContent], yuw-attachment-content", hostDirectives: [{ directive: i1$p.HlmAttachmentContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentContentDirective, isStandalone: true, selector: "[yuwAttachmentContent], yuw-attachment-content", hostDirectives: [{ directive: i1$q.HlmAttachmentContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentContentDirective, decorators: [{
             type: Directive,
@@ -5668,7 +5684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** File name of an attachment. Truncates and shimmers while the attachment is uploading or processing. */
 class YuwAttachmentTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentTitleDirective, isStandalone: true, selector: "[yuwAttachmentTitle], yuw-attachment-title", hostDirectives: [{ directive: i1$p.HlmAttachmentTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentTitleDirective, isStandalone: true, selector: "[yuwAttachmentTitle], yuw-attachment-title", hostDirectives: [{ directive: i1$q.HlmAttachmentTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentTitleDirective, decorators: [{
             type: Directive,
@@ -5680,7 +5696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Secondary line of an attachment, for file size, progress, or an error message. */
 class YuwAttachmentDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentDescriptionDirective, isStandalone: true, selector: "[yuwAttachmentDescription], yuw-attachment-description", hostDirectives: [{ directive: i1$p.HlmAttachmentDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentDescriptionDirective, isStandalone: true, selector: "[yuwAttachmentDescription], yuw-attachment-description", hostDirectives: [{ directive: i1$q.HlmAttachmentDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentDescriptionDirective, decorators: [{
             type: Directive,
@@ -5692,7 +5708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Trailing container for an attachment's action buttons. */
 class YuwAttachmentActionsDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentActionsDirective, isStandalone: true, selector: "[yuwAttachmentActions], yuw-attachment-actions", hostDirectives: [{ directive: i1$p.HlmAttachmentActions }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentActionsDirective, isStandalone: true, selector: "[yuwAttachmentActions], yuw-attachment-actions", hostDirectives: [{ directive: i1$q.HlmAttachmentActions }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentActionsDirective, decorators: [{
             type: Directive,
@@ -5727,7 +5743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Turns the whole attachment card into a single clickable target, layered under its actions. */
 class YuwAttachmentTriggerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentTriggerDirective, isStandalone: true, selector: "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", hostDirectives: [{ directive: i1$p.HlmAttachmentTrigger, inputs: ["type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAttachmentTriggerDirective, isStandalone: true, selector: "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", hostDirectives: [{ directive: i1$q.HlmAttachmentTrigger, inputs: ["type", "type"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAttachmentTriggerDirective, decorators: [{
             type: Directive,
@@ -5996,7 +6012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwSidebarWrapperDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarWrapperDirective, isStandalone: true, selector: "[yuwSidebarWrapper], yuw-sidebar-wrapper", providers: [provideHlmSidebarConfig({ sidebarWidthIcon: YUW_SIDEBAR_RAIL_WIDTH })], hostDirectives: [{ directive: i1$q.HlmSidebarWrapper, inputs: ["sidebarWidth", "sidebarWidth", "sidebarWidthIcon", "sidebarWidthIcon"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarWrapperDirective, isStandalone: true, selector: "[yuwSidebarWrapper], yuw-sidebar-wrapper", providers: [provideHlmSidebarConfig({ sidebarWidthIcon: YUW_SIDEBAR_RAIL_WIDTH })], hostDirectives: [{ directive: i1$r.HlmSidebarWrapper, inputs: ["sidebarWidth", "sidebarWidth", "sidebarWidthIcon", "sidebarWidthIcon"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarWrapperDirective, decorators: [{
             type: Directive,
@@ -6009,7 +6025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Top area of the sidebar, above the scrollable content. */
 class YuwSidebarHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarHeaderDirective, isStandalone: true, selector: "[yuwSidebarHeader], yuw-sidebar-header", hostDirectives: [{ directive: i1$q.HlmSidebarHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarHeaderDirective, isStandalone: true, selector: "[yuwSidebarHeader], yuw-sidebar-header", hostDirectives: [{ directive: i1$r.HlmSidebarHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarHeaderDirective, decorators: [{
             type: Directive,
@@ -6046,7 +6062,7 @@ class YuwSidebarContentDirective {
         classes(() => yuwSidebarContentClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$q.HlmSidebarContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$r.HlmSidebarContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarContentDirective, decorators: [{
             type: Directive,
@@ -6061,7 +6077,7 @@ class YuwSidebarFooterDirective {
         classes(() => yuwSidebarFooterClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarFooterDirective, isStandalone: true, selector: "[yuwSidebarFooter], yuw-sidebar-footer", hostDirectives: [{ directive: i1$q.HlmSidebarFooter }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarFooterDirective, isStandalone: true, selector: "[yuwSidebarFooter], yuw-sidebar-footer", hostDirectives: [{ directive: i1$r.HlmSidebarFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarFooterDirective, decorators: [{
             type: Directive,
@@ -6084,7 +6100,7 @@ class YuwSidebarGroupDirective {
         classes(() => yuwSidebarGroupClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$q.HlmSidebarGroup }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$r.HlmSidebarGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupDirective, decorators: [{
             type: Directive,
@@ -6107,7 +6123,7 @@ class YuwSidebarGroupLabelDirective {
         classes(() => yuwSidebarGroupLabelClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupLabel }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$r.HlmSidebarGroupLabel }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupLabelDirective, decorators: [{
             type: Directive,
@@ -6119,7 +6135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Body of a sidebar group, wrapping its menu. */
 class YuwSidebarGroupContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupContentDirective, isStandalone: true, selector: "div[yuwSidebarGroupContent]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarGroupContentDirective, isStandalone: true, selector: "div[yuwSidebarGroupContent]", hostDirectives: [{ directive: i1$r.HlmSidebarGroupContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarGroupContentDirective, decorators: [{
             type: Directive,
@@ -6131,7 +6147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Navigation list of a sidebar group. Apply to a `<ul>`. */
 class YuwSidebarMenuDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuDirective, isStandalone: true, selector: "ul[yuwSidebarMenu]", hostDirectives: [{ directive: i1$q.HlmSidebarMenu }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuDirective, isStandalone: true, selector: "ul[yuwSidebarMenu]", hostDirectives: [{ directive: i1$r.HlmSidebarMenu }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuDirective, decorators: [{
             type: Directive,
@@ -6184,7 +6200,7 @@ class YuwSidebarMenuItemDirective {
         classes(() => yuwSidebarMenuItemClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuItem]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuItem]", hostDirectives: [{ directive: i1$r.HlmSidebarMenuItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuItemDirective, decorators: [{
             type: Directive,
@@ -6255,7 +6271,7 @@ class YuwSidebarMenuButtonDirective {
         classes(() => yuwSidebarMenuButtonClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$r.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuButtonDirective, decorators: [{
             type: Directive,
@@ -6313,7 +6329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Trailing count or status badge of a sidebar menu item. */
 class YuwSidebarMenuBadgeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuBadgeDirective, isStandalone: true, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge", hostDirectives: [{ directive: i1$q.HlmSidebarMenuBadge }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuBadgeDirective, isStandalone: true, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge", hostDirectives: [{ directive: i1$r.HlmSidebarMenuBadge }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuBadgeDirective, decorators: [{
             type: Directive,
@@ -6325,7 +6341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Nested submenu list of a sidebar menu item. Apply to a `<ul>`. */
 class YuwSidebarMenuSubDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubDirective, isStandalone: true, selector: "ul[yuwSidebarMenuSub]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSub }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubDirective, isStandalone: true, selector: "ul[yuwSidebarMenuSub]", hostDirectives: [{ directive: i1$r.HlmSidebarMenuSub }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubDirective, decorators: [{
             type: Directive,
@@ -6337,7 +6353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** A single entry of a sidebar submenu. Apply to an `<li>`. */
 class YuwSidebarMenuSubItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuSubItem]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuSubItem]", hostDirectives: [{ directive: i1$r.HlmSidebarMenuSubItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubItemDirective, decorators: [{
             type: Directive,
@@ -6360,7 +6376,7 @@ class YuwSidebarMenuSubButtonDirective {
         classes(() => yuwSidebarMenuSubButtonClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$r.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, decorators: [{
             type: Directive,
@@ -6372,7 +6388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Divider between sidebar sections. */
 class YuwSidebarSeparatorDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarSeparatorDirective, isStandalone: true, selector: "[yuwSidebarSeparator], yuw-sidebar-separator", hostDirectives: [{ directive: i1$q.HlmSidebarSeparator }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarSeparatorDirective, isStandalone: true, selector: "[yuwSidebarSeparator], yuw-sidebar-separator", hostDirectives: [{ directive: i1$r.HlmSidebarSeparator }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarSeparatorDirective, decorators: [{
             type: Directive,
@@ -6395,7 +6411,7 @@ class YuwSidebarRailDirective {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarRailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwSidebarRailDirective, isStandalone: true, selector: "button[yuwSidebarRail]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-label": "label()" } }, hostDirectives: [{ directive: i1$q.HlmSidebarRail }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwSidebarRailDirective, isStandalone: true, selector: "button[yuwSidebarRail]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-label": "label()" } }, hostDirectives: [{ directive: i1$r.HlmSidebarRail }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarRailDirective, decorators: [{
             type: Directive,
@@ -6410,7 +6426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Main content region beside the sidebar. Apply to a `<main>`. */
 class YuwSidebarInsetDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarInsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarInsetDirective, isStandalone: true, selector: "main[yuwSidebarInset]", hostDirectives: [{ directive: i1$q.HlmSidebarInset }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSidebarInsetDirective, isStandalone: true, selector: "main[yuwSidebarInset]", hostDirectives: [{ directive: i1$r.HlmSidebarInset }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarInsetDirective, decorators: [{
             type: Directive,
@@ -7007,7 +7023,7 @@ class YuwCommandComponent {
         this.commandSelected.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwCommandComponent, isStandalone: true, selector: "yuw-command", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", commandSelected: "commandSelected" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, ngImport: i0, template: "<div hlmCommand [class]=\"userClass()\" [disabled]=\"disabled()\" [filter]=\"filter()\" [(search)]=\"search\">\n  <hlm-command-input [placeholder]=\"searchPlaceholder() ?? ''\" />\n\n  <div hlmCommandList>\n    @for (group of _groups(); track group.id; let first = $first) {\n      @if (!first) {\n        <div hlmCommandSeparator></div>\n      }\n\n      <div hlmCommandGroup>\n        @if (group.label; as label) {\n          <span hlmCommandGroupLabel>{{ label }}</span>\n        }\n\n        @for (entry of group.items; track entry.item.id) {\n          <button\n            hlmCommandItem\n            [value]=\"entry.searchValue\"\n            [disabled]=\"entry.item.disabled ?? false\"\n            (selected)=\"onSelected(entry.item)\"\n          >\n            @if (entry.item.icon; as icon) {\n              <ng-icon [name]=\"icon\" aria-hidden=\"true\" />\n            }\n            {{ entry.item.label }}\n            @if (entry.item.shortcut; as shortcut) {\n              <span hlmCommandShortcut>{{ shortcut }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <div hlmCommandEmpty *hlmCommandEmptyState>{{ emptyText() ?? '' }}</div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$r.HlmCommand, selector: "[hlmCommand],hlm-command" }, { kind: "directive", type: i1$r.HlmCommandEmpty, selector: "[hlmCommandEmpty]" }, { kind: "directive", type: i1$r.HlmCommandEmptyState, selector: "[hlmCommandEmptyState]" }, { kind: "directive", type: i1$r.HlmCommandGroup, selector: "[hlmCommandGroup],hlm-command-group" }, { kind: "directive", type: i1$r.HlmCommandGroupLabel, selector: "[hlmCommandGroupLabel],hlm-command-group-label" }, { kind: "component", type: i1$r.HlmCommandInput, selector: "hlm-command-input", inputs: ["inputId", "placeholder"] }, { kind: "directive", type: i1$r.HlmCommandItem, selector: "button[hlmCommandItem],button[hlm-command-item]" }, { kind: "directive", type: i1$r.HlmCommandList, selector: "[hlmCommandList],hlm-command-list" }, { kind: "directive", type: i1$r.HlmCommandSeparator, selector: "[hlmCommandSeparator],hlm-command-separator" }, { kind: "directive", type: i1$r.HlmCommandShortcut, selector: "[hlmCommandShortcut],hlm-command-shortcut" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwCommandComponent, isStandalone: true, selector: "yuw-command", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", commandSelected: "commandSelected" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, ngImport: i0, template: "<div hlmCommand [class]=\"userClass()\" [disabled]=\"disabled()\" [filter]=\"filter()\" [(search)]=\"search\">\n  <hlm-command-input [placeholder]=\"searchPlaceholder() ?? ''\" />\n\n  <div hlmCommandList>\n    @for (group of _groups(); track group.id; let first = $first) {\n      @if (!first) {\n        <div hlmCommandSeparator></div>\n      }\n\n      <div hlmCommandGroup>\n        @if (group.label; as label) {\n          <span hlmCommandGroupLabel>{{ label }}</span>\n        }\n\n        @for (entry of group.items; track entry.item.id) {\n          <button\n            hlmCommandItem\n            [value]=\"entry.searchValue\"\n            [disabled]=\"entry.item.disabled ?? false\"\n            (selected)=\"onSelected(entry.item)\"\n          >\n            @if (entry.item.icon; as icon) {\n              <ng-icon [name]=\"icon\" aria-hidden=\"true\" />\n            }\n            {{ entry.item.label }}\n            @if (entry.item.shortcut; as shortcut) {\n              <span hlmCommandShortcut>{{ shortcut }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <div hlmCommandEmpty *hlmCommandEmptyState>{{ emptyText() ?? '' }}</div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$s.HlmCommand, selector: "[hlmCommand],hlm-command" }, { kind: "directive", type: i1$s.HlmCommandEmpty, selector: "[hlmCommandEmpty]" }, { kind: "directive", type: i1$s.HlmCommandEmptyState, selector: "[hlmCommandEmptyState]" }, { kind: "directive", type: i1$s.HlmCommandGroup, selector: "[hlmCommandGroup],hlm-command-group" }, { kind: "directive", type: i1$s.HlmCommandGroupLabel, selector: "[hlmCommandGroupLabel],hlm-command-group-label" }, { kind: "component", type: i1$s.HlmCommandInput, selector: "hlm-command-input", inputs: ["inputId", "placeholder"] }, { kind: "directive", type: i1$s.HlmCommandItem, selector: "button[hlmCommandItem],button[hlm-command-item]" }, { kind: "directive", type: i1$s.HlmCommandList, selector: "[hlmCommandList],hlm-command-list" }, { kind: "directive", type: i1$s.HlmCommandSeparator, selector: "[hlmCommandSeparator],hlm-command-separator" }, { kind: "directive", type: i1$s.HlmCommandShortcut, selector: "[hlmCommandShortcut],hlm-command-shortcut" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCommandComponent, decorators: [{
             type: Component,
@@ -7128,5 +7144,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, 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 };
+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, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, 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