yukit-web 0.2.8 → 0.3.0

package/fesm2022/yukit-web.mjs

@@ -15,7 +15,7 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
@@ -29,46 +29,46 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
 import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
 import { HlmInput } from 'yukit-web/helm/input';
-import * as i1$4 from 'yukit-web/helm/input-group';
+import * as i1$9 from 'yukit-web/helm/input-group';
 import { HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon, HlmInputGroupTextarea, HlmInputGroupImports } from 'yukit-web/helm/input-group';
 import { BrnField } from '@spartan-ng/brain/field';
+import * as i1$4 from 'yukit-web/helm/avatar';
+import { HlmAvatarImports } from 'yukit-web/helm/avatar';
+import * as i1$6 from 'yukit-web/helm/popover';
+import { HlmPopoverImports } from 'yukit-web/helm/popover';
+import * as i1$5 from '@spartan-ng/brain/popover';
+import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import * as i1$7 from '@spartan-ng/brain/sheet';
+import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
+import * as i1$8 from 'yukit-web/helm/sheet';
+import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
 import { HlmTextarea } from 'yukit-web/helm/textarea';
 import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
-import * as i1$5 from 'yukit-web/helm/input-otp';
+import * as i1$a from 'yukit-web/helm/input-otp';
 import { HlmInputOtpImports } from 'yukit-web/helm/input-otp';
 import { HlmLabel } from 'yukit-web/helm/label';
 import { HlmCheckbox } from 'yukit-web/helm/checkbox';
-import * as i1$6 from 'yukit-web/helm/switch';
+import * as i1$b from 'yukit-web/helm/switch';
 import { HlmSwitchImports } from 'yukit-web/helm/switch';
-import * as i1$7 from 'yukit-web/helm/radio-group';
+import * as i1$c from 'yukit-web/helm/radio-group';
 import { HlmRadioGroupImports } from 'yukit-web/helm/radio-group';
-import * as i1$8 from 'yukit-web/helm/skeleton';
+import * as i1$d from 'yukit-web/helm/skeleton';
 import { HlmSkeleton } from 'yukit-web/helm/skeleton';
-import * as i1$9 from 'yukit-web/helm/card';
+import * as i1$e from 'yukit-web/helm/card';
 import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction, HlmCardContent, HlmCardFooter } from 'yukit-web/helm/card';
-import * as i1$a from 'yukit-web/helm/empty';
+import * as i1$f from 'yukit-web/helm/empty';
 import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
 import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
