yukit-web 0.1.5 → 0.2.1

package/fesm2022/yukit-web.mjs

@@ -11,66 +11,66 @@ import * as i2 from 'yukit-web/helm/dropdown-menu';
 import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
 import { cva } from 'class-variance-authority';
 import { NgTemplateOutlet } from '@angular/common';
+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, lucideDownload, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucidePencil } from '@ng-icons/lucide';
-import * as i1 from 'yukit-web/helm/badge';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideDownload, lucideTrash2, lucideStar, lucideEllipsis, lucideChevronDown, lucideChevronsUpDown, lucideChevronUp, lucidePencil } from '@ng-icons/lucide';
+import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
-import * as i1$1 from 'yukit-web/helm/breadcrumb';
+import * as i1$2 from 'yukit-web/helm/breadcrumb';
 import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
 import { Router, NavigationEnd, isActive, RouterLink, RouterLinkActive } from '@angular/router';
 import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
 import { BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
-import * as i1$2 from 'yukit-web/helm/combobox';
+import * as i1$3 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
 import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
 import { HlmInput } from 'yukit-web/helm/input';
-import * as i1$3 from 'yukit-web/helm/input-group';
+import * as i1$4 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 { HlmTextarea } from 'yukit-web/helm/textarea';
 import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
-import * as i1$4 from 'yukit-web/helm/input-otp';
+import * as i1$5 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$5 from 'yukit-web/helm/switch';
+import * as i1$6 from 'yukit-web/helm/switch';
 import { HlmSwitchImports } from 'yukit-web/helm/switch';
-import * as i1$6 from 'yukit-web/helm/radio-group';
+import * as i1$7 from 'yukit-web/helm/radio-group';
 import { HlmRadioGroupImports } from 'yukit-web/helm/radio-group';
-import * as i1$7 from 'yukit-web/helm/skeleton';
+import * as i1$8 from 'yukit-web/helm/skeleton';
 import { HlmSkeleton } from 'yukit-web/helm/skeleton';
-import * as i1$8 from 'yukit-web/helm/card';
+import * as i1$9 from 'yukit-web/helm/card';
 import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction, HlmCardContent, HlmCardFooter } from 'yukit-web/helm/card';
