yukit-web 0.2.9 → 0.3.1

package/fesm2022/yukit-web.mjs

@@ -15,7 +15,7 @@ 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, 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, lucideFilter, 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';
@@ -29,46 +29,46 @@ 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$4 from 'yukit-web/helm/input-group';
+import * as i1$9 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 { HlmAvatarImports } from 'yukit-web/helm/avatar';
+import * as i1$6 from 'yukit-web/helm/popover';
+import { HlmPopoverImports } from 'yukit-web/helm/popover';
+import * as i1$5 from '@spartan-ng/brain/popover';
+import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import * as i1$7 from '@spartan-ng/brain/sheet';
+import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
+import * as i1$8 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$5 from 'yukit-web/helm/input-otp';
+import * as i1$a 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$6 from 'yukit-web/helm/switch';
+import * as i1$b from 'yukit-web/helm/switch';
 import { HlmSwitchImports } from 'yukit-web/helm/switch';
-import * as i1$7 from 'yukit-web/helm/radio-group';
+import * as i1$c from 'yukit-web/helm/radio-group';
 import { HlmRadioGroupImports } from 'yukit-web/helm/radio-group';
-import * as i1$8 from 'yukit-web/helm/skeleton';
+import * as i1$d from 'yukit-web/helm/skeleton';
 import { HlmSkeleton } from 'yukit-web/helm/skeleton';
-import * as i1$9 from 'yukit-web/helm/card';
+import * as i1$e from 'yukit-web/helm/card';
 import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction, HlmCardContent, HlmCardFooter } from 'yukit-web/helm/card';
-import * as i1$a from 'yukit-web/helm/empty';
+import * as i1$f 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$b from 'yukit-web/helm/context-menu';
+import * as i1$g from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
-import * as i1$c from 'yukit-web/helm/date-picker';
+import * as i1$h from 'yukit-web/helm/date-picker';
 import { injectHlmMonthYearPickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
-import * as i1$d from 'yukit-web/helm/table';
+import * as i1$i from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
-import * as i1$f from 'yukit-web/helm/popover';
-import { HlmPopoverImports } from 'yukit-web/helm/popover';
-import * as i1$e from '@spartan-ng/brain/popover';
-import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import * as i1$g from '@spartan-ng/brain/sheet';
-import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
-import * as i1$h from 'yukit-web/helm/sheet';
-import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
-import * as i1$i from 'yukit-web/helm/tabs';
+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$j from 'yukit-web/helm/avatar';
-import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$k from 'yukit-web/helm/item';
 import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
 import { HlmSpinner } from 'yukit-web/helm/spinner';
@@ -1524,191 +1524,632 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, 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  @if (_hasAddons()) {\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]=\"type()\"\n        [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n        (keydown.enter)=\"onEnterPressed()\"\n      />\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <input\n      hlmInput\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\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.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
         }], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
-let nextYuwTextareaId = 0;
 /**
- * Multi-line text input control supporting auto-growing content, character limits, row count, and form integration (`ngModel`, `formControlName`).
+ * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
  *
- * Inputs / Models:
- * - `value`: Two-way text string.
- * - `inputId`: `id` applied to the native textarea, for external `<label for>` association.
- * - `disabled`: Disables input interaction.
- * - `readonly`: Makes the field read-only.
- * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
- * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
- * - `errorText`: Error shown under the field while it is in its error state (form validation or
- *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
- *   reactive forms); required when no such message exists.
- * - `name`: HTML `name` attribute.
- * - `autocomplete`: Native `autocomplete` attribute.
- * - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
- * - `maxlength`: Hard cap on character count, enforced natively by the browser.
- * - `placeholder`: Hint text shown inside the empty field.
- * - `class`: Extra classes merged onto the visual root (the textarea, or the input group when addons are present).
+ * Inputs:
+ * - `size`: Avatar size (`'default'`, `'sm'`, `'lg'`). Default is `'default'`.
+ * - `src`: Image URL for single-avatar mode. Omit to display fallback text.
+ * - `alt`: Required. Accessible label for single-avatar mode and fallback text. User-facing text —
+ *   the consuming app is responsible for providing (and translating) it.
+ * - `fallback`: Fallback text or initials shown when image is loading, unprovided, or fails to load.
+ * - `badge`: Renders a status badge marker on the bottom-right corner (single-avatar mode).
+ * - `group`: Array of item DTOs (`YuwAvatarGroupItemDto[]`) to render as an overlapping avatar group stack.
+ * - `groupCount`: Overflow label string (e.g. `"+5"`) displayed at the end of an avatar group stack.
+ * - `class`: Extra CSS classes merged onto the inner `hlm-avatar` element(s); merged last, so they win.
  *
- * Outputs:
- * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * Single Avatar Usage:
+ * ```html
+ * <yuw-avatar src="/path/to/user.png" alt="Jane Doe" fallback="JD" />
+ * <yuw-avatar alt="Jane Doe" fallback="JD" badge />
+ * ```
  *
- * Usage:
+ * Avatar Group Usage:
  * ```html
- * <yuw-textarea [(value)]="bio" placeholder="Write your biography..." [rows]="4" />
- * <yuw-textarea formControlName="comments" [maxlength]="500" />
+ * <yuw-avatar [group]="teamMembers" alt="Team" groupCount="+5" />
  * ```
  */