-import * as i1$b from 'yukit-web/helm/context-menu';
+import * as i1$g from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
-import * as i1$c from 'yukit-web/helm/date-picker';
+import * as i1$h from 'yukit-web/helm/date-picker';
 import { injectHlmMonthYearPickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
-import * as i1$d from 'yukit-web/helm/table';
+import * as i1$i from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
-import * as i1$f from 'yukit-web/helm/popover';
-import { HlmPopoverImports } from 'yukit-web/helm/popover';
-import * as i1$e from '@spartan-ng/brain/popover';
-import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import * as i1$g from '@spartan-ng/brain/sheet';
-import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
-import * as i1$h from 'yukit-web/helm/sheet';
-import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
-import * as i1$i from 'yukit-web/helm/tabs';
+import * as i1$j from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
 import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
 import { injectTable, FlexRenderDirective, flexRenderComponent } from '@tanstack/angular-table';
-import * as i1$j from 'yukit-web/helm/avatar';
-import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$k from 'yukit-web/helm/item';
 import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
 import { HlmSpinner } from 'yukit-web/helm/spinner';
@@ -128,6 +128,9 @@ function cn(...inputs) {
  * ```html
  * <button hlmBtn [size]="size()" [yuwClass]="_btnClass()">Save</button>
  * ```
+ *
+ * Inputs:
+ * - `yuwClass`: String of CSS classes registered as a replaceable `classes()` source on the host. Default is `''`.
  */
 class YuwClassDirective {
     constructor() {
@@ -179,6 +182,10 @@ function provideValueAccessor(component) {
  *
  * They're kept as two separate signals and OR'd together in `_disabled`: disabled by *either*
  * source means disabled. That's the only combination that never drops a caller's intent.
+ *
+ * Inputs:
+ * - `disabled`: Disables the form control and blocks user interaction. Combined with the disabled
+ *   state coming from the forms API, so either one disables it. Default is `false`.
  */
 class YuwValueAccessorBase {
     constructor() {
@@ -241,6 +248,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * forward to its native input — lives one level down, per the Liskov rule in `AGENTS.md`.
  *
  * Subclasses provide `_autoId`, the fallback `id` used when the consumer sets no `inputId`.
+ *
+ * Inputs:
+ * - `class`: Extra CSS classes merged last onto the field's visual element, so they win over the
+ *   defaults. Bound through the `class` alias of an internal input. Default is `''`.
+ * - `errorText`: Error message shown under the field. Default is `undefined`.
+ * - `helperText`: Helper message shown under the field. Default is `undefined`.
+ * - `inputId`: ID set on the native input element, for `<label [for]>` matching. Falls back to a
+ *   generated ID when unset. Default is `undefined`.
+ * - `invalid`: Marks the field as invalid. Default is `false`.
+ * - `value`: Two-way bound (`[(value)]`) string value of the field. Default is `''`.
+ *
+ * Outputs:
+ * - `valueChange`: Emits the new string whenever `value` changes, enabling two-way binding.
  */
 class YuwFieldBase extends YuwValueAccessorBase {
     constructor() {
@@ -272,6 +292,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * the controls can't drift apart — the Liskov rule in `AGENTS.md`: same-role components share one
  * input contract. Anything only some of them honor (`maxlength`, `size`, `enterPressed`, …) stays
  * on the component, never here.
+ *
+ * Inputs:
+ * - `autocomplete`: Native `autocomplete` attribute forwarded to the control. Default is `undefined`.
+ * - `name`: Native `name` attribute forwarded to the control. Default is `undefined`.
+ * - `placeholder`: Native placeholder text. Default is `undefined`.
+ * - `readonly`: Makes the control read-only. Default is `false`.
+ * - `required`: Marks the control as required. Default is `false`.
  */
 class YuwTextFieldBase extends YuwFieldBase {
     constructor() {
@@ -430,6 +457,8 @@ const yuwButtonVariants = cva('', {
  * - `class`: Extra CSS classes merged onto the inner button/anchor; merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
+ * - `animationDisabled`: Removes the pressed-state translate animation. Default is `false`. It is also
+ *   forced on when the host carries `aria-haspopup` (e.g. when used as an overlay trigger).
  *
  * Outputs:
  * - `clicked`: Emits MouseEvent on click.
@@ -559,6 +588,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </ng-template>
  * </yuw-button-group>
  * ```
+ *
+ * Inputs:
+ * - `yuwButtonGroupContent`: Required string; id of the button group entry this template renders the content of.
  */
 class YuwButtonGroupContentDirective {
     constructor() {
@@ -698,6 +730,16 @@ const REMOVE_TEXT_CLASS = {
  * (`variant`), dismissible action (`removeLabel` / `removed`), and a compact dot mode (`dot`)
  * that renders no content at all.
  *
+ * Inputs:
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'primary'`.
+ * - `dot`: Renders a compact dot with no content, icon or remove button. Default is `false`.
+ * - `removeLabel`: Accessible label for the remove button; the button only renders when this is set. The app supplies
+ *   and translates it. Default is `undefined`.
+ * - `variant`: Helm badge style (`'default'`, `'secondary'`, `'destructive'`, `'outline'`, `'ghost'`, `'link'`). Default is `'default'`.
+ *
+ * Outputs:
+ * - `removed`: Emits when the remove button is clicked.
+ *
  * Usage:
  * ```html
  * <yuw-badge color="primary">New</yuw-badge>
@@ -738,6 +780,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * (`aria-current="page"`); intermediate items render as links when they have an `href` and as
  * plain text otherwise.
  *
+ * Inputs:
+ * - `ariaLabel`: Required accessible label for the navigation landmark. The app supplies and translates it.
+ * - `items`: Required array of `YuwBreadcrumbItemDto` (`label`, optional `href`) in hierarchy order.
+ * - `separator`: Text rendered between items. Default is `'/'`.
+ *
  * Usage:
  * ```html
  * <yuw-breadcrumb
@@ -823,6 +870,19 @@ function getPaginationRange(page, totalPages) {
  * Controls two-way active page state `[(page)]`, accepts total pages (`totalPages`), accessible
  * previous/next/ellipsis labels, size and color theme.
  *
+ * Inputs:
+ * - `ariaLabel`: Required accessible label of the navigation landmark.
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'primary'`.
+ * - `ellipsisSrText`: Required screen reader text of the ellipsis between page ranges.
+ * - `nextLabel`: Required accessible label of the next page button.
+ * - `page`: Required two-way (`[(page)]`) active page, 1-based.
+ * - `previousLabel`: Required accessible label of the previous page button.
+ * - `size`: Button size (`YuwPaginationSizeDto`). Default is `'icon'`.
+ * - `totalPages`: Required total number of pages.
+ *
+ * Outputs:
+ * - `page`: Emits the new active page when the user picks one (the output half of `[(page)]`).
+ *
  * Usage:
  * ```html
  * <yuw-pagination
@@ -919,6 +979,9 @@ const yuwFieldMinHeightVariants = cva('', {
  *   </ng-template>
  * </yuw-combobox>
  * ```
+ *
+ * Inputs:
+ * - `yuwComboboxItemTypeOf`: Optional array of `YuwComboboxOptionDto`; only used to infer the generic data type of the template context for type checking. Default is `undefined`.
  */
 class YuwComboboxItemDirective {
     constructor() {
@@ -1097,7 +1160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, 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. */
+/**
+ * Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot.
+ *
+ * Inputs:
+ * - `disabled`: Disables the page size selector. Default is `false`.
+ * - `labels`: Required `YuwPageSizeLabels` with the selector label, the text for an empty list and the function that builds the range message.
+ * - `list`: Required `YuwPagedList` whose page size is chosen and whose range is shown in the message.
+ */
 class YuwPageSizeComponent {
     constructor() {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1113,7 +1183,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ selector: 'yuw-page-size', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwComboboxComponent], host: { class: 'flex items-center gap-2' }, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }] } });
 
-/** Pagination footer for lists without a datatable. A disabled `fieldset` blocks its buttons. */
+/**
+ * Pagination footer for lists without a datatable: the page size selector with its range message
+ * and the page navigation, both driven by one `YuwPagedList`. A disabled `fieldset` blocks its buttons.
+ *
+ * Inputs:
+ * - `disabled`: Disables the page size selector and the page buttons. Default is `false`.
+ * - `labels`: Required `YuwListPaginationLabels` with the consumer's text for the page size selector, the navigation aria label and the previous, next and ellipsis texts.
+ * - `list`: Required `YuwPagedList` holding the current page, page size, total pages and range; changes made in the footer are written back to it.
+ */
 class YuwListPaginationComponent {
     constructor() {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1141,14 +1219,32 @@ function injectIsMobile() {
  * Page title, optional description and up to two actions, each rendered when its label is set.
  * On mobile the primary action shows only its icon, or `primaryMobileLabel`. Icons are `@ng-icons`
  * names; the consumer registers any beyond `lucidePlus` with `provideIcons`.
+ *
+ * Inputs:
+ * - `backLabel`: Text of the back button, which renders only when set; on small screens only its arrow shows.
+ * - `description`: Optional subtitle under the title.
+ * - `primaryDisabled`: Disables the primary action, which stays visible but ignores clicks, e.g. while the list it creates items for is loading.
+ * - `primaryIcon`: Icon name shown in the primary action.
+ * - `primaryLabel`: Text of the primary action, which renders only when set.
+ * - `primaryMobileLabel`: Text the primary action shows on small screens instead of its label.
+ * - `secondaryIcon`: Icon name shown in the secondary action.
+ * - `secondaryLabel`: Text of the secondary action, which renders only when set; hidden on small screens, leaving its icon.
+ * - `title`: Required page title.
+ *
+ * Outputs:
+ * - `backClicked`: Emits the `MouseEvent` of the back button.
+ * - `primaryClicked`: Emits the `MouseEvent` of the primary action.
+ * - `secondaryClicked`: Emits the `MouseEvent` of the secondary action.
  */
 class YuwPageHeaderComponent {
     constructor() {
         this.backLabel = input(...(ngDevMode ? [undefined, { debugName: "backLabel" }] : /* istanbul ignore next */ []));
         this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        this.primaryDisabled = input(false, { ...(ngDevMode ? { debugName: "primaryDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.primaryIcon = input(...(ngDevMode ? [undefined, { debugName: "primaryIcon" }] : /* istanbul ignore next */ []));
         this.primaryLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
         this.primaryMobileLabel = input(...(ngDevMode ? [undefined, { debugName: "primaryMobileLabel" }] : /* istanbul ignore next */ []));
+        this.secondaryDisabled = input(false, { ...(ngDevMode ? { debugName: "secondaryDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.secondaryIcon = input(...(ngDevMode ? [undefined, { debugName: "secondaryIcon" }] : /* istanbul ignore next */ []));
         this.secondaryLabel = input(...(ngDevMode ? [undefined, { debugName: "secondaryLabel" }] : /* istanbul ignore next */ []));
         this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -1158,12 +1254,12 @@ class YuwPageHeaderComponent {
         this.isMobile = injectIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPageHeaderComponent, isStandalone: true, selector: "yuw-page-header", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryMobileLabel: { classPropertyName: "primaryMobileLabel", publicName: "primaryMobileLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryIcon: { classPropertyName: "secondaryIcon", publicName: "secondaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClicked: "backClicked", primaryClicked: "primaryClicked", secondaryClicked: "secondaryClicked" }, providers: [provideIcons({ lucidePlus, lucideArrowLeft })], ngImport: i0, template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPageHeaderComponent, isStandalone: true, selector: "yuw-page-header", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryMobileLabel: { classPropertyName: "primaryMobileLabel", publicName: "primaryMobileLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryIcon: { classPropertyName: "secondaryIcon", publicName: "secondaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClicked: "backClicked", primaryClicked: "primaryClicked", secondaryClicked: "secondaryClicked" }, providers: [provideIcons({ lucidePlus, lucideArrowLeft })], ngImport: i0, template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          [disabled]=\"secondaryDisabled()\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [disabled]=\"primaryDisabled()\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucidePlus, lucideArrowLeft })], template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryMobileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMobileLabel", required: false }] }], secondaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryIcon", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], primaryClicked: [{ type: i0.Output, args: ["primaryClicked"] }], secondaryClicked: [{ type: i0.Output, args: ["secondaryClicked"] }] } });
+            args: [{ selector: 'yuw-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent], providers: [provideIcons({ lucidePlus, lucideArrowLeft })], template: "<div class=\"flex flex-wrap items-start justify-center gap-4\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n    <div class=\"flex items-center gap-4\">\n      @if (backLabel(); as label) {\n        <yuw-button variant=\"outline\" [size]=\"isMobile() ? 'sm' : 'default'\" (clicked)=\"backClicked.emit($event)\">\n          <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n      <div class=\"flex flex-col overflow-hidden\">\n        <h1 class=\"truncate text-2xl font-semibold text-foreground\">{{ title() }}</h1>\n        @if (description()) {\n          <p class=\"truncate text-sm text-muted-foreground\">{{ description() }}</p>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (primaryLabel() || secondaryLabel()) {\n    <div class=\"flex shrink-0 items-center gap-2\">\n      @if (secondaryLabel(); as label) {\n        <yuw-button\n          variant=\"outline\"\n          class=\"gap-2\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          [disabled]=\"secondaryDisabled()\"\n          (clicked)=\"secondaryClicked.emit($event)\"\n        >\n          @if (secondaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-md:hidden\">{{ label }}</span>\n        </yuw-button>\n      }\n\n      @if (primaryLabel(); as label) {\n        <yuw-button\n          color=\"primary\"\n          class=\"gap-2\"\n          [disabled]=\"primaryDisabled()\"\n          [size]=\"isMobile() ? 'sm' : 'default'\"\n          (clicked)=\"primaryClicked.emit($event)\"\n        >\n          @if (primaryIcon(); as icon) {\n            <ng-icon [name]=\"icon\" size=\"16\" />\n          }\n          <span class=\"max-sm:hidden\">{{ label }}</span>\n          @if (primaryMobileLabel(); as mobileLabel) {\n            <span class=\"sm:hidden\">{{ mobileLabel }}</span>\n          }\n        </yuw-button>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], primaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryDisabled", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryMobileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMobileLabel", required: false }] }], secondaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryDisabled", required: false }] }], secondaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryIcon", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }], primaryClicked: [{ type: i0.Output, args: ["primaryClicked"] }], secondaryClicked: [{ type: i0.Output, args: ["secondaryClicked"] }] } });
 
 /**
  * Container directive for collapsible accordion items.
@@ -1317,115 +1413,557 @@ const YuwInputAddonImports = [YuwLeftAddonDirective, YuwRightAddonDirective];
  *   `ErrorStateMatcher`: invalid and touched or submitted, already blur-gated by the form) or
  *   `forcedInvalid`.
  */
-class YuwFieldFeedbackDirective {
-    constructor() {
-        this._field = inject(BrnField, { self: true });
-        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-        this._blurred = signal(false, ...(ngDevMode ? [{ debugName: "_blurred" }] : /* istanbul ignore next */ []));
-        this.errorMessage = computed(() => this.errorText() ?? firstErrorMessage(this._field.errors()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-        this.forcedInvalid = computed(() => this.invalid() && this._blurred(), ...(ngDevMode ? [{ debugName: "forcedInvalid" }] : /* istanbul ignore next */ []));
-        this.showError = computed(() => this.errorMessage() !== undefined && (this.forcedInvalid() || !!this._field.controlState()?.spartanInvalid), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+class YuwFieldFeedbackDirective {
+    constructor() {
+        this._field = inject(BrnField, { self: true });
+        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this._blurred = signal(false, ...(ngDevMode ? [{ debugName: "_blurred" }] : /* istanbul ignore next */ []));
+        this.errorMessage = computed(() => this.errorText() ?? firstErrorMessage(this._field.errors()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.forcedInvalid = computed(() => this.invalid() && this._blurred(), ...(ngDevMode ? [{ debugName: "forcedInvalid" }] : /* istanbul ignore next */ []));
+        this.showError = computed(() => this.errorMessage() !== undefined && (this.forcedInvalid() || !!this._field.controlState()?.spartanInvalid), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldFeedbackDirective, isStandalone: true, selector: "hlm-field[yuwFieldFeedback]", inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_blurred.set(true)" } }, exportAs: ["yuwFieldFeedback"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hlm-field[yuwFieldFeedback]',
+                    exportAs: 'yuwFieldFeedback',
+                    host: {
+                        '(focusout)': '_blurred.set(true)',
+                    },
+                }]
+        }], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+function firstErrorMessage(errors) {
+    return Object.values(errors ?? {}).find((error) => typeof error?.message === 'string')?.message;
+}
+
+/** Module-level counter backing each instance's stable fallback `id`. */
+let nextYuwInputId = 0;
+/**
+ * Single-line text input control supporting two-way value binding, form controls (`formControlName`, `ngModel`),
+ * validation styling, and left/right addon slots.
+ *
+ * Inputs / Models:
+ * - `value`: Two-way text string.
+ * - `inputId`: `id` applied to the native input, for external `<label for>` association.
+ * - `type`: HTML input type (`'text'`, `'email'`, `'number'`, etc.). Default is `'text'`.
+ * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
+ *   `<yuw-button>` size of the same name. Default is `'default'`.
+ * - `inputmode`: Virtual keyboard hint (e.g. `'numeric'`).
+ * - `disabled`: Disables input interaction.
+ * - `readonly`: Makes the field read-only.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
+ * - `name`: HTML `name` attribute.
+ * - `autocomplete`: Native `autocomplete` attribute.
+ * - `maxlength`: Hard cap on character count, enforced natively by the browser.
+ * - `placeholder`: Hint text shown inside the empty field.
+ * - `class`: Extra classes merged onto the visual root (the input, or the input group when addons are present).
+ *
+ * Outputs:
+ * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
+ *
+ * Usage:
+ * ```html
+ * <yuw-input [(value)]="username" placeholder="Enter username..." />
+ *
+ * <yuw-input formControlName="email" type="email">
+ *   <yuw-left-addon><ng-icon name="lucideMail" /></yuw-left-addon>
+ * </yuw-input>
+ * ```
+ */
+class YuwInputComponent extends YuwTextFieldBase {
+    constructor() {
+        super(...arguments);
+        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
+        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
+        this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
+        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.enterPressed = output();
+        this._autoId = `yuw-input-${++nextYuwInputId}`;
+        this._focusSelectors = ['input'];
+        this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
+        this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
+        this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
+    }
+    onChange() {
+        this.committed.emit(this.value());
+    }
+    onEnterPressed() {
+        this.enterPressed.emit();
+    }
+    onInput(event) {
+        this._commit(event.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, 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  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"inline-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <input\n        hlmInputGroupInput\n        [id]=\"_inputId()\"\n        [type]=\"type()\"\n        [attr.inputmode]=\"inputmode()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n        (keydown.enter)=\"onEnterPressed()\"\n      />\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <input\n      hlmInput\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", 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: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-input', imports: [
+                        HlmField,
+                        HlmFieldDescription,
+                        YuwFieldFeedbackDirective,
+                        HlmInput,
+                        HlmInputGroup,
+                        HlmInputGroupInput,
+                        HlmInputGroupAddon,
+                    ], providers: [provideValueAccessor(YuwInputComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"inline-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <input\n        hlmInputGroupInput\n        [id]=\"_inputId()\"\n        [type]=\"type()\"\n        [attr.inputmode]=\"inputmode()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n        (keydown.enter)=\"onEnterPressed()\"\n      />\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <input\n      hlmInput\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
+
+/**
+ * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
+ *
+ * Inputs:
+ * - `size`: Avatar size (`'default'`, `'sm'`, `'lg'`). Default is `'default'`.
+ * - `src`: Image URL for single-avatar mode. Omit to display fallback text.
+ * - `alt`: Required. Accessible label for single-avatar mode and fallback text. User-facing text —
+ *   the consuming app is responsible for providing (and translating) it.
+ * - `fallback`: Fallback text or initials shown when image is loading, unprovided, or fails to load.
+ * - `badge`: Renders a status badge marker on the bottom-right corner (single-avatar mode).
+ * - `group`: Array of item DTOs (`YuwAvatarGroupItemDto[]`) to render as an overlapping avatar group stack.
+ * - `groupCount`: Overflow label string (e.g. `"+5"`) displayed at the end of an avatar group stack.
+ * - `class`: Extra CSS classes merged onto the inner `hlm-avatar` element(s); merged last, so they win.
+ *
+ * Single Avatar Usage:
+ * ```html
+ * <yuw-avatar src="/path/to/user.png" alt="Jane Doe" fallback="JD" />
+ * <yuw-avatar alt="Jane Doe" fallback="JD" badge />
+ * ```
+ *
+ * Avatar Group Usage:
+ * ```html
+ * <yuw-avatar [group]="teamMembers" alt="Team" groupCount="+5" />
+ * ```
+ */
+class YuwAvatarComponent {
+    constructor() {
+        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.badge = input(false, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        this.group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.groupCount = input(undefined, ...(ngDevMode ? [{ debugName: "groupCount" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$4.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$4.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$4.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$4.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$4.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$4.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n" }]
+        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
+ *
+ * The helm trigger directive's selector only matches a native `button`, so composing the brain
+ * directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
+ * Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
+ * bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
+ * anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
+ * host has no rect for the overlay to position from.
+ *
+ * `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
+ */
+class YuwPopoverTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$5.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
+                    hostDirectives: [
+                        { directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
+                    ],
+                    host: { 'data-slot': 'popover-trigger' },
+                }]
+        }] });
+
+/**
+ * Popover component for displaying anchored floating overlay panels.
+ *
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
+ * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
+ * - `offsetX`: Pixel offset for X sides. Positive px for right, negative for left side.
+ * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
+ * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
+ *   over the library defaults via `twMerge`.
+ * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
+ *   `'neutral'`.
+ * - `triggerSize`: Button size for the trigger button.
+ * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
+ *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
+ * - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
+ *   variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
+ *
+ * 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.
+ *
+ * Usage:
+ * ```html
+ * <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
+ *   <ng-container yuwPopoverTrigger>View Notifications</ng-container>
+ *
+ *   <p>Popover content body goes here.</p>
+ * </yuw-popover>
+ * ```
+ */
+class YuwPopoverComponent {
+    constructor() {
+        this._trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "_trigger" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    }
+    onOpenChange(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$6.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$6.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$6.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$6.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$6.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$6.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
+        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
+ *
+ * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
+ * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
+ * so a trigger can override which edge the sheet appears from.
+ */
+class YuwSheetTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$7.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetTriggerButton]',
+                    hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+                    host: { 'data-slot': 'sheet-trigger' },
+                }]
+        }] });
+/** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
+class YuwSheetCloseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$7.BrnSheetClose }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetClose]',
+                    hostDirectives: [BrnSheetClose],
+                    host: { 'data-slot': 'sheet-close' },
+                }]
+        }] });
+
+/**
+ * Marks an element as the sheet's footer content, projected into the footer slot.
+ * Its presence is also what makes the footer render at all — without it the sheet
+ * shows no empty footer strip.
+ */
+class YuwSheetFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSheetFooter]',
+                }]
+        }] });
+
+const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
+/**
+ * Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
+ *
+ * Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
+ * is announced as an anonymous dialog by screen readers.
+ *
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
+ * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
+ * - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
+ *   text the consuming app is responsible for translating.
+ * - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
+ *   renders and screen readers read this label; when absent there is no close button. User-facing
+ *   text the consuming app is responsible for translating.
+ * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
+ *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
+ *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
+ *   the class has to be `data-[side=left]:w-64`, not `w-64`.
+ * - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
+ *   viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
+ *   the overlay too, and the helm's own class always wins the `class` input it exposes.
+ * - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
+ *   strategy; pass `'reposition'` for a panel that should leave the page scrollable.
+ * - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
+ *   modal; set `false` when content outside stays visible and usable, so the claim stays honest.
+ * - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
+ *   clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
+ *   `false` for a panel that must be dismissed deliberately.
+ * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerSize`: Button size for the trigger button.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
+ *   <ng-container yuwSheetTrigger>Edit Profile</ng-container>
+ *
+ *   <p>Sheet form content goes here.</p>
+ *
+ *   <div yuwSheetFooter>
+ *     <yuw-button (clicked)="save()">Save Changes</yuw-button>
+ *   </div>
+ * </yuw-sheet>
+ * ```
+ */
+class YuwSheetComponent {
+    constructor() {
+        this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        this.sheet = viewChild.required(HlmSheet);
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+        this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const overlayClass = this.overlayClass();
+            if (overlayClass === undefined)
+                return;
+            this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
+        });
+    }
+    onStateChanged(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$8.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$8.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$8.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$8.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$8.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$8.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$8.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
+
+/** Binary-step unit symbols, which are not user copy and so need no translation. */
+const UNITS = ['B', 'KB', 'MB', 'GB'];
+/**
+ * Formats a byte count the way file pickers show it: `512 B`, `1.5 KB`, `1 MB`.
+ *
+ * Uses 1024 steps, no more than one decimal, and stops at `GB`. The decimal mark is always `.`, so
+ * the output is locale-independent.
+ *
+ * @param bytes Size in bytes.
+ * @returns The size with the largest unit that keeps the number at or above 1.
+ */
+function formatFileSize(bytes) {
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < UNITS.length - 1) {
+        value /= 1024;
+        unit++;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldFeedbackDirective, isStandalone: true, selector: "hlm-field[yuwFieldFeedback]", inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_blurred.set(true)" } }, exportAs: ["yuwFieldFeedback"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'hlm-field[yuwFieldFeedback]',
-                    exportAs: 'yuwFieldFeedback',
-                    host: {
-                        '(focusout)': '_blurred.set(true)',
-                    },
-                }]
-        }], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
-function firstErrorMessage(errors) {
-    return Object.values(errors ?? {}).find((error) => typeof error?.message === 'string')?.message;
+    return `${Number.isInteger(value) ? value : value.toFixed(1)} ${UNITS[unit]}`;
 }
 
 /** Module-level counter backing each instance's stable fallback `id`. */