-import * as i1$9 from 'yukit-web/helm/empty';
+import * as i1$a 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$a from 'yukit-web/helm/context-menu';
+import * as i1$b from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
-import * as i1$b from 'yukit-web/helm/date-picker';
+import * as i1$c from 'yukit-web/helm/date-picker';
 import { injectHlmMonthYearPickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
-import * as i1$c from 'yukit-web/helm/table';
+import * as i1$d from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
-import * as i1$e from 'yukit-web/helm/popover';
+import * as i1$f from 'yukit-web/helm/popover';
 import { HlmPopoverImports } from 'yukit-web/helm/popover';
-import * as i1$d from '@spartan-ng/brain/popover';
+import * as i1$e from '@spartan-ng/brain/popover';
 import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import * as i1$f from '@spartan-ng/brain/sheet';
+import * as i1$g from '@spartan-ng/brain/sheet';
 import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
-import * as i1$g from 'yukit-web/helm/sheet';
+import * as i1$h from 'yukit-web/helm/sheet';
 import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
-import * as i1$h from 'yukit-web/helm/tabs';
+import * as i1$i 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$i from 'yukit-web/helm/avatar';
+import * as i1$j from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
-import * as i1$j from 'yukit-web/helm/item';
+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 * as i1$k 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 { HlmSpinner } from 'yukit-web/helm/spinner';
 import { HlmToaster } from 'yukit-web/helm/sonner';
 export { toast as yuwToast } from '@spartan-ng/brain/sonner';
@@ -494,6 +494,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content />\n  </button>\n}\n" }]
         }], propDecorators: { animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * Tooltip directive applied directly to the element that should show a hint on hover/focus.
+ *
+ * Inputs:
+ * - `yuwTooltip`: Tooltip text (or `TemplateRef`) to display. User-facing text the consuming app
+ *   is responsible for translating.
+ * - `position`: Side the tooltip opens on (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'top'`.
+ * - `showDelay`: Milliseconds before the tooltip opens on hover. Defaults to the Brain tooltip
+ *   config default (`150`).
+ * - `hideDelay`: Milliseconds before the tooltip closes after the pointer leaves. Defaults to the
+ *   Brain tooltip config default (`100`).
+ * - `tooltipDisabled`: Disables the tooltip entirely.
+ *
+ * Usage:
+ * ```html
+ * <button yuwTooltip="Save changes" hlmBtn>Save</button>
+ * <yuw-button [yuwTooltip]="helpText" position="right">Help</yuw-button>
+ * ```
+ */
+class YuwTooltipDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTooltipDirective, isStandalone: true, selector: "[yuwTooltip]", providers: [
+            provideBrnTooltipDefaultOptions({
+                svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+            }),
+        ], hostDirectives: [{ directive: i1.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTooltip]',
+                    providers: [
+                        provideBrnTooltipDefaultOptions({
+                            svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                            tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                            arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                        }),
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: BrnTooltip,
+                            inputs: ['brnTooltip: yuwTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
+                        },
+                    ],
+                }]
+        }] });
+
 /**
  * Declares the content of a single entry inside `<yuw-button-group>`. Apply it to an
  * `<ng-template>` and pass the id of the entry it belongs to.
@@ -620,17 +669,17 @@ class YuwButtonGroupComponent {
         this.buttonClicked.emit({ id: entry.id, event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonGroupComponent, isStandalone: true, selector: "yuw-button-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, selectedVariant: { classPropertyName: "selectedVariant", publicName: "selectedVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, host: { attributes: { "role": "group" }, properties: { "class.flex-col": "orientation() === 'vertical'", "attr.aria-label": "ariaLabel()", "attr.data-orientation": "orientation()" }, classAttribute: "inline-flex w-fit items-stretch" }, queries: [{ propertyName: "_contents", predicate: YuwButtonGroupContentDirective, isSignal: true }], ngImport: i0, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonGroupComponent, isStandalone: true, selector: "yuw-button-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, selectedVariant: { classPropertyName: "selectedVariant", publicName: "selectedVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, host: { attributes: { "role": "group" }, properties: { "class.flex-col": "orientation() === 'vertical'", "attr.aria-label": "ariaLabel()", "attr.data-orientation": "orientation()" }, classAttribute: "inline-flex w-fit items-stretch" }, queries: [{ propertyName: "_contents", predicate: YuwButtonGroupContentDirective, isSignal: true }], ngImport: i0, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    [yuwTooltip]=\"button.tooltip ?? ''\"\n    [tooltipDisabled]=\"!button.tooltip\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwTooltipDirective, selector: "[yuwTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-button-group', imports: [NgTemplateOutlet, YuwButtonComponent], host: {
+            args: [{ selector: 'yuw-button-group', imports: [NgTemplateOutlet, YuwButtonComponent, YuwTooltipDirective], host: {
                         class: 'inline-flex w-fit items-stretch',
                         '[class.flex-col]': "orientation() === 'vertical'",
                         role: 'group',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.data-orientation]': 'orientation()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    [yuwTooltip]=\"button.tooltip ?? ''\"\n    [tooltipDisabled]=\"!button.tooltip\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n" }]
         }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupContentDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], selectedVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 
 /** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
@@ -671,7 +720,7 @@ class YuwBadgeComponent {
         this.removed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\" />\n  <span class=\"truncate\"><ng-content /></span>\n\n  @if (removeLabel()) {\n    <yuw-button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n", dependencies: [{ 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: 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: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1$1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\" />\n  <span class=\"truncate\"><ng-content /></span>\n\n  @if (removeLabel()) {\n    <yuw-button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n", dependencies: [{ 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: 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: YuwBadgeComponent, decorators: [{
             type: Component,
@@ -704,7 +753,7 @@ class YuwBreadcrumbComponent {
         this.separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$2.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$2.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$2.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$2.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$2.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$2.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBreadcrumbComponent, decorators: [{
             type: Component,
@@ -934,6 +983,9 @@ let nextUniqueId$2 = 0;
  * ```
  */
 class YuwComboboxComponent extends YuwValueAccessorBase {
+    close() {
+        (this._multipleBox() ?? this._singleBox())?.close();
+    }
     constructor() {
         super();
         this._element = inject(ElementRef);
@@ -1036,13 +1088,13 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$3.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$3.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$3.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$3.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$3.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$3.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$3.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$3.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$3.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$3.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$3.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$3.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$3.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot. */
@@ -1757,7 +1809,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$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
@@ -1834,7 +1886,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$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
             type: Component,
@@ -1950,7 +2002,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$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
             type: Component,
@@ -2192,7 +2244,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$5.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
@@ -2256,7 +2308,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$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
@@ -2278,7 +2330,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$7.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$8.HlmSkeleton }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, decorators: [{
             type: Directive,
@@ -2345,7 +2397,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$8.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$9.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, decorators: [{
             type: Directive,
@@ -2357,7 +2409,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$8.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$9.HlmCardHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, decorators: [{
             type: Directive,
@@ -2369,7 +2421,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$8.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$9.HlmCardTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, decorators: [{
             type: Directive,
@@ -2381,7 +2433,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$8.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$9.HlmCardDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, decorators: [{
             type: Directive,
@@ -2393,7 +2445,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$8.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$9.HlmCardAction }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, decorators: [{
             type: Directive,
@@ -2405,7 +2457,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$8.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$9.HlmCardContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, decorators: [{
             type: Directive,
@@ -2417,7 +2469,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$8.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$9.HlmCardFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, decorators: [{
             type: Directive,
@@ -2458,7 +2510,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$9.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$a.HlmEmpty }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, decorators: [{
             type: Directive,
@@ -2470,7 +2522,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$9.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$a.HlmEmptyHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, decorators: [{
             type: Directive,
@@ -2482,7 +2534,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$9.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$a.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, decorators: [{
             type: Directive,
@@ -2494,7 +2546,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$9.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$a.HlmEmptyTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, decorators: [{
             type: Directive,
@@ -2506,7 +2558,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$9.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$a.HlmEmptyDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, decorators: [{
             type: Directive,
@@ -2518,7 +2570,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$9.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$a.HlmEmptyContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, decorators: [{
             type: Directive,
@@ -2653,7 +2705,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$a.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$b.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,
@@ -2973,7 +3025,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$b.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$b.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
@@ -3001,7 +3053,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$c.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$d.HlmTableContainer }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, decorators: [{
             type: Directive,
@@ -3013,7 +3065,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$c.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$d.HlmTable }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, decorators: [{
             type: Directive,
@@ -3025,7 +3077,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$c.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$d.HlmTHead }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, decorators: [{
             type: Directive,
@@ -3037,7 +3089,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$c.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$d.HlmTBody }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, decorators: [{
             type: Directive,
@@ -3049,7 +3101,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$c.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$d.HlmTFoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, decorators: [{
             type: Directive,
@@ -3061,7 +3113,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$c.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$d.HlmTr }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, decorators: [{
             type: Directive,
@@ -3073,7 +3125,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$c.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$d.HlmTh }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, decorators: [{
             type: Directive,
@@ -3085,7 +3137,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$c.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$d.HlmTd }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, decorators: [{
             type: Directive,
@@ -3097,7 +3149,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$c.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$d.HlmCaption }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, decorators: [{
             type: Directive,
@@ -3145,7 +3197,7 @@ const YuwTableImports = [
  */
 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$d.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$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,
@@ -3180,6 +3232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `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).
  *
+ * 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.
  *
@@ -3194,6 +3249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 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 */ []));
@@ -3213,14 +3269,14 @@ class YuwPopoverComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$e.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$e.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$e.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$e.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$e.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$e.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$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 }); }
 }
 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  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+                    }, 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 }] }] } });
 
 /**
  * What counts as inside the columns popover: its trigger, its panel and the combobox list, which
@@ -3308,7 +3364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwSheetTriggerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$f.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$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,
@@ -3321,7 +3377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
 class YuwSheetCloseDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$f.BrnSheetClose }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$g.BrnSheetClose }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
             type: Directive,
@@ -3426,7 +3482,7 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, 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$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, 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,
@@ -3555,7 +3611,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$h.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$h.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$h.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$h.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$h.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
             type: Component,
@@ -3568,6 +3624,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 function countSelectedValues(selection) {
     return Object.values(selection).reduce((total, entry) => total + (Array.isArray(entry) ? entry.length : 1), 0);
 }
+function isSameSelection(first, second) {
+    const groupIds = new Set([...Object.keys(first), ...Object.keys(second)]);
+    return [...groupIds].every((groupId) => isSameEntry(first[groupId], second[groupId]));
+}
+function isSameEntry(applied, staged) {
+    if (Array.isArray(applied) && Array.isArray(staged)) {
+        return applied.length === staged.length && new Set(applied).size === new Set([...applied, ...staged]).size;
+    }
+    return applied === staged;
+}
 /**
  * Staged selection behind the filter editor. Picking an option changes the draft, not the applied
  * selection, so the page does not re-query on every click; only `snapshot()` is committed.
@@ -3582,7 +3648,7 @@ class YuwFilterDraft {
         this.pendingGroupIds = computed(() => {
             const committed = this.applied();
             const staged = this._entries();
-            return new Set([...new Set([...Object.keys(committed), ...Object.keys(staged)])].filter((groupId) => !YuwFilterDraft.isSameEntry(committed[groupId], staged[groupId])));
+            return new Set([...new Set([...Object.keys(committed), ...Object.keys(staged)])].filter((groupId) => !isSameEntry(committed[groupId], staged[groupId])));
         }, ...(ngDevMode ? [{ debugName: "pendingGroupIds" }] : /* istanbul ignore next */ []));
         this.checkedValues = computed(() => Object.fromEntries(Object.entries(this._entries()).map(([groupId, entry]) => [
             groupId,
@@ -3624,18 +3690,64 @@ class YuwFilterDraft {
     _setSingle(groupId, value) {
         this._entries.update((entries) => value === undefined ? YuwFilterDraft.without(entries, groupId) : { ...entries, [groupId]: value });
     }
-    static isSameEntry(applied, staged) {
-        if (Array.isArray(applied) && Array.isArray(staged)) {
-            return applied.length === staged.length && new Set(applied).size === new Set([...applied, ...staged]).size;
-        }
-        return applied === staged;
-    }
     static without(entries, groupId) {
         const { [groupId]: _removed, ...rest } = entries;
         return rest;
     }
 }
 
+const NAME_MAX_LENGTH = 25;
+const TITLE_LABEL = {
+    save: (labels) => labels.saveTitle,
+    rename: (labels) => labels.renameTitle,
+    delete: (labels) => labels.deleteTitle,
+};
+/** Heading of a form mode, shared with a host that shows it in its own header. */
+function filterSetFormTitle(mode, labels) {
+    return TITLE_LABEL[mode](labels);
+}
+/**
+ * View of the filters panel that names a new set, renames one, or confirms deleting one. Renaming
+ * also offers a delete shortcut that emits `deleteRequested`, leaving the confirmation to the host.
+ *
+ * It lives inside the toolbar's popover or sheet, so it is created each time that panel opens: the
+ * name field is seeded from `name` and takes focus once rendered. `titleHidden` drops the heading
+ * when the host already shows it. `confirmed` emits the trimmed
+ * name; a delete confirmation emits the name it was opened with, so the host decides from `mode`.
+ */
+class YuwListToolbarFilterSetFormComponent {
+    constructor() {
+        this._nameInput = viewChild(YuwInputComponent, ...(ngDevMode ? [{ debugName: "_nameInput" }] : /* istanbul ignore next */ []));
+        this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.titleHidden = input(false, { ...(ngDevMode ? { debugName: "titleHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.cancelled = output();
+        this.confirmed = output();
+        this.deleteRequested = output();
+        this.nameMaxLength = NAME_MAX_LENGTH;
+        this.draftName = linkedSignal(() => this.name(), ...(ngDevMode ? [{ debugName: "draftName" }] : /* istanbul ignore next */ []));
+        this.isDelete = computed(() => this.mode() === 'delete', ...(ngDevMode ? [{ debugName: "isDelete" }] : /* istanbul ignore next */ []));
+        this.canConfirm = computed(() => this.isDelete() || this.draftName().trim().length > 0, ...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
+        this.canDelete = computed(() => this.mode() === 'rename', ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+        this.deleteMessage = computed(() => this.labels().deleteMessage(this.name()), ...(ngDevMode ? [{ debugName: "deleteMessage" }] : /* istanbul ignore next */ []));
+        this.title = computed(() => filterSetFormTitle(this.mode(), this.labels()), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => this._nameInput()?.focus());
+    }
+    onConfirm() {
+        if (this.canConfirm()) {
+            this.confirmed.emit(this.isDelete() ? this.name() : this.draftName().trim());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetFormComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-set-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelled: "cancelled", confirmed: "confirmed", deleteRequested: "deleteRequested" }, host: { listeners: { "keydown.enter": "onConfirm()" }, classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideTrash2 })], viewQueries: [{ propertyName: "_nameInput", first: true, predicate: YuwInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div class=\"flex flex-wrap items-center gap-1\" [class.justify-between]=\"canDelete()\" [class.justify-end]=\"!canDelete()\">\n  @if (canDelete()) {\n    <yuw-button variant=\"ghost\" color=\"destructive\" size=\"sm\" class=\"gap-1\" (clicked)=\"deleteRequested.emit()\">\n      <ng-icon name=\"lucideTrash2\" size=\"16\" />\n      {{ labels().delete }}\n    </yuw-button>\n  }\n\n  <span class=\"flex gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" (clicked)=\"cancelled.emit()\">{{ labels().cancel }}</yuw-button>\n    <yuw-button\n      size=\"sm\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ isDelete() ? labels().delete : labels().confirm }}\n    </yuw-button>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwInputComponent, selector: "yuw-input", inputs: ["inputmode", "maxlength", "size", "type"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-list-toolbar-filter-set-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwInputComponent], providers: [provideIcons({ lucideTrash2 })], host: { class: 'flex max-w-full flex-col gap-3', '(keydown.enter)': 'onConfirm()' }, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div class=\"flex flex-wrap items-center gap-1\" [class.justify-between]=\"canDelete()\" [class.justify-end]=\"!canDelete()\">\n  @if (canDelete()) {\n    <yuw-button variant=\"ghost\" color=\"destructive\" size=\"sm\" class=\"gap-1\" (clicked)=\"deleteRequested.emit()\">\n      <ng-icon name=\"lucideTrash2\" size=\"16\" />\n      {{ labels().delete }}\n    </yuw-button>\n  }\n\n  <span class=\"flex gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" (clicked)=\"cancelled.emit()\">{{ labels().cancel }}</yuw-button>\n    <yuw-button\n      size=\"sm\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ isDelete() ? labels().delete : labels().confirm }}\n    </yuw-button>\n  </span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _nameInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwInputComponent), { isSignal: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHidden", required: false }] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }] } });
+
+const NO_SET = '__yuw_no_set__';
 /**
  * Filter control of `yuw-list-toolbar`. From `md` up the editor is a two-pane panel in a popover;
  * below it, one tab per group in a bottom sheet.
@@ -3643,18 +3755,40 @@ class YuwFilterDraft {
  * Each layout keeps its own trigger: the popover anchors to the element holding
  * `yuwPopoverTrigger`, so it cannot come from a shared `ng-template`. `activeCount` reads the
  * applied selection, not the draft. Opening the editor discards unapplied draft changes.
+ *
+ * Saved sets are on when both `sets` and `labels.sets` are given. A star left of the title saves the
+ * applied selection under a name. While that exact selection is already a set the star is filled and
+ * opens that set's rename view, which also offers delete. Once
+ * there are sets, a select applies one. Choosing "none" restores the selection held before the first
+ * set was applied, but only while a set is the one applied, so it never discards hand-picked filters.
+ * Below `md` the sets select collapses to an icon button that opens it, so the toolbar keeps one
+ * line; the select stays mounted but invisible, right-aligned under the button, so its list has an
+ * anchor and a usable width.
+ * Naming, renaming and deleting a set replace the editor inside the same popover or sheet. The view
+ * is reset when the panel opens, not when it closes, so it does not flash back while closing. A change
+ * of layout closes the panel, since a popover opened from a sheet has no anchor to position against.
+ * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
  */
 class YuwListToolbarFiltersComponent {
     constructor() {
+        this._setsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_setsCombobox" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
         this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
         this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
         this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.sets = input(...(ngDevMode ? [undefined, { debugName: "sets" }] : /* istanbul ignore next */ []));
+        this.setDeleted = output();
+        this.setRenamed = output();
+        this.setSaved = output();
         this._activeGroupId = signal(null, ...(ngDevMode ? [{ debugName: "_activeGroupId" }] : /* istanbul ignore next */ []));
+        this._selectionBeforeSet = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectionBeforeSet" }] : /* istanbul ignore next */ []));
+        this._setPanelId = signal(undefined, ...(ngDevMode ? [{ debugName: "_setPanelId" }] : /* istanbul ignore next */ []));
+        this._setPanelRequested = false;
         this.draft = new YuwFilterDraft(this.selection);
         this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.setPanelMode = signal(null, ...(ngDevMode ? [{ debugName: "setPanelMode" }] : /* istanbul ignore next */ []));
         this.activeCount = computed(() => countSelectedValues(this.selection()), ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
         this.activeGroup = computed(() => {
             const groups = this.groups();
@@ -3662,10 +3796,17 @@ class YuwListToolbarFiltersComponent {
             return groups.find((group) => group.id === id) ?? groups.at(0) ?? null;
         }, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
         this.hasActive = computed(() => this.activeCount() > 0, ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
+        this.matchingSet = computed(() => {
+            const selection = this.selection();
+            return this.hasActive() ? this.sets()?.find((set) => isSameSelection(set.selection, selection)) : undefined;
+        }, ...(ngDevMode ? [{ debugName: "matchingSet" }] : /* istanbul ignore next */ []));
+        this.setLabels = computed(() => (this.sets() ? this.labels().sets : undefined), ...(ngDevMode ? [{ debugName: "setLabels" }] : /* istanbul ignore next */ []));
         this.buttons = computed(() => {
             const active = this.hasActive();
             const disabled = this.disabled();
             const { title, clearAll } = this.labels();
+            const setLabels = this.setLabels();
+            const matching = this.matchingSet();
             const entries = [
                 {
                     id: 'filters',
@@ -3674,24 +3815,62 @@ class YuwListToolbarFiltersComponent {
                     disabled,
                 },
             ];
+            if (setLabels) {
+                entries.unshift({
+                    id: 'save',
+                    ariaLabel: setLabels.save,
+                    tooltip: matching ? setLabels.edit : setLabels.save,
+                    variant: active ? 'secondary' : 'outline',
+                    size: 'icon',
+                    disabled: disabled || !active,
+                });
+            }
             if (active) {
                 entries.push({ id: 'clear', ariaLabel: clearAll, size: 'icon', disabled });
             }
             return entries;
         }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
+        this.selectedSetId = computed(() => this.matchingSet()?.id ?? NO_SET, ...(ngDevMode ? [{ debugName: "selectedSetId" }] : /* istanbul ignore next */ []));
         this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
+        this.setOptions = computed(() => {
+            const labels = this.setLabels();
+            const sets = this.sets() ?? [];
+            return labels && sets.length > 0
+                ? [
+                    { value: NO_SET, label: labels.none, data: false },
+                    ...sets.map((set) => ({ value: set.id, label: set.name, data: true })),
+                ]
+                : [];
+        }, ...(ngDevMode ? [{ debugName: "setOptions" }] : /* istanbul ignore next */ []));
+        this.setPanelName = computed(() => this.sets()?.find((set) => set.id === this._setPanelId())?.name ?? '', ...(ngDevMode ? [{ debugName: "setPanelName" }] : /* istanbul ignore next */ []));
+        this.sheetTitle = computed(() => {
+            const mode = this.setPanelMode();
+            const labels = this.setLabels();
+            return mode && labels ? filterSetFormTitle(mode, labels) : this.labels().title;
+        }, ...(ngDevMode ? [{ debugName: "sheetTitle" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => this.groups().map((group) => ({ id: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (this.open()) {
-                untracked(() => this.draft.reset());
+                untracked(() => this._onOpened());
             }
         });
+        effect(() => {
+            this.isMobile();
+            untracked(() => this.open.set(false));
+        });
     }
     onApply() {
         this.commit(this.draft.snapshot());
     }
     onButtonClicked({ id, event }) {
+        if (id === 'save') {
+            event.stopPropagation();
+            event.preventDefault();
+            const matching = this.matchingSet();
+            this.openSetPanel(matching ? 'rename' : 'save', matching?.id);
+            return;
+        }
         if (id === 'clear') {
             event.stopPropagation();
             event.preventDefault();
@@ -3705,15 +3884,69 @@ class YuwListToolbarFiltersComponent {
     onOptionChange(group, value, checked) {
         this.draft.toggle(group, value, checked);
     }
+    onSetDeleteRequested() {
+        this.setPanelMode.set('delete');
+    }
+    onSetFormConfirmed(name) {
+        const mode = this.setPanelMode();
+        const setId = this._setPanelId() ?? '';
+        const handlers = {
+            save: () => this.setSaved.emit({ name, selection: this.selection() }),
+            rename: () => this.setRenamed.emit({ id: setId, name }),
+            delete: () => this.setDeleted.emit(setId),
+        };
+        if (mode) {
+            handlers[mode]();
+        }
+        this.open.set(false);
+    }
+    onSetPicked(value) {
+        if (typeof value !== 'string' || value === this.selectedSetId()) {
+            return;
+        }
+        if (value === NO_SET) {
+            this.selection.set(this._selectionBeforeSet() ?? {});
+            this._selectionBeforeSet.set(undefined);
+            return;
+        }
+        const set = this.sets()?.find((candidate) => candidate.id === value);
+        if (!set) {
+            return;
+        }
+        if (!this.matchingSet()) {
+            this._selectionBeforeSet.set(this.selection());
+        }
+        this.selection.set(set.selection);
+    }
+    openSetPanel(mode, setId) {
+        this._setPanelRequested = !this.open();
+        this.setPanelMode.set(mode);
+        this._setPanelId.set(setId);
+        this.open.set(true);
+    }
+    openSetPanelFromList(mode, setId) {
+        this._setsCombobox()?.close();
+        requestAnimationFrame(() => this.openSetPanel(mode, setId));
+    }
+    openSetsList() {
+        this._setsCombobox()?.open();
+    }
     selectGroup(groupId) {
         this._activeGroupId.set(groupId);
     }
+    _onOpened() {
+        this.draft.reset();
+        if (!this._setPanelRequested) {
+            this.setPanelMode.set(null);
+        }
+        this._setPanelRequested = false;
+    }
     commit(selection) {
         this.selection.set(selection);
         this.open.set(false);
     }
     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 } }, outputs: { selection: "selectionChange" }, providers: [provideIcons({ 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 #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=\"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]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\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  </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=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\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  </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: 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: { 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({ lucideChevronDown, lucideEllipsis, lucideStar, lucideX })], viewQueries: [{ propertyName: "_setsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], 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</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 #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=\"save\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\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    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n    } @else {\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  </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=\"save\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n    } @else {\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  </yuw-popover>\n}\n\n@if (setLabels(); as labels) {\n  @if (setOptions().length > 0) {\n    <div [class]=\"isMobile() ? 'relative inline-flex' : 'w-full max-w-52.5'\">\n      @if (isMobile()) {\n        <yuw-button variant=\"outline\" size=\"icon\" [ariaLabel]=\"labels.select\" (clicked)=\"openSetsList()\">\n          <ng-icon name=\"lucideChevronDown\" size=\"16\" />\n        </yuw-button>\n      }\n\n      <div [class]=\"isMobile() ? 'pointer-events-none absolute top-0 right-0 h-full w-52 opacity-0' : 'contents'\">\n        <yuw-combobox\n          readonlyTrigger\n          [options]=\"setOptions()\"\n          [value]=\"selectedSetId()\"\n          [triggerAriaLabel]=\"labels.select\"\n          [placeholder]=\"labels.select\"\n          (valueChange)=\"onSetPicked($event)\"\n        >\n          <ng-template yuwComboboxItem let-option>\n            <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n            @if (option.data) {\n              <span class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                <yuw-button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  [ariaLabel]=\"labels.edit\"\n                  (clicked)=\"openSetPanelFromList('rename', option.value)\"\n                >\n                  <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n                </yuw-button>\n              </span>\n            }\n          </ng-template>\n        </yuw-combobox>\n      </div>\n    </div>\n  }\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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { 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,
@@ -3725,26 +3958,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwButtonGroupComponent,
                         YuwButtonGroupContentDirective,
                         YuwCheckboxComponent,
+                        YuwComboboxComponent,
+                        YuwComboboxItemDirective,
+                        YuwListToolbarFilterSetFormComponent,
                         YuwPopoverComponent,
                         YuwSheetComponent,
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], providers: [provideIcons({ lucideX })], 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 #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=\"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]=\"labels().title\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\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  </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=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\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  </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"] }] } });
+                    ], providers: [provideIcons({ lucideChevronDown, lucideEllipsis, 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</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 #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=\"save\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\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    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n    } @else {\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  </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=\"save\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n    } @else {\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  </yuw-popover>\n}\n\n@if (setLabels(); as labels) {\n  @if (setOptions().length > 0) {\n    <div [class]=\"isMobile() ? 'relative inline-flex' : 'w-full max-w-52.5'\">\n      @if (isMobile()) {\n        <yuw-button variant=\"outline\" size=\"icon\" [ariaLabel]=\"labels.select\" (clicked)=\"openSetsList()\">\n          <ng-icon name=\"lucideChevronDown\" size=\"16\" />\n        </yuw-button>\n      }\n\n      <div [class]=\"isMobile() ? 'pointer-events-none absolute top-0 right-0 h-full w-52 opacity-0' : 'contents'\">\n        <yuw-combobox\n          readonlyTrigger\n          [options]=\"setOptions()\"\n          [value]=\"selectedSetId()\"\n          [triggerAriaLabel]=\"labels.select\"\n          [placeholder]=\"labels.select\"\n          (valueChange)=\"onSetPicked($event)\"\n        >\n          <ng-template yuwComboboxItem let-option>\n            <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n            @if (option.data) {\n              <span class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                <yuw-button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  [ariaLabel]=\"labels.edit\"\n                  (clicked)=\"openSetPanelFromList('rename', option.value)\"\n                >\n                  <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n                </yuw-button>\n              </span>\n            }\n          </ng-template>\n        </yuw-combobox>\n      </div>\n    </div>\n  }\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _setsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], 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
  * trailing one, and projected content after them.
  *
  * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
- * `showExport`, `hideableColumns`. `labels` holds every text and the consumer translates it;
+ * `showExport`, `hideableColumns`. 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.
  */
 class YuwListToolbarComponent {
     constructor() {
         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 */ []));
         this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
         this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
         this.idleColor = input('neutral', ...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
@@ -3755,15 +3993,18 @@ class YuwListToolbarComponent {
         this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.exported = output();
         this.searched = output();
+        this.setDeleted = output();
+        this.setRenamed = output();
+        this.setSaved = output();
         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 }, 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 } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex 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      [(selection)]=\"selection\"\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    [(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"], outputs: ["hiddenColumnsChange", "searchChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["disabled", "groups", "idleColor", "isMobile", "labels", "selection"], outputs: ["selectionChange"] }], 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 } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", 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    [(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"], outputs: ["hiddenColumnsChange", "searchChange", "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 }); }
 }
 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 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      [(selection)]=\"selection\"\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    [(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 }] }], 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 }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
+            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    [(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 }] }], 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: {},
@@ -4223,7 +4464,7 @@ class YuwAvatarComponent {
         this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$i.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$i.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$i.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$i.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$i.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$i.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$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,
@@ -4250,7 +4491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDirective, isStandalone: true, selector: "[yuwItem], yuw-item", hostDirectives: [{ directive: i1$j.HlmItem, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDirective, isStandalone: true, selector: "[yuwItem], yuw-item", hostDirectives: [{ directive: i1$k.HlmItem, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDirective, decorators: [{
             type: Directive,
@@ -4262,7 +4503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header slot directive for an item container. */
 class YuwItemHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemHeaderDirective, isStandalone: true, selector: "[yuwItemHeader], yuw-item-header", hostDirectives: [{ directive: i1$j.HlmItemHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemHeaderDirective, isStandalone: true, selector: "[yuwItemHeader], yuw-item-header", hostDirectives: [{ directive: i1$k.HlmItemHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemHeaderDirective, decorators: [{
             type: Directive,
@@ -4274,7 +4515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Leading media slot directive (for icons, avatars, or images) at the start of an item. Supports `variant` (`'default'`, `'icon'`, `'image'`). */
 class YuwItemMediaDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemMediaDirective, isStandalone: true, selector: "[yuwItemMedia], yuw-item-media", hostDirectives: [{ directive: i1$j.HlmItemMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemMediaDirective, isStandalone: true, selector: "[yuwItemMedia], yuw-item-media", hostDirectives: [{ directive: i1$k.HlmItemMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemMediaDirective, decorators: [{
             type: Directive,
@@ -4286,7 +4527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Main text content container directive for an item. */
 class YuwItemContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemContentDirective, isStandalone: true, selector: "[yuwItemContent], yuw-item-content", hostDirectives: [{ directive: i1$j.HlmItemContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemContentDirective, isStandalone: true, selector: "[yuwItemContent], yuw-item-content", hostDirectives: [{ directive: i1$k.HlmItemContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemContentDirective, decorators: [{
             type: Directive,
@@ -4298,7 +4539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Title heading directive for an item. */
 class YuwItemTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemTitleDirective, isStandalone: true, selector: "[yuwItemTitle], yuw-item-title", hostDirectives: [{ directive: i1$j.HlmItemTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemTitleDirective, isStandalone: true, selector: "[yuwItemTitle], yuw-item-title", hostDirectives: [{ directive: i1$k.HlmItemTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemTitleDirective, decorators: [{
             type: Directive,
@@ -4310,7 +4551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Subtitle or description paragraph directive for an item. */
 class YuwItemDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDescriptionDirective, isStandalone: true, selector: "[yuwItemDescription], yuw-item-description", hostDirectives: [{ directive: i1$j.HlmItemDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemDescriptionDirective, isStandalone: true, selector: "[yuwItemDescription], yuw-item-description", hostDirectives: [{ directive: i1$k.HlmItemDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemDescriptionDirective, decorators: [{
             type: Directive,
@@ -4322,7 +4563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Trailing action controls slot directive (for buttons, switches, or menu triggers) at the end of an item. */
 class YuwItemActionsDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemActionsDirective, isStandalone: true, selector: "[yuwItemActions], yuw-item-actions", hostDirectives: [{ directive: i1$j.HlmItemActions }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemActionsDirective, isStandalone: true, selector: "[yuwItemActions], yuw-item-actions", hostDirectives: [{ directive: i1$k.HlmItemActions }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemActionsDirective, decorators: [{
             type: Directive,
@@ -4334,7 +4575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Footer slot directive for an item. */
 class YuwItemFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemFooterDirective, isStandalone: true, selector: "[yuwItemFooter], yuw-item-footer", hostDirectives: [{ directive: i1$j.HlmItemFooter }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemFooterDirective, isStandalone: true, selector: "[yuwItemFooter], yuw-item-footer", hostDirectives: [{ directive: i1$k.HlmItemFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemFooterDirective, decorators: [{
             type: Directive,
@@ -4346,7 +4587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Container directive for grouping multiple item rows together into a list card or bordered group. */
 class YuwItemGroupDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemGroupDirective, isStandalone: true, selector: "[yuwItemGroup], yuw-item-group", hostDirectives: [{ directive: i1$j.HlmItemGroup }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwItemGroupDirective, isStandalone: true, selector: "[yuwItemGroup], yuw-item-group", hostDirectives: [{ directive: i1$k.HlmItemGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwItemGroupDirective, decorators: [{
             type: Directive,
@@ -4387,55 +4628,6 @@ const YuwItemImports = [
     YuwItemSeparatorDirective,
 ];
 
-/**
- * Tooltip directive applied directly to the element that should show a hint on hover/focus.
- *
- * Inputs:
- * - `yuwTooltip`: Tooltip text (or `TemplateRef`) to display. User-facing text the consuming app
- *   is responsible for translating.
- * - `position`: Side the tooltip opens on (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'top'`.
- * - `showDelay`: Milliseconds before the tooltip opens on hover. Defaults to the Brain tooltip
- *   config default (`150`).
- * - `hideDelay`: Milliseconds before the tooltip closes after the pointer leaves. Defaults to the
- *   Brain tooltip config default (`100`).
- * - `tooltipDisabled`: Disables the tooltip entirely.
- *
- * Usage:
- * ```html
- * <button yuwTooltip="Save changes" hlmBtn>Save</button>
- * <yuw-button [yuwTooltip]="helpText" position="right">Help</yuw-button>
- * ```
- */
-class YuwTooltipDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTooltipDirective, isStandalone: true, selector: "[yuwTooltip]", providers: [
-            provideBrnTooltipDefaultOptions({
-                svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
-                tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
-                arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
-            }),
-        ], hostDirectives: [{ directive: i1$k.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwTooltip]',
-                    providers: [
-                        provideBrnTooltipDefaultOptions({
-                            svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
-                            tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
-                            arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
-                        }),
-                    ],
-                    hostDirectives: [
-                        {
-                            directive: BrnTooltip,
-                            inputs: ['brnTooltip: yuwTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
-                        },
-                    ],
-                }]
-        }] });
-
 /**
  * Indeterminate loading spinner.
  *