-class YuwTextareaComponent extends YuwTextFieldBase {
+class YuwAvatarComponent {
     constructor() {
-        super(...arguments);
-        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
-        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
-        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
-        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this._autoId = `yuw-textarea-${++nextYuwTextareaId}`;
-        this._focusSelectors = ['textarea'];
-        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
-        this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
-        this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
-        this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
-    }
-    onChange() {
-        this.committed.emit(this.value());
-    }
-    onInput(event) {
-        this._commit(event.target.value);
+        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.badge = input(false, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        this.group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.groupCount = input(undefined, ...(ngDevMode ? [{ debugName: "groupCount" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        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: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"block-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <textarea\n        hlmInputGroupTextarea\n        [id]=\"_inputId()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.rows]=\"rows()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n      ></textarea>\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"block-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <textarea\n      hlmTextarea\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></textarea>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: 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: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-textarea', imports: [
-                        HlmField,
-                        HlmFieldDescription,
-                        YuwFieldFeedbackDirective,
-                        HlmTextarea,
-                        HlmInputGroup,
-                        HlmInputGroupTextarea,
-                        HlmInputGroupAddon,
-                    ], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
+            args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"block-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <textarea\n        hlmInputGroupTextarea\n        [id]=\"_inputId()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.rows]=\"rows()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n      ></textarea>\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"block-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <textarea\n      hlmTextarea\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></textarea>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
-        }], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
- * Class map for the collapsible wrapper of `yuw-search-input`.
- *
- * The wrapper exists because the component host is `display: contents` and cannot own the animated
- * width itself. Width animates as `max-width`, bound inline from `expandedWidth`, so the same
- * element can be a 32px square when collapsed and the full field when expanded.
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
  *
- * Deliberately **not** `overflow-hidden`: the helm draws the group's focus ring outside the border
- * box, so clipping here would crop it. The input clips itself instead — see
- * `searchInputFieldVariants`.
+ * The helm trigger directive's selector only matches a native `button`, so composing the brain
+ * directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
+ * Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
+ * bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
+ * anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
+ * host has no rect for the overlay to position from.
  *
- * The anchoring and transition classes hang off `collapseFrom` rather than the cva base, because a
- * non-collapsible instance renders the same wrapper and must stay a plain box with no transition.
- * The anchor is an auto margin rather than `position: absolute`, so the control keeps participating
- * in its parent's layout.
+ * `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
  */
-const searchInputCollapsibleVariants = cva('w-full', {
-    variants: {
-        collapseFrom: {
-            left: 'me-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
-            right: 'ms-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
-        },
-        expanded: {
-            true: '',
-            false: '',
-        },
-        size: {
-            default: '',
-            xs: '',
-            sm: '',
-            lg: '',
-        },
-    },
-    compoundVariants: [
-        { expanded: false, size: 'default', class: 'max-w-10' },
-        { expanded: false, size: 'xs', class: 'max-w-7' },
-        { expanded: false, size: 'sm', class: 'max-w-9' },
-        { expanded: false, size: 'lg', class: 'max-w-11' },
-    ],
-    defaultVariants: {
-        expanded: true,
-        size: 'default',
-    },
-});
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
+                    hostDirectives: [
+                        { directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
+                    ],
+                    host: { 'data-slot': 'popover-trigger' },
+                }]
+        }] });
+
 /**
- * Classes for the search icon slot.
- *
- * A fixed square matching the control height, never a share of the wrapper: sizing it with `w-full`
- * would make it track the wrapper mid-transition, sliding the icon toward the middle and snapping it
- * back at the end. `shrink-0` holds that width against the sibling input's `flex-1`.
+ * Popover component for displaying anchored floating overlay panels.
  *
- * The width is keyed by `size` through compound variants so the collapsed control stays square at
- * every size, mirroring the `icon-*` sizes of `<yuw-button>`.
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
+ * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
+ * - `offsetX`: Pixel offset for X sides. Positive px for right, negative for left side.
+ * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
+ * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
+ *   over the library defaults via `twMerge`.
+ * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
+ *   `'neutral'`.
+ * - `triggerSize`: Button size for the trigger button.
+ * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
+ *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
+ * - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
+ *   variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
  *
- * `ps-0` cancels the addon's own `ps-2`, and `has-[>button]:ms-0` cancels the helm's
- * `has-[>button]:ms-[-0.3rem]`; the prefix has to be repeated because tailwind-merge keys conflicts
- * per variant prefix, so a bare `ms-0` would not displace it.
- */
-const searchInputIconVariants = cva('', {
-    variants: {
-        collapsible: {
-            true: 'shrink-0 justify-center ps-0 has-[>button]:ms-0',
-            false: '',
-        },
-        size: {
-            default: '',
-            xs: '',
-            sm: '',
-            lg: '',
-        },
-    },
-    compoundVariants: [
-        { collapsible: true, size: 'default', class: 'w-10' },
-        { collapsible: true, size: 'xs', class: 'w-7' },
-        { collapsible: true, size: 'sm', class: 'w-9' },
-        { collapsible: true, size: 'lg', class: 'w-11' },
-    ],
-    defaultVariants: {
-        collapsible: false,
-        size: 'default',
-    },
-});
-/**
- * Classes for the native input while the control is collapsible.
+ * The panel is always anchored to the trigger, including when `open` is set from code without a
+ * click on it; the brain trigger only records its element on click.
  *
- * The input clips itself so the wrapper doesn't have to (which would take the focus ring with it).
- * `min-w-0` is what lets it shrink: a flex item defaults to `min-width: auto` and would otherwise
- * hold the collapsed wrapper open past 32px.
- */
-const searchInputFieldVariants = cva('', {
-    variants: {
-        collapsible: {
-            true: 'min-w-0 overflow-hidden',
-            false: '',
-        },
-    },
-    defaultVariants: {
-        collapsible: false,
-    },
-});
-/**
- * Class map for the input group shell.
+ * The trigger is a `<yuw-button>`; `YuwPopoverTriggerDirective` composes the brain trigger onto it,
+ * so the popover reuses our button component instead of applying `[hlmBtn]` directly.
  *
- * `transparent` strips the helm's resting border and background. Each helm class is countered in
- * the same variant prefix it was declared with (`dark:`, and the `has-[…:disabled]:` stack), because
- * tailwind-merge resolves conflicts per prefix and a bare `bg-transparent` would leave the
- * prefixed helm declarations standing.
+ * Usage:
+ * ```html
+ * <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
+ *   <ng-container yuwPopoverTrigger>View Notifications</ng-container>
  *
- * The focus ring and the invalid-state ring are deliberately left in place: they are feedback, not
- * chrome, and a transparent field still has to show where focus is and when it is invalid.
+ *   <p>Popover content body goes here.</p>
+ * </yuw-popover>
+ * ```
  */
-const searchInputGroupVariants = cva('', {
-    variants: {
-        transparent: {
-            true: 'border-transparent bg-transparent dark:bg-transparent has-[[data-slot=input-group-control]:disabled]:bg-transparent dark:has-[[data-slot=input-group-control]:disabled]:bg-transparent',
-            false: '',
+class YuwPopoverComponent {
+    constructor() {
+        this._trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "_trigger" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    }
+    onOpenChange(state) {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [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" }]
+        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
+ *
+ * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
+ * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
+ * so a trigger can override which edge the sheet appears from.
+ */
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetTriggerButton]',
+                    hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+                    host: { 'data-slot': 'sheet-trigger' },
+                }]
+        }] });
+/** 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetClose]',
+                    hostDirectives: [BrnSheetClose],
+                    host: { 'data-slot': 'sheet-close' },
+                }]
+        }] });
+
+/**
+ * Marks an element as the sheet's footer content, projected into the footer slot.
+ * Its presence is also what makes the footer render at all — without it the sheet
+ * shows no empty footer strip.
+ */
+class YuwSheetFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSheetFooter]',
+                }]
+        }] });
+
+const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
+/**
+ * Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
+ *
+ * Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
+ * is announced as an anonymous dialog by screen readers.
+ *
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
+ * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
+ * - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
+ *   text the consuming app is responsible for translating.
+ * - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
+ *   renders and screen readers read this label; when absent there is no close button. User-facing
+ *   text the consuming app is responsible for translating.
+ * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
+ *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
+ *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
+ *   the class has to be `data-[side=left]:w-64`, not `w-64`.
+ * - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
+ *   viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
+ *   the overlay too, and the helm's own class always wins the `class` input it exposes.
+ * - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
+ *   strategy; pass `'reposition'` for a panel that should leave the page scrollable.
+ * - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
+ *   modal; set `false` when content outside stays visible and usable, so the claim stays honest.
+ * - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
+ *   clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
+ *   `false` for a panel that must be dismissed deliberately.
+ * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerSize`: Button size for the trigger button.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
+ *   <ng-container yuwSheetTrigger>Edit Profile</ng-container>
+ *
+ *   <p>Sheet form content goes here.</p>
+ *
+ *   <div yuwSheetFooter>
+ *     <yuw-button (clicked)="save()">Save Changes</yuw-button>
+ *   </div>
+ * </yuw-sheet>
+ * ```
+ */
+class YuwSheetComponent {
+    constructor() {
+        this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        this.sheet = viewChild.required(HlmSheet);
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+        this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        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._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const overlayClass = this.overlayClass();
+            if (overlayClass === undefined)
+                return;
+            this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
+        });
+    }
+    onStateChanged(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$8.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$8.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$8.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$8.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$8.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$8.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$8.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
+
+/** Binary-step unit symbols, which are not user copy and so need no translation. */
+const UNITS = ['B', 'KB', 'MB', 'GB'];
+/**
+ * Formats a byte count the way file pickers show it: `512 B`, `1.5 KB`, `1 MB`.
+ *
+ * Uses 1024 steps, no more than one decimal, and stops at `GB`. The decimal mark is always `.`, so
+ * the output is locale-independent.
+ *
+ * @param bytes Size in bytes.
+ * @returns The size with the largest unit that keeps the number at or above 1.
+ */
+function formatFileSize(bytes) {
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < UNITS.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return `${Number.isInteger(value) ? value : value.toFixed(1)} ${UNITS[unit]}`;
+}
+
+/** Module-level counter backing each instance's stable fallback `id`. */
+let nextYuwInputFileId = 0;
+/**
+ * File picker with two layouts, supporting two-way binding, form controls (`formControlName`,
+ * `ngModel`), validation styling and helper/error text.
+ *
+ * `avatar` (default) shows a `yuw-avatar` with the chosen image — or `src` while nothing is chosen —
+ * beside an upload button, like a profile-photo field; clicking the avatar opens the picker too. `inline` is a full-width outline button with
+ * an upload icon; once a file is chosen, the button is replaced by a single line showing its name, size and a remove icon.
+ * With several files the line reads `countLabel(n)` and opens the list, one removable row each — in
+ * a popover from `md` up and a bottom sheet below it, like the list-toolbar filters.
+ *
+ * Removing never edits the value: the X emits `removed` with the `File` and the consumer decides
+ * (drop it from `value`, confirm first, call an API, …). The native picker always replaces the
+ * previous selection. Because the button is hidden while files are chosen, the consumer must
+ * clear `value` in `removed` for the picker to come back.
+ *
+ * The value is always an array of `File` — empty when nothing is chosen, one item when `multiple`
+ * is off. Writing `[]` (or `null`, e.g. `control.reset()`) clears the native picker too. Setting a
+ * non-empty value programmatically only updates `value`: browsers do not allow scripts to fill a
+ * file input, so the native control keeps showing its last user selection.
+ *
+ * Inputs / Models:
+ * - `value`: Two-way `File[]` selection.
+ * - `variant`: `'avatar'` or `'inline'`. Default is `'avatar'`.
+ * - `uploadLabel`: Text of the upload button. User-facing text — the consuming app provides and
+ *   translates it; required, there is no default copy.
+ * - `removeLabel`: Accessible label of each remove icon (`inline` only). Required for `inline`.
+ * - `countLabel`: Builds the text of the multi-file box from the file count, e.g.
+ *   `(n) => \`${n} files selected\`` (`inline` with `multiple` only). Required for that case.
+ * - `alt`: Accessible label of the avatar image (`avatar` only), also the source of its fallback.
+ * - `fallback`: Initials shown when there is no image (`avatar` only).
+ * - `src`: Current image shown while no file is chosen (`avatar` only), e.g. the saved photo.
+ * - `accept`: Native `accept` filter (e.g. `'image/*,.pdf'`).
+ * - `multiple`: Allows choosing more than one file; the avatar previews the first. Default is `false`.
+ * - `size`: Height of the controls (`'default'`, `'xs'`, `'sm'`, `'lg'`), matching `<yuw-input>`.
+ *   Default is `'default'`.
+ * - `inputId`: `id` applied to the hidden native input.
+ * - `disabled`: Disables the picker and the remove icons.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state. Overrides the `message`
+ *   carried by the bound control's validation errors.
+ * - `name`: HTML `name` attribute.
+ * - `class`: Extra classes merged last onto the avatar (`avatar`) or the inline stack (`inline`).
+ *
+ * Outputs:
+ * - `removed`: Emits the `File` whose remove icon was pressed (`inline` only).
+ *
+ * Usage:
+ * ```html
+ * <yuw-input-file [(value)]="files" accept="image/*" [src]="family.imageUrl" [alt]="family.name"
+ *   [fallback]="initials" uploadLabel="Upload photo" />
+ * <yuw-input-file variant="inline" multiple [(value)]="files" uploadLabel="Upload files"
+ *   removeLabel="Remove" [countLabel]="countLabel" (removed)="files.set(files().filter((f) => f !== $event))" />
+ * ```
+ */
+class YuwInputFileComponent extends YuwValueAccessorBase {
+    constructor() {
+        super();
+        this._native = viewChild('native', ...(ngDevMode ? [{ debugName: "_native" }] : /* istanbul ignore next */ []));
+        this.accept = input(undefined, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        this.alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.countLabel = input(undefined, ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.uploadLabel = input(undefined, ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.variant = input('avatar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.removed = output();
+        this._autoId = `yuw-input-file-${++nextYuwInputFileId}`;
+        this._focusSelectors = ['button', 'input'];
+        this._isMobile = injectIsMobile();
+        this._listOpen = signal(false, ...(ngDevMode ? [{ debugName: "_listOpen" }] : /* istanbul ignore next */ []));
+        this._preview = signal(undefined, ...(ngDevMode ? [{ debugName: "_preview" }] : /* istanbul ignore next */ []));
+        this._avatarSrc = computed(() => this._preview() ?? this.src(), ...(ngDevMode ? [{ debugName: "_avatarSrc" }] : /* istanbul ignore next */ []));
+        this._boxClasses = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), 'flex min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent ps-2.5 pe-2 text-sm'), ...(ngDevMode ? [{ debugName: "_boxClasses" }] : /* istanbul ignore next */ []));
+        this._countText = computed(() => this.countLabel()?.(this.value().length), ...(ngDevMode ? [{ debugName: "_countText" }] : /* istanbul ignore next */ []));
+        this._entries = computed(() => this.value().map((file) => ({ file, size: formatFileSize(file.size) })), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
+        this._inlineClasses = computed(() => cn('flex min-w-0 flex-col gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_inlineClasses" }] : /* istanbul ignore next */ []));
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const native = this._native()?.nativeElement;
+            if (native && this.value().length === 0) {
+                native.value = '';
+            }
+        });
+        effect(() => {
+            if (this.value().length < 2 || this._isMobile()) {
+                this._listOpen.set(false);
+            }
+        });
+        effect((onCleanup) => {
+            const file = this.variant() === 'avatar' ? this.value()[0] : undefined;
+            if (!file) {
+                this._preview.set(undefined);
+                return;
+            }
+            const url = URL.createObjectURL(file);
+            this._preview.set(url);
+            onCleanup(() => URL.revokeObjectURL(url));
+        });
+    }
+    _emptyValue() {
+        return [];
+    }
+    onChange(event) {
+        this._commit(Array.from(event.target.files ?? []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-input-file', imports: [
+                        NgTemplateOutlet,
+                        NgIcon,
+                        HlmField,
+                        HlmFieldDescription,
+                        YuwFieldFeedbackDirective,
+                        HlmInput,
+                        YuwAvatarComponent,
+                        YuwButtonComponent,
+                        YuwPopoverComponent,
+                        YuwSheetComponent,
+                    ], providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+let nextYuwTextareaId = 0;
+/**
+ * Multi-line text input control supporting auto-growing content, character limits, row count, and form integration (`ngModel`, `formControlName`).
+ *
+ * Inputs / Models:
+ * - `value`: Two-way text string.
+ * - `inputId`: `id` applied to the native textarea, for external `<label for>` association.
+ * - `disabled`: Disables input interaction.
+ * - `readonly`: Makes the field read-only.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
+ * - `name`: HTML `name` attribute.
+ * - `autocomplete`: Native `autocomplete` attribute.
+ * - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
+ * - `maxlength`: Hard cap on character count, enforced natively by the browser.
+ * - `placeholder`: Hint text shown inside the empty field.
+ * - `class`: Extra classes merged onto the visual root (the textarea, or the input group when addons are present).
+ *
+ * Outputs:
+ * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ *
+ * Usage:
+ * ```html
+ * <yuw-textarea [(value)]="bio" placeholder="Write your biography..." [rows]="4" />
+ * <yuw-textarea formControlName="comments" [maxlength]="500" />
+ * ```
+ */
+class YuwTextareaComponent extends YuwTextFieldBase {
+    constructor() {
+        super(...arguments);
+        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
+        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
+        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this._autoId = `yuw-textarea-${++nextYuwTextareaId}`;
+        this._focusSelectors = ['textarea'];
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
+        this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
+        this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
+    }
+    onChange() {
+        this.committed.emit(this.value());
+    }
+    onInput(event) {
+        this._commit(event.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"block-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <textarea\n        hlmInputGroupTextarea\n        [id]=\"_inputId()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.rows]=\"rows()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n      ></textarea>\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"block-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <textarea\n      hlmTextarea\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></textarea>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: 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: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-textarea', imports: [
+                        HlmField,
+                        HlmFieldDescription,
+                        YuwFieldFeedbackDirective,
+                        HlmTextarea,
+                        HlmInputGroup,
+                        HlmInputGroupTextarea,
+                        HlmInputGroupAddon,
+                    ], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"block-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <textarea\n        hlmInputGroupTextarea\n        [id]=\"_inputId()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.rows]=\"rows()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n      ></textarea>\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"block-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <textarea\n      hlmTextarea\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.rows]=\"rows()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n    ></textarea>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
+/**
+ * Class map for the collapsible wrapper of `yuw-search-input`.
+ *
+ * The wrapper exists because the component host is `display: contents` and cannot own the animated
+ * width itself. Width animates as `max-width`, bound inline from `expandedWidth`, so the same
+ * element can be a 32px square when collapsed and the full field when expanded.
+ *
+ * Deliberately **not** `overflow-hidden`: the helm draws the group's focus ring outside the border
+ * box, so clipping here would crop it. The input clips itself instead — see
+ * `searchInputFieldVariants`.
+ *
+ * The anchoring and transition classes hang off `collapseFrom` rather than the cva base, because a
+ * non-collapsible instance renders the same wrapper and must stay a plain box with no transition.
+ * The anchor is an auto margin rather than `position: absolute`, so the control keeps participating
+ * in its parent's layout.
+ */
+const searchInputCollapsibleVariants = cva('w-full', {
+    variants: {
+        collapseFrom: {
+            left: 'me-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+            right: 'ms-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+        },
+        expanded: {
+            true: '',
+            false: '',
+        },
+        size: {
+            default: '',
+            xs: '',
+            sm: '',
+            lg: '',
+        },
+    },
+    compoundVariants: [
+        { expanded: false, size: 'default', class: 'max-w-10' },
+        { expanded: false, size: 'xs', class: 'max-w-7' },
+        { expanded: false, size: 'sm', class: 'max-w-9' },
+        { expanded: false, size: 'lg', class: 'max-w-11' },
+    ],
+    defaultVariants: {
+        expanded: true,
+        size: 'default',
+    },
+});
+/**
+ * Classes for the search icon slot.
+ *
+ * A fixed square matching the control height, never a share of the wrapper: sizing it with `w-full`
+ * would make it track the wrapper mid-transition, sliding the icon toward the middle and snapping it
+ * back at the end. `shrink-0` holds that width against the sibling input's `flex-1`.
+ *
+ * The width is keyed by `size` through compound variants so the collapsed control stays square at
+ * every size, mirroring the `icon-*` sizes of `<yuw-button>`.
+ *
+ * `ps-0` cancels the addon's own `ps-2`, and `has-[>button]:ms-0` cancels the helm's
+ * `has-[>button]:ms-[-0.3rem]`; the prefix has to be repeated because tailwind-merge keys conflicts
+ * per variant prefix, so a bare `ms-0` would not displace it.
+ */
+const searchInputIconVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'shrink-0 justify-center ps-0 has-[>button]:ms-0',
+            false: '',
+        },
+        size: {
+            default: '',
+            xs: '',
+            sm: '',
+            lg: '',
+        },
+    },
+    compoundVariants: [
+        { collapsible: true, size: 'default', class: 'w-10' },
+        { collapsible: true, size: 'xs', class: 'w-7' },
+        { collapsible: true, size: 'sm', class: 'w-9' },
+        { collapsible: true, size: 'lg', class: 'w-11' },
+    ],
+    defaultVariants: {
+        collapsible: false,
+        size: 'default',
+    },
+});
+/**
+ * Classes for the native input while the control is collapsible.
+ *
+ * The input clips itself so the wrapper doesn't have to (which would take the focus ring with it).
+ * `min-w-0` is what lets it shrink: a flex item defaults to `min-width: auto` and would otherwise
+ * hold the collapsed wrapper open past 32px.
+ */
+const searchInputFieldVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'min-w-0 overflow-hidden',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        collapsible: false,
+    },
+});
+/**
+ * Class map for the input group shell.
+ *
+ * `transparent` strips the helm's resting border and background. Each helm class is countered in
+ * the same variant prefix it was declared with (`dark:`, and the `has-[…:disabled]:` stack), because
+ * tailwind-merge resolves conflicts per prefix and a bare `bg-transparent` would leave the
+ * prefixed helm declarations standing.
+ *
+ * The focus ring and the invalid-state ring are deliberately left in place: they are feedback, not
+ * chrome, and a transparent field still has to show where focus is and when it is invalid.
+ */
+const searchInputGroupVariants = cva('', {
+    variants: {
+        transparent: {
+            true: 'border-transparent bg-transparent dark:bg-transparent has-[[data-slot=input-group-control]:disabled]:bg-transparent dark:has-[[data-slot=input-group-control]:disabled]:bg-transparent',
+            false: '',
         },
     },
     defaultVariants: {
@@ -1906,7 +2347,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$4.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$4.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$4.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$4.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
@@ -1984,7 +2425,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$4.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$4.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$4.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$4.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
             type: Component,
@@ -2101,7 +2542,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$5.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$5.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$5.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$5.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
             type: Component,
@@ -2349,7 +2790,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$6.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
@@ -2413,7 +2854,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$7.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$7.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$7.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
@@ -2435,7 +2876,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$8.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$d.HlmSkeleton }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, decorators: [{
             type: Directive,
@@ -2524,7 +2965,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$9.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$e.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, decorators: [{
             type: Directive,
@@ -2536,7 +2977,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$9.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$e.HlmCardHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, decorators: [{
             type: Directive,
@@ -2548,7 +2989,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$9.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$e.HlmCardTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, decorators: [{
             type: Directive,
@@ -2560,7 +3001,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$9.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$e.HlmCardDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, decorators: [{
             type: Directive,
@@ -2572,7 +3013,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$9.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$e.HlmCardAction }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, decorators: [{
             type: Directive,
@@ -2584,7 +3025,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$9.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$e.HlmCardContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, decorators: [{
             type: Directive,
@@ -2596,7 +3037,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$9.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$e.HlmCardFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, decorators: [{
             type: Directive,
@@ -2637,7 +3078,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$a.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$f.HlmEmpty }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, decorators: [{
             type: Directive,
@@ -2649,7 +3090,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$a.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$f.HlmEmptyHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, decorators: [{
             type: Directive,
@@ -2661,7 +3102,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$a.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$f.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, decorators: [{
             type: Directive,
@@ -2673,7 +3114,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$a.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$f.HlmEmptyTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, decorators: [{
             type: Directive,
@@ -2685,7 +3126,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$a.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$f.HlmEmptyDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, decorators: [{
             type: Directive,
@@ -2697,7 +3138,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$a.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$f.HlmEmptyContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, decorators: [{
             type: Directive,
@@ -2836,7 +3277,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$b.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$g.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,
@@ -3168,7 +3609,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$c.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$c.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
@@ -3196,7 +3637,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$d.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$i.HlmTableContainer }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, decorators: [{
             type: Directive,
@@ -3208,7 +3649,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$d.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$i.HlmTable }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, decorators: [{
             type: Directive,
@@ -3220,7 +3661,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$d.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$i.HlmTHead }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, decorators: [{
             type: Directive,
@@ -3232,7 +3673,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$d.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$i.HlmTBody }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, decorators: [{
             type: Directive,
@@ -3244,7 +3685,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$d.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$i.HlmTFoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, decorators: [{
             type: Directive,
@@ -3256,7 +3697,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$d.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$i.HlmTr }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, decorators: [{
             type: Directive,
@@ -3268,7 +3709,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$d.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$i.HlmTh }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, decorators: [{
             type: Directive,
@@ -3280,7 +3721,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$d.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$i.HlmTd }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, decorators: [{
             type: Directive,
@@ -3292,7 +3733,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$d.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$i.HlmCaption }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, decorators: [{
             type: Directive,
@@ -3313,115 +3754,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 /** Every table part, for a consumer's `imports`. */
-const YuwTableImports = [
-    YuwTableContainerDirective,
-    YuwTableDirective,
-    YuwTHeadDirective,
-    YuwTBodyDirective,
-    YuwTFootDirective,
-    YuwTrDirective,
-    YuwThDirective,
-    YuwTdDirective,
-    YuwCaptionDirective,
-    YuwDatatablePaginationDirective,
-];
-
-/**
- * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
- *
- * The helm trigger directive's selector only matches a native `button`, so composing the brain
- * directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
- * Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
- * bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
- * anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
- * host has no rect for the overlay to position from.
- *
- * `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
- */
-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$e.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,
-            args: [{
-                    selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
-                    hostDirectives: [
-                        { directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
-                    ],
-                    host: { 'data-slot': 'popover-trigger' },
-                }]
-        }] });
+const YuwTableImports = [
+    YuwTableContainerDirective,
+    YuwTableDirective,
+    YuwTHeadDirective,
+    YuwTBodyDirective,
+    YuwTFootDirective,
+    YuwTrDirective,
+    YuwThDirective,
+    YuwTdDirective,
+    YuwCaptionDirective,
+    YuwDatatablePaginationDirective,
+];
 
 /**
- * Popover component for displaying anchored floating overlay panels.
- *
- * Inputs / Models:
- * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
- * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
- * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
- * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
- * - `offsetX`: Pixel offset for X sides. Positive px for right, negative for left side.
- * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
- * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
- * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
- *   over the library defaults via `twMerge`.
- * - `triggerVariant`: Button style variant for the trigger button.
- * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
- *   `'neutral'`.
- * - `triggerSize`: Button size for the trigger button.
- * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
- *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
- * - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
- *   variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
+ * 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`.
  *
- * The panel is always anchored to the trigger, including when `open` is set from code without a
- * click on it; the brain trigger only records its element on click.
- *
- * The trigger is a `<yuw-button>`; `YuwPopoverTriggerDirective` composes the brain trigger onto it,
- * so the popover reuses our button component instead of applying `[hlmBtn]` directly.
+ * 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.
  *
  * Usage:
  * ```html
- * <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
- *   <ng-container yuwPopoverTrigger>View Notifications</ng-container>
- *
- *   <p>Popover content body goes here.</p>
- * </yuw-popover>
+ * <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>
+ * </yuw-list-toolbar>
  * ```
+ *
+ * Inputs:
+ * - `yuwFilterContent`: Required string; id of the filter group this template renders.
  */
-class YuwPopoverComponent {
+class YuwFilterContentDirective {
     constructor() {
-        this._trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "_trigger" } : /* istanbul ignore next */ {}), read: ElementRef });
-        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
-        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
-        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
-        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
-        this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
-        this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    }
-    onOpenChange(state) {
-        this.open.set(state === 'open');
+        this.templateRef = inject(TemplateRef);
+        this.groupId = input.required({ ...(ngDevMode ? { debugName: "groupId" } : /* istanbul ignore next */ {}), alias: 'yuwFilterContent' });
     }
-    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$f.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$f.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$f.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$f.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$f.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$f.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFilterContentDirective, isStandalone: true, selector: "ng-template[yuwFilterContent]", inputs: { groupId: { classPropertyName: "groupId", publicName: "yuwFilterContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [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" }]
-        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwFilterContent]',
+                }]
+        }], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwFilterContent", required: true }] }] } });
 
 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.
@@ -3452,6 +3835,7 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
  * - `showExport`: Renders the export button. Default is `false`.
  * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ * - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
  *
  * Outputs:
  * - `exported`: Emits the `MouseEvent` of the export button click.
@@ -3470,6 +3854,7 @@ class YuwListToolbarActionsComponent {
         this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
         this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
         this.exported = output();
         this.searched = output();
         this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
@@ -3490,6 +3875,10 @@ class YuwListToolbarActionsComponent {
                 class: cn(selected && 'border-0', followsSelected && 'border-s!'),
             };
         }), ...(ngDevMode ? [{ debugName: "viewModeButtons" }] : /* istanbul ignore next */ []));
+        this.viewModeIconNames = computed(() => ({
+            ...DEFAULT_VIEW_MODE_ICONS,
+            ...this.viewModeIcons(),
+        }), ...(ngDevMode ? [{ debugName: "viewModeIconNames" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (this.settingsOpen()) {
                 afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
@@ -3519,7 +3908,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 } }, 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    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon name=\"lucideList\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon name=\"lucideLayoutGrid\" 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 })], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -3532,145 +3921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwComboboxComponent,
                         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    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon name=\"lucideList\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon name=\"lucideLayoutGrid\" 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"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
-
-/**
- * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
- *
- * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
- * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
- * so a trigger can override which edge the sheet appears from.
- */
-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$g.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,
-            args: [{
-                    selector: 'yuw-button[yuwSheetTriggerButton]',
-                    hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
-                    host: { 'data-slot': 'sheet-trigger' },
-                }]
-        }] });
-/** 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$g.BrnSheetClose }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'yuw-button[yuwSheetClose]',
-                    hostDirectives: [BrnSheetClose],
-                    host: { 'data-slot': 'sheet-close' },
-                }]
-        }] });
-
-/**
- * Marks an element as the sheet's footer content, projected into the footer slot.
- * Its presence is also what makes the footer render at all — without it the sheet
- * shows no empty footer strip.
- */
-class YuwSheetFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwSheetFooter]',
-                }]
-        }] });
-
-const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
-/**
- * Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
- *
- * Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
- * is announced as an anonymous dialog by screen readers.
- *
- * Inputs / Models:
- * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
- * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
- * - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
- * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
- * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
- * - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
- *   text the consuming app is responsible for translating.
- * - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
- *   renders and screen readers read this label; when absent there is no close button. User-facing
- *   text the consuming app is responsible for translating.
- * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
- *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
- *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
- *   the class has to be `data-[side=left]:w-64`, not `w-64`.
- * - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
- *   viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
- *   the overlay too, and the helm's own class always wins the `class` input it exposes.
- * - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
- *   strategy; pass `'reposition'` for a panel that should leave the page scrollable.
- * - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
- *   modal; set `false` when content outside stays visible and usable, so the claim stays honest.
- * - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
- *   clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
- *   `false` for a panel that must be dismissed deliberately.
- * - `triggerVariant`: Button style variant for the trigger button.
- * - `triggerSize`: Button size for the trigger button.
- *
- * Usage:
- * ```html
- * <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
- *   <ng-container yuwSheetTrigger>Edit Profile</ng-container>
- *
- *   <p>Sheet form content goes here.</p>
- *
- *   <div yuwSheetFooter>
- *     <yuw-button (clicked)="save()">Save Changes</yuw-button>
- *   </div>
- * </yuw-sheet>
- * ```
- */
-class YuwSheetComponent {
-    constructor() {
-        this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
-        this.sheet = viewChild.required(HlmSheet);
-        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-        this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-        this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
-        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        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._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const overlayClass = this.overlayClass();
-            if (overlayClass === undefined)
-                return;
-            this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
-        });
-    }
-    onStateChanged(state) {
-        this.open.set(state === 'open');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$h.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$h.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$h.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$h.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$h.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$h.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$h.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
-        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
-const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
+                    ], 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
@@ -3802,7 +4054,7 @@ class YuwTabsComponent {
         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$i.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$i.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$i.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$i.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$i.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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,
@@ -3836,6 +4088,7 @@ class YuwFilterDraft {
     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();
@@ -3850,6 +4103,10 @@ class YuwFilterDraft {
     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();
     }
@@ -4044,6 +4301,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
  *
  * 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.
@@ -4054,6 +4312,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  */
 class YuwListToolbarFiltersComponent {
     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 */ []));
@@ -4109,6 +4368,8 @@ class YuwListToolbarFiltersComponent {
         }, ...(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.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(() => {
@@ -4205,7 +4466,7 @@ class YuwListToolbarFiltersComponent {
         this.open.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { 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  <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</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
             type: Component,
@@ -4224,8 +4485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  <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</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { 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"] }] } });
+                    ], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\n    <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n      @for (option of group.options; track option.value) {\n        <li>\n          <label\n            class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n            [for]=\"`${group.id}-option-${option.value}`\"\n          >\n            <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n            <yuw-checkbox\n              [inputId]=\"`${group.id}-option-${option.value}`\"\n              [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n              [disabled]=\"option.disabled ?? false\"\n              [ariaLabel]=\"option.label\"\n              (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n            />\n          </label>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
+        }], 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"] }] } });
 
 /**
  * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
@@ -4235,7 +4496,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `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.
+ * `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`.
  *
  * Inputs:
  * - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
@@ -4250,6 +4513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `selection`: Two-way (`[(selection)]`) applied filter selection, values keyed by group id. Default is `{}`.
  * - `showExport`: Renders the export button. Default is `false`.
  * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ * - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
  *
  * Outputs:
  * - `exported`: Emits the `MouseEvent` of the export button click.
@@ -4257,6 +4521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwListToolbarComponent {
     constructor() {
+        this.filterContents = contentChildren(YuwFilterContentDirective, ...(ngDevMode ? [{ debugName: "filterContents" }] : /* istanbul ignore next */ []));
         this.filterGroups = input(...(ngDevMode ? [undefined, { debugName: "filterGroups" }] : /* istanbul ignore next */ []));
         this.filtersDisabled = input(false, { ...(ngDevMode ? { debugName: "filtersDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.filterSets = input(...(ngDevMode ? [undefined, { debugName: "filterSets" }] : /* istanbul ignore next */ []));
@@ -4269,6 +4534,7 @@ class YuwListToolbarComponent {
         this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
         this.exported = output();
         this.searched = output();
         this.setDeleted = output();
@@ -4277,12 +4543,12 @@ 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 } }, 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" }, 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      [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    [(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"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["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 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 }); }
 }
 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      [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    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
-        }], propDecorators: { 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"] }], 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"] }] } });
+            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" }]
+        }], 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 = {
     columnMeta: {},
@@ -4722,53 +4988,6 @@ function buildYuwActionsColumn(label, onEdit, cellClass = 'w-12', header = '') {
     };
 }
 
-/**
- * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
- *
- * Inputs:
- * - `size`: Avatar size (`'default'`, `'sm'`, `'lg'`). Default is `'default'`.
- * - `src`: Image URL for single-avatar mode. Omit to display fallback text.
- * - `alt`: Required. Accessible label for single-avatar mode and fallback text. User-facing text —
- *   the consuming app is responsible for providing (and translating) it.
- * - `fallback`: Fallback text or initials shown when image is loading, unprovided, or fails to load.
- * - `badge`: Renders a status badge marker on the bottom-right corner (single-avatar mode).
- * - `group`: Array of item DTOs (`YuwAvatarGroupItemDto[]`) to render as an overlapping avatar group stack.
- * - `groupCount`: Overflow label string (e.g. `"+5"`) displayed at the end of an avatar group stack.
- * - `class`: Extra CSS classes merged onto the inner `hlm-avatar` element(s); merged last, so they win.
- *
- * Single Avatar Usage:
- * ```html
- * <yuw-avatar src="/path/to/user.png" alt="Jane Doe" fallback="JD" />
- * <yuw-avatar alt="Jane Doe" fallback="JD" badge />
- * ```
- *
- * Avatar Group Usage:
- * ```html
- * <yuw-avatar [group]="teamMembers" alt="Team" groupCount="+5" />
- * ```
- */
-class YuwAvatarComponent {
-    constructor() {
-        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-        this.badge = input(false, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
-        this.group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
-        this.groupCount = input(undefined, ...(ngDevMode ? [{ debugName: "groupCount" }] : /* istanbul ignore next */ []));
-        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-        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$j.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$j.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$j.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$j.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$j.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$j.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,
-            args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 /**
  * Container directive for list/row item layout structures.
  * Accepts optional `variant` and `size` inputs.
@@ -6870,5 +7089,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, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwFilterContentDirective, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, 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