-let nextYuwInputId = 0;
+let nextYuwInputFileId = 0;
 /**
- * Single-line text input control supporting two-way value binding, form controls (`formControlName`, `ngModel`),
- * validation styling, and left/right addon slots.
+ * File picker with two layouts, supporting two-way binding, form controls (`formControlName`,
+ * `ngModel`), validation styling and helper/error text.
+ *
+ * `avatar` (default) shows a `yuw-avatar` with the chosen image — or `src` while nothing is chosen —
+ * beside an upload button, like a profile-photo field. `inline` is a full-width outline button with
+ * an upload icon; once a file is chosen, the button is replaced by a single line showing its name, size and a remove icon.
+ * With several files the line reads `countLabel(n)` and opens the list, one removable row each — in
+ * a popover from `md` up and a bottom sheet below it, like the list-toolbar filters.
+ *
+ * Removing never edits the value: the X emits `removed` with the `File` and the consumer decides
+ * (drop it from `value`, confirm first, call an API, …). The native picker always replaces the
+ * previous selection. Because the button is hidden while files are chosen, the consumer must
+ * clear `value` in `removed` for the picker to come back.
+ *
+ * The value is always an array of `File` — empty when nothing is chosen, one item when `multiple`
+ * is off. Writing `[]` (or `null`, e.g. `control.reset()`) clears the native picker too. Setting a
+ * non-empty value programmatically only updates `value`: browsers do not allow scripts to fill a
+ * file input, so the native control keeps showing its last user selection.
  *
  * Inputs / Models:
- * - `value`: Two-way text string.
- * - `inputId`: `id` applied to the native input, for external `<label for>` association.
- * - `type`: HTML input type (`'text'`, `'email'`, `'number'`, etc.). Default is `'text'`.
- * - `size`: Control height (`'default'` 40px, `'xs'` 28px, `'sm'` 36px, `'lg'` 44px), matching the
- *   `<yuw-button>` size of the same name. Default is `'default'`.
- * - `inputmode`: Virtual keyboard hint (e.g. `'numeric'`).
- * - `disabled`: Disables input interaction.
- * - `readonly`: Makes the field read-only.
+ * - `value`: Two-way `File[]` selection.
+ * - `variant`: `'avatar'` or `'inline'`. Default is `'avatar'`.
+ * - `uploadLabel`: Text of the upload button. User-facing text — the consuming app provides and
+ *   translates it; required, there is no default copy.
+ * - `removeLabel`: Accessible label of each remove icon (`inline` only). Required for `inline`.
+ * - `countLabel`: Builds the text of the multi-file box from the file count, e.g.
+ *   `(n) => \`${n} files selected\`` (`inline` with `multiple` only). Required for that case.
+ * - `alt`: Accessible label of the avatar image (`avatar` only), also the source of its fallback.
+ * - `fallback`: Initials shown when there is no image (`avatar` only).
+ * - `src`: Current image shown while no file is chosen (`avatar` only), e.g. the saved photo.
+ * - `accept`: Native `accept` filter (e.g. `'image/*,.pdf'`).
+ * - `multiple`: Allows choosing more than one file; the avatar previews the first. Default is `false`.
+ * - `size`: Height of the controls (`'default'`, `'xs'`, `'sm'`, `'lg'`), matching `<yuw-input>`.
+ *   Default is `'default'`.
+ * - `inputId`: `id` applied to the hidden native input.
+ * - `disabled`: Disables the picker and the remove icons.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on.
  * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
- * - `errorText`: Error shown under the field while it is in its error state (form validation or
- *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
- *   reactive forms); required when no such message exists.
+ * - `errorText`: Error shown under the field while it is in its error state. Overrides the `message`
+ *   carried by the bound control's validation errors.
  * - `name`: HTML `name` attribute.
- * - `autocomplete`: Native `autocomplete` attribute.
- * - `maxlength`: Hard cap on character count, enforced natively by the browser.
- * - `placeholder`: Hint text shown inside the empty field.
- * - `class`: Extra classes merged onto the visual root (the input, or the input group when addons are present).
+ * - `class`: Extra classes merged last onto the avatar (`avatar`) or the inline stack (`inline`).
  *
  * Outputs:
- * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * - `removed`: Emits the `File` whose remove icon was pressed (`inline` only).
  *
  * Usage:
  * ```html
- * <yuw-input [(value)]="username" placeholder="Enter username..." />
- *
- * <yuw-input formControlName="email" type="email">
- *   <yuw-left-addon><ng-icon name="lucideMail" /></yuw-left-addon>
- * </yuw-input>
+ * <yuw-input-file [(value)]="files" accept="image/*" [src]="family.imageUrl" [alt]="family.name"
+ *   [fallback]="initials" uploadLabel="Upload photo" />
+ * <yuw-input-file variant="inline" multiple [(value)]="files" uploadLabel="Upload files"
+ *   removeLabel="Remove" [countLabel]="countLabel" (removed)="files.set(files().filter((f) => f !== $event))" />
  * ```
  */
-class YuwInputComponent extends YuwTextFieldBase {
+class YuwInputFileComponent extends YuwValueAccessorBase {
     constructor() {
-        super(...arguments);
-        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
-        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
-        this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
-        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+        super();
+        this._native = viewChild('native', ...(ngDevMode ? [{ debugName: "_native" }] : /* istanbul ignore next */ []));
+        this.accept = input(undefined, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        this.alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.countLabel = input(undefined, ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.enterPressed = output();
-        this._autoId = `yuw-input-${++nextYuwInputId}`;
-        this._focusSelectors = ['input'];
-        this._classes = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
-        this._hasLeftAddon = computed(() => this._leftAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasLeftAddon" }] : /* istanbul ignore next */ []));
-        this._hasRightAddon = computed(() => this._rightAddons().length > 0, ...(ngDevMode ? [{ debugName: "_hasRightAddon" }] : /* istanbul ignore next */ []));
-        this._hasAddons = computed(() => this._hasLeftAddon() || this._hasRightAddon(), ...(ngDevMode ? [{ debugName: "_hasAddons" }] : /* istanbul ignore next */ []));
-    }
-    onChange() {
-        this.committed.emit(this.value());
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.uploadLabel = input(undefined, ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.variant = input('avatar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.removed = output();
+        this._autoId = `yuw-input-file-${++nextYuwInputFileId}`;
+        this._focusSelectors = ['button', 'input'];
+        this._isMobile = injectIsMobile();
+        this._listOpen = signal(false, ...(ngDevMode ? [{ debugName: "_listOpen" }] : /* istanbul ignore next */ []));
+        this._preview = signal(undefined, ...(ngDevMode ? [{ debugName: "_preview" }] : /* istanbul ignore next */ []));
+        this._avatarSrc = computed(() => this._preview() ?? this.src(), ...(ngDevMode ? [{ debugName: "_avatarSrc" }] : /* istanbul ignore next */ []));
+        this._boxClasses = computed(() => cn(yuwFieldSizeVariants({ size: this.size() }), 'flex min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent ps-2.5 pe-2 text-sm'), ...(ngDevMode ? [{ debugName: "_boxClasses" }] : /* istanbul ignore next */ []));
+        this._countText = computed(() => this.countLabel()?.(this.value().length), ...(ngDevMode ? [{ debugName: "_countText" }] : /* istanbul ignore next */ []));
+        this._entries = computed(() => this.value().map((file) => ({ file, size: formatFileSize(file.size) })), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
+        this._inlineClasses = computed(() => cn('flex min-w-0 flex-col gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_inlineClasses" }] : /* istanbul ignore next */ []));
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const native = this._native()?.nativeElement;
+            if (native && this.value().length === 0) {
+                native.value = '';
+            }
+        });
+        effect(() => {
+            if (this.value().length < 2 || this._isMobile()) {
+                this._listOpen.set(false);
+            }
+        });
+        effect((onCleanup) => {
+            const file = this.variant() === 'avatar' ? this.value()[0] : undefined;
+            if (!file) {
+                this._preview.set(undefined);
+                return;
+            }
+            const url = URL.createObjectURL(file);
+            this._preview.set(url);
+            onCleanup(() => URL.revokeObjectURL(url));
+        });
     }
-    onEnterPressed() {
-        this.enterPressed.emit();
+    _emptyValue() {
+        return [];
     }
-    onInput(event) {
-        this._commit(event.target.value);
+    onChange(event) {
+        this._commit(Array.from(event.target.files ?? []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, 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  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"inline-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <input\n        hlmInputGroupInput\n        [id]=\"_inputId()\"\n        [type]=\"type()\"\n        [attr.inputmode]=\"inputmode()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n        (keydown.enter)=\"onEnterPressed()\"\n      />\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <input\n      hlmInput\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", 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: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-input', imports: [
+            args: [{ selector: 'yuw-input-file', imports: [
+                        NgTemplateOutlet,
+                        NgIcon,
                         HlmField,
                         HlmFieldDescription,
                         YuwFieldFeedbackDirective,
                         HlmInput,
-                        HlmInputGroup,
-                        HlmInputGroupInput,
-                        HlmInputGroupAddon,
-                    ], providers: [provideValueAccessor(YuwInputComponent)], host: {
+                        YuwAvatarComponent,
+                        YuwButtonComponent,
+                        YuwPopoverComponent,
+                        YuwSheetComponent,
+                    ], providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  @if (_hasAddons()) {\n    <hlm-input-group [class]=\"_classes()\">\n      @if (_hasLeftAddon()) {\n        <hlm-input-group-addon align=\"inline-start\">\n          <ng-content select=\"yuw-left-addon\" />\n        </hlm-input-group-addon>\n      }\n\n      <input\n        hlmInputGroupInput\n        [id]=\"_inputId()\"\n        [type]=\"type()\"\n        [attr.inputmode]=\"inputmode()\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.placeholder]=\"placeholder()\"\n        (input)=\"onInput($event)\"\n        (change)=\"onChange()\"\n        (blur)=\"_onBlur()\"\n        (keydown.enter)=\"onEnterPressed()\"\n      />\n\n      @if (_hasRightAddon()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <ng-content select=\"yuw-right-addon\" />\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  } @else {\n    <input\n      hlmInput\n      [class]=\"_classes()\"\n      [id]=\"_inputId()\"\n      [type]=\"type()\"\n      [attr.inputmode]=\"inputmode()\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
-        }], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 let nextYuwTextareaId = 0;
 /**
@@ -1809,7 +2347,7 @@ class YuwSearchInputComponent extends YuwTextFieldBase {
         this.searched.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n    <hlm-input-group [class]=\"_classes()\">\n      <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n        @if (_showExpandButton()) {\n          <button\n            hlmInputGroupButton\n            size=\"icon-sm\"\n            [class]=\"_expandButtonClasses()\"\n            [attr.aria-label]=\"expandAriaLabel()\"\n            [attr.aria-expanded]=\"false\"\n            (focus)=\"onExpandFocus($event)\"\n            (click)=\"onExpand()\"\n          >\n            <ng-icon name=\"lucideSearch\" />\n          </button>\n        } @else {\n          <ng-icon name=\"lucideSearch\" />\n        }\n      </hlm-input-group-addon>\n\n      <input\n        #searchInput\n        hlmInputGroupInput\n        [class]=\"_fieldClasses()\"\n        [id]=\"_inputId()\"\n        type=\"text\"\n        inputmode=\"search\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        [attr.tabindex]=\"expanded() ? null : -1\"\n        [attr.aria-hidden]=\"expanded() ? null : true\"\n        (input)=\"onInput($event)\"\n        (keydown.enter)=\"onEnter()\"\n        (keydown.escape)=\"onEscape()\"\n        (blur)=\"onBlur()\"\n      />\n\n      @if (_showClear()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n            <ng-icon name=\"lucideX\" />\n          </button>\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  </div>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$4.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$4.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$4.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$4.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n    <hlm-input-group [class]=\"_classes()\">\n      <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n        @if (_showExpandButton()) {\n          <button\n            hlmInputGroupButton\n            size=\"icon-sm\"\n            [class]=\"_expandButtonClasses()\"\n            [attr.aria-label]=\"expandAriaLabel()\"\n            [attr.aria-expanded]=\"false\"\n            (focus)=\"onExpandFocus($event)\"\n            (click)=\"onExpand()\"\n          >\n            <ng-icon name=\"lucideSearch\" />\n          </button>\n        } @else {\n          <ng-icon name=\"lucideSearch\" />\n        }\n      </hlm-input-group-addon>\n\n      <input\n        #searchInput\n        hlmInputGroupInput\n        [class]=\"_fieldClasses()\"\n        [id]=\"_inputId()\"\n        type=\"text\"\n        inputmode=\"search\"\n        [value]=\"value()\"\n        [disabled]=\"_disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [forceInvalid]=\"feedback.forcedInvalid()\"\n        [attr.name]=\"name()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.placeholder]=\"placeholder()\"\n        [attr.tabindex]=\"expanded() ? null : -1\"\n        [attr.aria-hidden]=\"expanded() ? null : true\"\n        (input)=\"onInput($event)\"\n        (keydown.enter)=\"onEnter()\"\n        (keydown.escape)=\"onEscape()\"\n        (blur)=\"onBlur()\"\n      />\n\n      @if (_showClear()) {\n        <hlm-input-group-addon align=\"inline-end\">\n          <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n            <ng-icon name=\"lucideX\" />\n          </button>\n        </hlm-input-group-addon>\n      }\n    </hlm-input-group>\n  </div>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$9.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$9.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$9.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$9.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
@@ -1852,6 +2390,7 @@ let nextYuwPasswordInputId = 0;
  *
  * Outputs:
  * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
  *
  * Usage:
  * ```html
@@ -1886,7 +2425,7 @@ class YuwPasswordInputComponent extends YuwTextFieldBase {
         this.masked.update((masked) => !masked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"_reveal().inputType\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n\n    @if (revealAriaLabel(); as label) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button\n          hlmInputGroupButton\n          size=\"icon-xs\"\n          [disabled]=\"_disabled()\"\n          [attr.aria-label]=\"label\"\n          [attr.aria-pressed]=\"!_reveal().struck\"\n          (click)=\"onToggleReveal()\"\n        >\n          <ng-icon [name]=\"_reveal().icon\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$4.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$4.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$4.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$4.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <hlm-input-group [class]=\"_classes()\">\n    @if (_hasLeftAddon()) {\n      <hlm-input-group-addon align=\"inline-start\">\n        <ng-content select=\"yuw-left-addon\" />\n      </hlm-input-group-addon>\n    }\n\n    <input\n      hlmInputGroupInput\n      [id]=\"_inputId()\"\n      [type]=\"_reveal().inputType\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"feedback.forcedInvalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      (input)=\"onInput($event)\"\n      (change)=\"onChange()\"\n      (blur)=\"_onBlur()\"\n      (keydown.enter)=\"onEnterPressed()\"\n    />\n\n    @if (revealAriaLabel(); as label) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button\n          hlmInputGroupButton\n          size=\"icon-xs\"\n          [disabled]=\"_disabled()\"\n          [attr.aria-label]=\"label\"\n          [attr.aria-pressed]=\"!_reveal().struck\"\n          (click)=\"onToggleReveal()\"\n        >\n          <ng-icon [name]=\"_reveal().icon\" />\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$9.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$9.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$9.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$9.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
             type: Component,
@@ -1972,6 +2511,7 @@ let nextYuwInputOtpId = 0;
  *
  * Outputs:
  * - `completed`: Emits the full code string once the final slot is filled (by typing or paste).
+ * - `enterPressed`: Emits (`void`) when the Enter key is pressed while the field is focused.
  *
  * Usage:
  * ```html
@@ -2002,7 +2542,7 @@ class YuwInputOtpComponent extends YuwFieldBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <brn-input-otp\n    hlmInputOtp\n    [class]=\"_classes()\"\n    [inputId]=\"_inputId()\"\n    [length]=\"_length()\"\n    [value]=\"value()\"\n    [inputMode]=\"mode()\"\n    [disabled]=\"_disabled()\"\n    [autofocus]=\"autofocus()\"\n    [transformPaste]=\"transformPaste()\"\n    inputAutocomplete=\"one-time-code\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusout)=\"_onBlur()\"\n    (completed)=\"completed.emit($event)\"\n    (keydown.enter)=\"onEnterPressed()\"\n  >\n    @for (group of _groups(); track $index) {\n      @if (group.precededBySeparator) {\n        <hlm-input-otp-separator />\n      }\n\n      <hlm-input-otp-group>\n        @for (index of group.indices; track index) {\n          <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n        }\n      </hlm-input-otp-group>\n    }\n  </brn-input-otp>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$5.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$5.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$5.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$5.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", enterPressed: "enterPressed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <brn-input-otp\n    hlmInputOtp\n    [class]=\"_classes()\"\n    [inputId]=\"_inputId()\"\n    [length]=\"_length()\"\n    [value]=\"value()\"\n    [inputMode]=\"mode()\"\n    [disabled]=\"_disabled()\"\n    [autofocus]=\"autofocus()\"\n    [transformPaste]=\"transformPaste()\"\n    inputAutocomplete=\"one-time-code\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusout)=\"_onBlur()\"\n    (completed)=\"completed.emit($event)\"\n    (keydown.enter)=\"onEnterPressed()\"\n  >\n    @for (group of _groups(); track $index) {\n      @if (group.precededBySeparator) {\n        <hlm-input-otp-separator />\n      }\n\n      <hlm-input-otp-group>\n        @for (index of group.indices; track index) {\n          <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n        }\n      </hlm-input-otp-group>\n    }\n  </brn-input-otp>\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$a.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$a.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$a.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$a.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
             type: Component,
@@ -2043,6 +2583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /**
  * Class map for `yuw-checkbox`, layered on top of `HlmCheckbox`'s own classes.
  *
+ * `cursor-pointer` is unconditional too: `HlmCheckbox` ships `cursor-default`, a utility that beats
+ * the global base-layer pointer rule; its `disabled:cursor-not-allowed` still wins when disabled.
+ *
  * The base indeterminate treatment is unconditional — it's how *every* `yuw-checkbox` renders
  * that state, not a variant — so it lives in the cva base, while `primary` is an opt-in
  * boolean variant layered on top (the secondary color is the default).
@@ -2053,6 +2596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * to the DOM and leaving it to specificity.
  */
 const checkboxVariants = cva([
+    'cursor-pointer',
     'data-[state=indeterminate]:bg-primary',
     'dark:data-[state=indeterminate]:bg-primary',
     'data-[state=indeterminate]:text-primary-foreground',
@@ -2091,7 +2635,7 @@ const checkboxVariants = cva([
  * projected content, pair it with an external `<label [for]>` via `inputId` or set `ariaLabel`.
  *
  * Inputs / Models:
- * - `value` / `checked`: Two-way boolean state of the checkbox. Default is `false`.
+ * - `checked`: Two-way (`[(checked)]`) boolean checked state, alias of the internal `value` model. Default is `false`.
  * - `indeterminate`: Two-way boolean state for mixed/indeterminate checkbox appearance. Default is `false`.
  * - `disabled`: Disables checkbox interaction.
  * - `required`: Marks checkbox as required.
@@ -2216,6 +2760,8 @@ const yuwSwitchSecondaryClass = [
  * - `disabled`: Disables switch interaction.
  * - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
  * - `ariaLabel`: Accessible name for switches with no visible adjacent label.
+ * - `ariaLabelledby`: Id of the element that labels the switch, set as `aria-labelledby` on the control.
+ * - `ariaDescribedby`: Id of the element that describes the switch, set as `aria-describedby` on the control.
  *
  * Usage:
  * ```html
@@ -2244,7 +2790,7 @@ class YuwSwitchComponent extends YuwValueAccessorBase {
         this._commit(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$6.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSwitchComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"_helmSize()\"\n    [class]=\"_switchClass()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content />\n</label>\n", dependencies: [{ kind: "component", type: i1$b.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSwitchComponent, decorators: [{
             type: Component,
@@ -2308,7 +2854,7 @@ class YuwRadioGroupComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$7.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$7.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$7.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator />\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$c.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$c.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$c.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
             type: Component,
@@ -2330,7 +2876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwSkeletonDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSkeletonDirective, isStandalone: true, selector: "[yuwSkeleton]", host: { attributes: { "aria-hidden": "true" } }, hostDirectives: [{ directive: i1$8.HlmSkeleton }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSkeletonDirective, isStandalone: true, selector: "[yuwSkeleton]", host: { attributes: { "aria-hidden": "true" } }, hostDirectives: [{ directive: i1$d.HlmSkeleton }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSkeletonDirective, decorators: [{
             type: Directive,
@@ -2348,6 +2894,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `skeletonCount` placeholders shaped by `skeletonClass`; `empty` shows `emptyText`; `columnsClass`
  * holds the Tailwind column utilities.
  *
+ * Inputs:
+ * - `columnsClass`: Tailwind grid column utilities applied to the grid and its skeleton. Default is `'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'`.
+ * - `empty`: Shows `emptyText` instead of the projected cards. Default is `false`.
+ * - `emptyText`: Required message shown when `empty` is set. The app supplies and translates it.
+ * - `loading`: Shows `skeletonCount` placeholders instead of the content; takes precedence over `empty`. Default is `false`.
+ * - `skeletonClass`: Extra classes sizing each placeholder, e.g. its height. Default is `'h-16'`.
+ * - `skeletonCount`: Number of placeholders shown while loading. Default is `12`.
+ *
  * `YuwCardGridComponent.COLUMNS` holds the column classes admin lists share per view mode — `list`
  * is one column, `block` grows from one to five, and `tags` packs small tag cards up to six — so every listing lays out its cards the same
  * way: `[columnsClass]="YuwCardGridComponent.COLUMNS[mode]"`.
@@ -2375,7 +2929,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ selector: 'yuw-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwSkeletonDirective], template: "@if (loading()) {\n  <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n    @for (skeleton of skeletons(); track skeleton) {\n      <span yuwSkeleton class=\"block w-full rounded-xl\" [class]=\"skeletonClass()\"></span>\n    }\n  </div>\n} @else if (empty()) {\n  <p class=\"text-sm text-muted-foreground\">{{ emptyText() }}</p>\n} @else {\n  <div class=\"grid gap-4\" [class]=\"columnsClass()\">\n    <ng-content />\n  </div>\n}\n" }]
         }], propDecorators: { columnsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsClass", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonClass", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }] } });
 
-/** While `pending` the card stays hidden in place under a skeleton, so the grid does not jump. */
+/**
+ * While `pending` the card stays hidden in place under a skeleton, so the grid does not jump.
+ *
+ * Inputs:
+ * - `pending`: Hides the projected card and overlays a skeleton while it is loading. Default is `false`.
+ */
 class YuwCardGridItemComponent {
     constructor() {
         this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2406,7 +2965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwCardDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDirective, isStandalone: true, selector: "[yuwCard]", hostDirectives: [{ directive: i1$9.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDirective, isStandalone: true, selector: "[yuwCard]", hostDirectives: [{ directive: i1$e.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDirective, decorators: [{
             type: Directive,
@@ -2418,7 +2977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header container directive for a card. */
 class YuwCardHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardHeaderDirective, isStandalone: true, selector: "[yuwCardHeader]", hostDirectives: [{ directive: i1$9.HlmCardHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardHeaderDirective, isStandalone: true, selector: "[yuwCardHeader]", hostDirectives: [{ directive: i1$e.HlmCardHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardHeaderDirective, decorators: [{
             type: Directive,
@@ -2430,7 +2989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Heading directive for card title text. */
 class YuwCardTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardTitleDirective, isStandalone: true, selector: "[yuwCardTitle]", hostDirectives: [{ directive: i1$9.HlmCardTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardTitleDirective, isStandalone: true, selector: "[yuwCardTitle]", hostDirectives: [{ directive: i1$e.HlmCardTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardTitleDirective, decorators: [{
             type: Directive,
@@ -2442,7 +3001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Subtitle or description directive for card text. */
 class YuwCardDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDescriptionDirective, isStandalone: true, selector: "[yuwCardDescription]", hostDirectives: [{ directive: i1$9.HlmCardDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardDescriptionDirective, isStandalone: true, selector: "[yuwCardDescription]", hostDirectives: [{ directive: i1$e.HlmCardDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardDescriptionDirective, decorators: [{
             type: Directive,
@@ -2454,7 +3013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header action directive for placing top-right controls (e.g. menu button or status badge). */
 class YuwCardActionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardActionDirective, isStandalone: true, selector: "[yuwCardAction]", hostDirectives: [{ directive: i1$9.HlmCardAction }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardActionDirective, isStandalone: true, selector: "[yuwCardAction]", hostDirectives: [{ directive: i1$e.HlmCardAction }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardActionDirective, decorators: [{
             type: Directive,
@@ -2466,7 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Main body container directive for card content. */
 class YuwCardContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardContentDirective, isStandalone: true, selector: "[yuwCardContent]", hostDirectives: [{ directive: i1$9.HlmCardContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardContentDirective, isStandalone: true, selector: "[yuwCardContent]", hostDirectives: [{ directive: i1$e.HlmCardContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardContentDirective, decorators: [{
             type: Directive,
@@ -2478,7 +3037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Footer container directive for card action buttons or summary info. */
 class YuwCardFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardFooterDirective, isStandalone: true, selector: "[yuwCardFooter]", hostDirectives: [{ directive: i1$9.HlmCardFooter }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCardFooterDirective, isStandalone: true, selector: "[yuwCardFooter]", hostDirectives: [{ directive: i1$e.HlmCardFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCardFooterDirective, decorators: [{
             type: Directive,
@@ -2519,7 +3078,7 @@ const YuwCardImports = [
  */
 class YuwEmptyDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDirective, isStandalone: true, selector: "[yuwEmpty]", hostDirectives: [{ directive: i1$a.HlmEmpty }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDirective, isStandalone: true, selector: "[yuwEmpty]", hostDirectives: [{ directive: i1$f.HlmEmpty }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDirective, decorators: [{
             type: Directive,
@@ -2531,7 +3090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Header container directive for empty-state title and media. */
 class YuwEmptyHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyHeaderDirective, isStandalone: true, selector: "[yuwEmptyHeader]", hostDirectives: [{ directive: i1$a.HlmEmptyHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyHeaderDirective, isStandalone: true, selector: "[yuwEmptyHeader]", hostDirectives: [{ directive: i1$f.HlmEmptyHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyHeaderDirective, decorators: [{
             type: Directive,
@@ -2543,7 +3102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Slot directive for empty-state icons or illustrations. Supports `variant` input. */
 class YuwEmptyMediaDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyMediaDirective, isStandalone: true, selector: "[yuwEmptyMedia]", hostDirectives: [{ directive: i1$a.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyMediaDirective, isStandalone: true, selector: "[yuwEmptyMedia]", hostDirectives: [{ directive: i1$f.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyMediaDirective, decorators: [{
             type: Directive,
@@ -2555,7 +3114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Title heading directive for empty state message. */
 class YuwEmptyTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyTitleDirective, isStandalone: true, selector: "[yuwEmptyTitle]", hostDirectives: [{ directive: i1$a.HlmEmptyTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyTitleDirective, isStandalone: true, selector: "[yuwEmptyTitle]", hostDirectives: [{ directive: i1$f.HlmEmptyTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyTitleDirective, decorators: [{
             type: Directive,
@@ -2567,7 +3126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Description paragraph directive explaining the empty state. */
 class YuwEmptyDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDescriptionDirective, isStandalone: true, selector: "[yuwEmptyDescription]", hostDirectives: [{ directive: i1$a.HlmEmptyDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyDescriptionDirective, isStandalone: true, selector: "[yuwEmptyDescription]", hostDirectives: [{ directive: i1$f.HlmEmptyDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyDescriptionDirective, decorators: [{
             type: Directive,
@@ -2579,7 +3138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Content slot directive for action buttons or call-to-action controls in an empty state. */
 class YuwEmptyContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyContentDirective, isStandalone: true, selector: "[yuwEmptyContent]", hostDirectives: [{ directive: i1$a.HlmEmptyContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwEmptyContentDirective, isStandalone: true, selector: "[yuwEmptyContent]", hostDirectives: [{ directive: i1$f.HlmEmptyContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwEmptyContentDirective, decorators: [{
             type: Directive,
@@ -2700,6 +3259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </div>
  * </ng-template>
  * ```
+ *
+ * Inputs:
+ * - `yuwContextMenuTrigger`: Required `TemplateRef` of the menu to open on right-click.
+ * - `yuwContextMenuTriggerData`: Optional data made available to the menu template as its context. Default is `undefined`.
  */
 class YuwContextMenuTriggerDirective {
     constructor() {
@@ -2714,7 +3277,7 @@ class YuwContextMenuTriggerDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwContextMenuTriggerDirective, isStandalone: true, selector: "[yuwContextMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "yuwContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "yuwContextMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, hostDirectives: [{ directive: i1$b.HlmContextMenuTrigger, inputs: ["disabled", "disabled", "align", "align", "side", "side"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwContextMenuTriggerDirective, isStandalone: true, selector: "[yuwContextMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "yuwContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, menuData: { classPropertyName: "menuData", publicName: "yuwContextMenuTriggerData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, hostDirectives: [{ directive: i1$g.HlmContextMenuTrigger, inputs: ["disabled", "disabled", "align", "align", "side", "side"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwContextMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -2770,6 +3333,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   <yuw-context-menu-checkbox-indicator />
  * </button>
  * ```
+ *
+ * Inputs:
+ * - `checked`: Whether the item is currently checked, which shows the projected indicator. Default is `false`.
+ * - `disabled`: Disables the item so it cannot be triggered. Default is `false`.
  */
 class YuwContextMenuCheckboxDirective {
     constructor() {
@@ -2809,6 +3376,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   </button>
  * </div>
  * ```
+ *
+ * Inputs:
+ * - `checked`: Whether the item is the selected option, which shows the projected indicator. Default is `false`.
+ * - `disabled`: Disables the item so it cannot be selected. Default is `false`.
  */
 class YuwContextMenuRadioDirective {
     constructor() {
@@ -2901,6 +3472,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   <yuw-context-menu-sub-indicator />
  * </button>
  * ```
+ *
+ * Inputs:
+ * - `yuwContextMenuSubTrigger`: Required `TemplateRef` of the sub-menu this item expands.
  */
 class YuwContextMenuSubTriggerDirective {
     constructor() {
@@ -2957,6 +3531,7 @@ let nextUniqueId = 0;
  * - `align`: Popover alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'start'`.
  * - `buttonId`: HTML `id` for the trigger button, enabling external `<label for="...">`
  *   association. When omitted, a unique per-instance id is generated.
+ * - `size`: Trigger button height (`YuwFieldSizeDto`), matching the `<yuw-button>` size of the same name. Default is `'default'`.
  * - `class`: Extra classes merged onto the trigger button (e.g. a width), consumer classes win.
  * - `invalid`: Forces invalid styling.
  * - `formatDate`: Custom date formatter function `(date: Date) => string` for the trigger label.
@@ -3034,7 +3609,7 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$c.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$c.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$c.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$h.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$h.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$h.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
@@ -3062,7 +3637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwTableContainerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableContainerDirective, isStandalone: true, selector: "[yuwTableContainer]", hostDirectives: [{ directive: i1$d.HlmTableContainer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableContainerDirective, isStandalone: true, selector: "[yuwTableContainer]", hostDirectives: [{ directive: i1$i.HlmTableContainer }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableContainerDirective, decorators: [{
             type: Directive,
@@ -3074,7 +3649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table element styling directive applied to native `<table>`. */
 class YuwTableDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableDirective, isStandalone: true, selector: "[yuwTable]", hostDirectives: [{ directive: i1$d.HlmTable }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTableDirective, isStandalone: true, selector: "[yuwTable]", hostDirectives: [{ directive: i1$i.HlmTable }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTableDirective, decorators: [{
             type: Directive,
@@ -3086,7 +3661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table header container directive applied to native `<thead>`. */
 class YuwTHeadDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTHeadDirective, isStandalone: true, selector: "[yuwTHead]", hostDirectives: [{ directive: i1$d.HlmTHead }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTHeadDirective, isStandalone: true, selector: "[yuwTHead]", hostDirectives: [{ directive: i1$i.HlmTHead }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTHeadDirective, decorators: [{
             type: Directive,
@@ -3098,7 +3673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table body container directive applied to native `<tbody>`. */
 class YuwTBodyDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTBodyDirective, isStandalone: true, selector: "[yuwTBody]", hostDirectives: [{ directive: i1$d.HlmTBody }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTBodyDirective, isStandalone: true, selector: "[yuwTBody]", hostDirectives: [{ directive: i1$i.HlmTBody }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTBodyDirective, decorators: [{
             type: Directive,
@@ -3110,7 +3685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table footer container directive applied to native `<tfoot>`. */
 class YuwTFootDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTFootDirective, isStandalone: true, selector: "[yuwTFoot]", hostDirectives: [{ directive: i1$d.HlmTFoot }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTFootDirective, isStandalone: true, selector: "[yuwTFoot]", hostDirectives: [{ directive: i1$i.HlmTFoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTFootDirective, decorators: [{
             type: Directive,
@@ -3122,7 +3697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table row directive applied to native `<tr>`. */
 class YuwTrDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTrDirective, isStandalone: true, selector: "[yuwTr]", hostDirectives: [{ directive: i1$d.HlmTr }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTrDirective, isStandalone: true, selector: "[yuwTr]", hostDirectives: [{ directive: i1$i.HlmTr }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTrDirective, decorators: [{
             type: Directive,
@@ -3134,7 +3709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table header cell directive applied to native `<th>`. */
 class YuwThDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwThDirective, isStandalone: true, selector: "[yuwTh]", hostDirectives: [{ directive: i1$d.HlmTh }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwThDirective, isStandalone: true, selector: "[yuwTh]", hostDirectives: [{ directive: i1$i.HlmTh }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwThDirective, decorators: [{
             type: Directive,
@@ -3146,146 +3721,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /** Table data cell directive applied to native `<td>`. */
 class YuwTdDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTdDirective, isStandalone: true, selector: "[yuwTd]", hostDirectives: [{ directive: i1$d.HlmTd }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwTdDirective, isStandalone: true, selector: "[yuwTd]", hostDirectives: [{ directive: i1$i.HlmTd }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTdDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[yuwTd]',
-                    hostDirectives: [HlmTd],
-                }]
-        }] });
-/** Table caption directive applied to native `<caption>`. */
-class YuwCaptionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCaptionDirective, isStandalone: true, selector: "[yuwCaption]", hostDirectives: [{ directive: i1$d.HlmCaption }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwCaption]',
-                    hostDirectives: [HlmCaption],
-                }]
-        }] });
-/** Table custom pagination div content. */
-class YuwDatatablePaginationDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatablePaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDatatablePaginationDirective, isStandalone: true, selector: "[yuwDatatablePagination]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatablePaginationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwDatatablePagination]',
-                }]
-        }] });
-/** Every table part, for a consumer's `imports`. */
-const YuwTableImports = [
-    YuwTableContainerDirective,
-    YuwTableDirective,
-    YuwTHeadDirective,
-    YuwTBodyDirective,
-    YuwTFootDirective,
-    YuwTrDirective,
-    YuwThDirective,
-    YuwTdDirective,
-    YuwCaptionDirective,
-    YuwDatatablePaginationDirective,
-];
-
-/**
- * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
- *
- * The helm trigger directive's selector only matches a native `button`, so composing the brain
- * directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
- * Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
- * bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
- * anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
- * host has no rect for the overlay to position from.
- *
- * `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
- */
-class YuwPopoverTriggerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$e.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
-                    hostDirectives: [
-                        { directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
-                    ],
-                    host: { 'data-slot': 'popover-trigger' },
-                }]
-        }] });
-
-/**
- * Popover component for displaying anchored floating overlay panels.
- *
- * Inputs / Models:
- * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
- * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
- * - `align`: Panel alignment relative to trigger (`'start'`, `'center'`, `'end'`). Default is `'center'`.
- * - `sideOffset`: Pixel offset between the trigger and the panel. Default is `4`.
- * - `sideOffset`: Pixel offset for X sides. Positive px for right, negative for left side.
- * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
- * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
- * - `panelClass`: Extra classes merged onto the popover panel (e.g. `w-80` to widen it). They win
- *   over the library defaults via `twMerge`.
- * - `triggerVariant`: Button style variant for the trigger button.
- * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
- *   `'neutral'`.
- * - `triggerSize`: Button size for the trigger button.
- * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
- *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
- * - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
- *   variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
- *
- * 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.
- *
- * Usage:
- * ```html
- * <yuw-popover [(open)]="isOpen" title="Notifications" description="You're all caught up.">
- *   <ng-container yuwPopoverTrigger>View Notifications</ng-container>
- *
- *   <p>Popover content body goes here.</p>
- * </yuw-popover>
- * ```
- */
-class YuwPopoverComponent {
-    constructor() {
-        this._trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "_trigger" } : /* istanbul ignore next */ {}), read: ElementRef });
-        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        this.offsetX = input(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
-        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
-        this.triggerColor = input('neutral', ...(ngDevMode ? [{ debugName: "triggerColor" }] : /* istanbul ignore next */ []));
-        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
-        this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
-        this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    }
-    onOpenChange(state) {
-        this.open.set(state === 'open');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$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 }); }
+                    selector: '[yuwTd]',
+                    hostDirectives: [HlmTd],
+                }]
+        }] });
+/** Table caption directive applied to native `<caption>`. */
+class YuwCaptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwCaptionDirective, isStandalone: true, selector: "[yuwCaption]", hostDirectives: [{ directive: i1$i.HlmCaption }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
-        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwCaptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCaption]',
+                    hostDirectives: [HlmCaption],
+                }]
+        }] });
+/** Table custom pagination div content. */
+class YuwDatatablePaginationDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatablePaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwDatatablePaginationDirective, isStandalone: true, selector: "[yuwDatatablePagination]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatablePaginationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwDatatablePagination]',
+                }]
+        }] });
+/** Every table part, for a consumer's `imports`. */
+const YuwTableImports = [
+    YuwTableContainerDirective,
+    YuwTableDirective,
+    YuwTHeadDirective,
+    YuwTBodyDirective,
+    YuwTFootDirective,
+    YuwTrDirective,
+    YuwThDirective,
+    YuwTdDirective,
+    YuwCaptionDirective,
+    YuwDatatablePaginationDirective,
+];
 
 const VIEW_MODES = ['list', 'block'];
 /**
@@ -3308,6 +3788,20 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * A set `viewMode` adds the list/block switch. The selected entry drops its border so both entries
  * keep the same height, and the entry after it takes back the leading border the group strips, so the
  * seam stays drawn. Consumers get that for free and bind only `viewMode`.
+ *
+ * Inputs:
+ * - `hiddenColumns`: Two-way (`[(hiddenColumns)]`) ids of the columns currently hidden. Default is `[]`.
+ * - `hideableColumns`: Options of the columns the user may hide; the columns button renders only when set.
+ * - `isMobile`: Required flag; below `md` the search collapses into a popover.
+ * - `labels`: Required `YuwListToolbarLabels` with the consumer's text for the controls.
+ * - `search`: Two-way (`[(search)]`) text of the search field, shared by the inline and popover fields. Default is `''`.
+ * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
+ * - `showExport`: Renders the export button. Default is `false`.
+ * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ *
+ * Outputs:
+ * - `exported`: Emits the `MouseEvent` of the export button click.
+ * - `searched`: Emits the current search text on every keystroke and when it is cleared.
  */
 class YuwListToolbarActionsComponent {
     constructor() {
@@ -3388,142 +3882,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
- * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
- *
- * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
- * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
- * so a trigger can override which edge the sheet appears from.
- */
-class YuwSheetTriggerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$g.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'yuw-button[yuwSheetTriggerButton]',
-                    hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
-                    host: { 'data-slot': 'sheet-trigger' },
-                }]
-        }] });
-/** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
-class YuwSheetCloseDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$g.BrnSheetClose }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'yuw-button[yuwSheetClose]',
-                    hostDirectives: [BrnSheetClose],
-                    host: { 'data-slot': 'sheet-close' },
-                }]
-        }] });
-
-/**
- * Marks an element as the sheet's footer content, projected into the footer slot.
- * Its presence is also what makes the footer render at all — without it the sheet
- * shows no empty footer strip.
- */
-class YuwSheetFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwSheetFooter]',
-                }]
-        }] });
-
-const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
-/**
- * Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
- *
- * Accessibility: provide either `title` or `ariaLabel` — a modal panel without an accessible name
- * is announced as an anonymous dialog by screen readers.
- *
- * Inputs / Models:
- * - `open`: Two-way open/closed state (`boolean`). Drive directly via `[(open)]` to open/close programmatically.
- * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
- * - `side`: Edge of the screen the panel slides in from (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'right'`.
- * - `title`: Optional header title text. User-facing text the consuming app is responsible for translating.
- * - `description`: Optional header description text. User-facing text the consuming app is responsible for translating.
- * - `ariaLabel`: Accessible name for the sheet when no visible `title` is rendered. User-facing
- *   text the consuming app is responsible for translating.
- * - `closeLabel`: Accessible label of the corner close (×) button. When set, the close button
- *   renders and screen readers read this label; when absent there is no close button. User-facing
- *   text the consuming app is responsible for translating.
- * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
- *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
- *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
- *   the class has to be `data-[side=left]:w-64`, not `w-64`.
- * - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
- *   viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
- *   the overlay too, and the helm's own class always wins the `class` input it exposes.
- * - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
- *   strategy; pass `'reposition'` for a panel that should leave the page scrollable.
- * - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
- *   modal; set `false` when content outside stays visible and usable, so the claim stays honest.
- * - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it, backdrop
- *   clicks included. Default is `true`, matching the brain from `@spartan-ng/brain` 1.3.4 on; pass
- *   `false` for a panel that must be dismissed deliberately.
- * - `triggerVariant`: Button style variant for the trigger button.
- * - `triggerSize`: Button size for the trigger button.
+ * Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
+ * entry it belongs to; the template is exposed through `templateRef` for the host to render.
  *
- * Usage:
- * ```html
- * <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
- *   <ng-container yuwSheetTrigger>Edit Profile</ng-container>
- *
- *   <p>Sheet form content goes here.</p>
- *
- *   <div yuwSheetFooter>
- *     <yuw-button (clicked)="save()">Save Changes</yuw-button>
- *   </div>
- * </yuw-sheet>
- * ```
+ * Inputs:
+ * - `yuwTabContent`: Required string; id of the tab entry this template is the content of.
  */
-class YuwSheetComponent {
-    constructor() {
-        this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
-        this.sheet = viewChild.required(HlmSheet);
-        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-        this.closeOnOutsidePointerEvents = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-        this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
-        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
-        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
-        this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const overlayClass = this.overlayClass();
-            if (overlayClass === undefined)
-                return;
-            this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
-        });
-    }
-    onStateChanged(state) {
-        this.open.set(state === 'open');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$h.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$h.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$h.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$h.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$h.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$h.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$h.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
-        }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
-const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
-
 class YuwTabContentDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -3547,6 +3911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * ```html
  * <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
  * ```
+ *
+ * Inputs:
+ * - `yuwTabPanel`: Required string; id of the tab, matching an entry in the `tabs` input, that this panel renders for.
  */
 class YuwTabPanelDirective {
     constructor() {
@@ -3607,6 +3974,7 @@ const yuwTabsSizeVariants = cva('', {
  * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
  * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
  *   `'manual'` requires Enter/Space). Default is `'automatic'`.
+ * - `class`: Extra classes merged onto the tab list, last, so they win over the component's own classes.
  *
  * Usage:
  * ```html
@@ -3643,7 +4011,7 @@ class YuwTabsComponent {
         this.activeTab.set(tabId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$i.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$i.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$i.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$i.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$i.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$j.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$j.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$j.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$j.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$j.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
             type: Component,
@@ -3746,6 +4114,17 @@ function filterSetFormTitle(mode, labels) {
  * 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`.
+ *
+ * Inputs:
+ * - `labels`: Required `YuwFilterSetLabels` with the consumer's text for the titles, the field, the delete message and the buttons.
+ * - `mode`: Required `'save'`, `'rename'` or `'delete'`; picks the heading and whether the name field or the delete message shows.
+ * - `name`: Name the field is seeded with, and the name of the set being deleted. Default is `''`.
+ * - `titleHidden`: Drops the heading when the host already shows it. Default is `false`.
+ *
+ * Outputs:
+ * - `cancelled`: Emits when the user backs out of the form without confirming.
+ * - `confirmed`: Emits the trimmed name, or the opening name when deleting.
+ * - `deleteRequested`: Emits when the delete shortcut of the rename mode is pressed.
  */
 class YuwListToolbarFilterSetFormComponent {
     constructor() {
@@ -3791,6 +4170,22 @@ const STRETCHED_CELL = 'min-w-0 flex-1 [&>yuw-button]:flex [&>yuw-button]:w-full
  * option emits `picked` and the host applies it. `titleHidden` drops the heading when the host
  * already shows it. `stretchActions` makes edit and delete share the row 50/50 with no gap; without
  * it they keep their natural width. Button texts are consumer data, so they are cropped, not wrapped.
+ *
+ * Inputs:
+ * - `canEdit`: Offers the edit and delete actions for the set matching the applied selection. Default is `false`.
+ * - `canSave`: Offers the action that saves the applied selection as a new set. Default is `false`.
+ * - `labels`: Required `YuwFilterSetLabels` with the consumer's text for the select and the actions.
+ * - `selectedId`: Id of the set shown as selected; `NO_FILTER_SET` means none. Default is `NO_FILTER_SET`.
+ * - `sets`: Required saved sets listed in the select.
+ * - `stretchActions`: Makes the edit and delete buttons share the row 50/50 with no gap. Default is `false`.
+ * - `titleHidden`: Drops the heading when the host already shows it. Default is `false`.
+ *
+ * Outputs:
+ * - `deleteRequested`: Emits when the delete action is pressed.
+ * - `editRequested`: Emits when the edit action is pressed.
+ * - `itemEditRequested`: Emits the id of the set whose three-dots button was pressed.
+ * - `picked`: Emits the id of the chosen option, or `NO_FILTER_SET` for none.
+ * - `saveRequested`: Emits when the save action is pressed.
  */
 class YuwListToolbarFilterSetsComponent {
     constructor() {
@@ -3856,6 +4251,15 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  * opened from a button, not when it closes, so it does not flash back while closing. A change of
  * layout closes the panel, since a popover opened from a sheet has no anchor to position against.
  * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
+ *
+ * Inputs:
+ * - `disabled`: Disables every button of the group. Default is `false`.
+ * - `groups`: Required filter groups the editor offers, one pane or tab each.
+ * - `idleColor`: Required tone of the buttons while no filter is applied.
+ * - `isMobile`: Required flag; true opens the panel as a bottom sheet, false as a popover.
+ * - `labels`: Required `YuwListToolbarFilterLabels` with the consumer's text for the panel and its buttons.
+ * - `selection`: Two-way (`[(selection)]`) applied filter selection. Default is `{}`.
+ * - `sets`: Saved filter sets; the sets star renders only when given together with `labels.sets`.
  */
 class YuwListToolbarFiltersComponent {
     constructor() {
@@ -4041,6 +4445,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * two-way to it (`viewModeChange` is the click listener); its names come from `labels.viewMode`. Saved filter sets need `filterSets` and `labels.filters.sets`;
  * the toolbar emits `setSaved`, `setRenamed` and `setDeleted` and the consumer persists them. `labels` holds every text and the consumer translates it;
  * `idleColor` is the filter trigger tone while nothing is applied.
+ *
+ * Inputs:
+ * - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
+ * - `filterSets`: Saved filter sets; together with `labels.filters.sets` it enables the sets star.
+ * - `filtersDisabled`: Disables the filter buttons. Default is `false`.
+ * - `hiddenColumns`: Two-way (`[(hiddenColumns)]`) ids of the columns currently hidden. Default is `[]`.
+ * - `hideableColumns`: Options of the columns the user may hide; the columns button renders only when set.
+ * - `idleColor`: `YuwColorDto` tone of the filter trigger while nothing is applied. Default is `'neutral'`.
+ * - `labels`: Required `YuwListToolbarLabels` with the consumer's translated text for every control.
+ * - `search`: Two-way (`[(search)]`) text of the search field. Default is `''`.
+ * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
+ * - `selection`: Two-way (`[(selection)]`) applied filter selection, values keyed by group id. Default is `{}`.
+ * - `showExport`: Renders the export button. Default is `false`.
+ * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ *
+ * Outputs:
+ * - `exported`: Emits the `MouseEvent` of the export button click.
+ * - `searched`: Emits the current search text on every keystroke and when it is cleared.
  */
 class YuwListToolbarComponent {
     constructor() {
@@ -4306,7 +4728,6 @@ class YuwDatatableComponent {
         this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sortable = input(false, { ...(ngDevMode ? { debugName: "sortable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
-        this.summary = input(false, { ...(ngDevMode ? { debugName: "summary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
         this.totalItems = input(undefined, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
         this.rowClicked = output();
@@ -4419,20 +4840,30 @@ class YuwDatatableComponent {
         this.rowClicked.emit(row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", pagination: "paginationChange", rowSelection: "rowSelectionChange", sorting: "sortingChange", rowClicked: "rowClicked", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], queries: [{ propertyName: "customPagination", first: true, predicate: YuwDatatablePaginationDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"neutral\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["ariaLabel", "color", "ellipsisSrText", "nextLabel", "page", "previousLabel", "size", "totalPages"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { 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: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", pagination: "paginationChange", rowSelection: "rowSelectionChange", sorting: "sortingChange", rowClicked: "rowClicked", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], queries: [{ propertyName: "customPagination", first: true, predicate: YuwDatatablePaginationDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"neutral\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["ariaLabel", "color", "ellipsisSrText", "nextLabel", "page", "previousLabel", "size", "totalPages"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { 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: YuwDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            @let headerClasses = _cellClasses().get(header.column.id);\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"headerClasses?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClasses().get(row.id)\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onRowClick(row.original)\"\n            (keydown)=\"onRowKeydown($event, row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center flex-wrap justify-end gap-4 py-3 px-1 max-lg:justify-center\">\n    @if (customPagination()) {\n      <ng-content select=\"[yuwDatatablePagination]\" />\n    }\n    <yuw-pagination\n      [page]=\"currentPage()\"\n      (pageChange)=\"onPageChange($event)\"\n      [totalPages]=\"table.getPageCount() || 1\"\n      [previousLabel]=\"previousPageLabel()\"\n      [nextLabel]=\"nextPageLabel()\"\n      [ellipsisSrText]=\"paginationEllipsisSrText()\"\n      [ariaLabel]=\"paginationAriaLabel()\"\n      color=\"neutral\"\n      size=\"icon-sm\"\n      class=\"flex\"\n    />\n  </div>\n}\n" }]
-        }], propDecorators: { customPagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDatatablePaginationDirective), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], cellClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClass", required: false }] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+        }], propDecorators: { customPagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDatatablePaginationDirective), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], cellClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClass", required: false }] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
 
 /**
  * Selection checkbox for a datatable cell or header. The host stops the click so neither the
  * checkbox nor the cell around it triggers the row's own action, since `yuw-datatable` emits
  * `rowClicked` from the `<tr>`. `onToggle` is an input because `flexRenderComponent` does not
  * subscribe outputs.
+ *
+ * Renders a single `yuw-checkbox` meant to be used as the `select` display column of `yuw-datatable`
+ * (header for select-all, cell for a single row), wired to TanStack's toggle handlers.
+ *
+ * Inputs:
+ * - `checked`: Whether the checkbox is checked. Default is `false`.
+ * - `indeterminate`: Shows the mixed state, e.g. for a header when only some rows are selected. Default is `false`.
+ * - `label`: Accessible name (`aria-label`) of the checkbox. Default is `'Select row'`; consuming apps should
+ *   override it with translated text.
+ * - `onToggle`: Callback run when the checkbox changes. Default is a no-op.
  */
 class YuwDatatableRowSelect {
     constructor() {
@@ -4459,6 +4890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Pencil button cell that runs `onEdit`, hidden until its row is hovered or keyboard-focused (`yuw-reveal`,
  * see `theme/components/reveal-on-hover.css`); touch devices keep it visible. An input because `flexRenderComponent` does not subscribe
  * outputs. The host stops the click so a clickable row does not fire twice.
+ *
+ * Inputs:
+ * - `label` (required): Accessible name (`aria-label`) of the pencil button. User-facing text the
+ *   consuming app is responsible for translating.
+ * - `onEdit`: Callback run when the button is clicked. Default is a no-op.
  */
 class YuwActionsCellComponent {
     constructor() {
@@ -4483,7 +4919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `actions` column; `label` is the button's accessible name and `header` the optional visible
  * column title, both already translated. Without `header` the column stays headerless.
  */
-function buildYuwActionsColumn(label, onEdit, cellClass, header = '') {
+function buildYuwActionsColumn(label, onEdit, cellClass = 'w-12', header = '') {
     return {
         id: 'actions',
         header,
@@ -4495,53 +4931,6 @@ function buildYuwActionsColumn(label, onEdit, cellClass, header = '') {
     };
 }
 
-/**
- * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
- *
- * Inputs:
- * - `size`: Avatar size (`'default'`, `'sm'`, `'lg'`). Default is `'default'`.
- * - `src`: Image URL for single-avatar mode. Omit to display fallback text.
- * - `alt`: Required. Accessible label for single-avatar mode and fallback text. User-facing text —
- *   the consuming app is responsible for providing (and translating) it.
- * - `fallback`: Fallback text or initials shown when image is loading, unprovided, or fails to load.
- * - `badge`: Renders a status badge marker on the bottom-right corner (single-avatar mode).
- * - `group`: Array of item DTOs (`YuwAvatarGroupItemDto[]`) to render as an overlapping avatar group stack.
- * - `groupCount`: Overflow label string (e.g. `"+5"`) displayed at the end of an avatar group stack.
- * - `class`: Extra CSS classes merged onto the inner `hlm-avatar` element(s); merged last, so they win.
- *
- * Single Avatar Usage:
- * ```html
- * <yuw-avatar src="/path/to/user.png" alt="Jane Doe" fallback="JD" />
- * <yuw-avatar alt="Jane Doe" fallback="JD" badge />
- * ```
- *
- * Avatar Group Usage:
- * ```html
- * <yuw-avatar [group]="teamMembers" alt="Team" groupCount="+5" />
- * ```
- */
-class YuwAvatarComponent {
-    constructor() {
-        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-        this.badge = input(false, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
-        this.group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
-        this.groupCount = input(undefined, ...(ngDevMode ? [{ debugName: "groupCount" }] : /* istanbul ignore next */ []));
-        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-        this._isGroup = computed(() => (this.group()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, groupCount: { classPropertyName: "groupCount", publicName: "groupCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$j.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$j.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$j.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$j.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$j.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$j.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuw-avatar', imports: [NgTemplateOutlet, ...HlmAvatarImports], host: {
-                        class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #avatarBox let-src=\"src\" let-alt=\"alt\" let-fallback=\"fallback\" let-showBadge=\"showBadge\">\n  <hlm-avatar [size]=\"size()\" [class]=\"userClass()\">\n    @if (src) {\n      <img hlmAvatarImage [src]=\"src\" [alt]=\"alt ?? ''\" />\n    }\n    <span hlmAvatarFallback>{{ fallback }}</span>\n\n    @if (showBadge) {\n      <span hlmAvatarBadge>\n        <ng-content select=\"[yuwAvatarBadgeIcon]\" />\n      </span>\n    }\n  </hlm-avatar>\n</ng-template>\n\n@if (_isGroup()) {\n  <div hlmAvatarGroup>\n    @for (entry of group(); track entry.alt + '|' + (entry.src ?? '')) {\n      <ng-container\n        [ngTemplateOutlet]=\"avatarBox\"\n        [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"\n      />\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container\n    [ngTemplateOutlet]=\"avatarBox\"\n    [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"\n  />\n}\n" }]
-        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 /**
  * Container directive for list/row item layout structures.
  * Accepts optional `variant` and `size` inputs.
@@ -4953,6 +5342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   text the consuming app is responsible for translating.
  * - `panelClass`: Extra classes merged onto the dialog panel (e.g. `sm:max-w-lg` to widen it).
  *   They win over the library defaults via `twMerge`.
+ * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is `'neutral'`.
  * - `triggerVariant`: Button style variant for the trigger button. Default is `'outline'`.
  * - `triggerSize`: Button size for the trigger button.
  *
@@ -5806,6 +6196,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * branches and cannot attach a directive conditionally — an attribute selector matches on presence, so
  * the nav applies it to every entry and passes whether that entry actually has an avatar. Its default
  * is `true` so the bare, hand-written form needs no value.
+ *
+ * Inputs:
+ * - `yuwSidebarMenuAvatarButton`: Boolean; whether the avatar geometry class is applied. An empty attribute counts as `true`; `false` applies nothing. Default is `true`.
  */
 class YuwSidebarMenuAvatarButtonDirective {
     constructor() {
@@ -5897,6 +6290,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * `label` is the accessible label of the rail button (it has no visible text). User-facing text —
  * the consuming app is responsible for providing it already translated.
+ *
+ * Inputs:
+ * - `label`: Required accessible label (`aria-label`) of the rail button.
  */
 class YuwSidebarRailDirective {
     constructor() {
@@ -6087,6 +6483,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * change-detection pass, and `RouterLinkActive` treats that as a changed input and re-runs its
  * subscription. Every entry resolves a tooltip, entries with children included: the submenu opens on
  * click, so hover is free to do what it does for every other rail icon and name the thing.
+ *
+ * Inputs:
+ * - `collapsible`: Collapse mode of the host sidebar (`'offcanvas'`, `'icon'`, `'none'`); the rail submenu form only
+ *   applies for `'icon'`. Default is `'offcanvas'`.
+ * - `content`: Required `YuwSidebarContentDto` (groups and their items) to render as the nav tree.
  */
 class YuwSidebarNavComponent {
     constructor() {
@@ -6218,6 +6619,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * split across the two refs, which is what broke every subsequent animation. Keeping one instance for
  * the sidebar's lifetime means a swap is only new content inside a live panel; the entry's own fields
  * are read through `_label`/`_children`, which tolerate the null the item holds before the first open.
+ *
+ * Outputs:
+ * - `itemClicked`: Emits `{ id, event }` (`YuwSidebarItemClickDto`) when a child entry of the open submenu is clicked; the submenu closes first.
  */
 class YuwSidebarSubmenuSheetComponent {
     constructor() {
@@ -6628,5 +7032,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
 //# sourceMappingURL=yukit-web.mjs.map