yukit-web 0.0.1

package/fesm2022/yukit-web.mjs

@@ -0,0 +1,3592 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as i0 from '@angular/core';
+import { forwardRef, signal, Directive, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, model, inject, TemplateRef, contentChild, viewChild, ElementRef, contentChildren, effect, numberAttribute } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
+import { HlmButtonGroup } from 'yukit-web/helm/button-group';
+import * as i2 from 'yukit-web/helm/dropdown-menu';
+import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
+import { cva } from 'class-variance-authority';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye } from '@ng-icons/lucide';
+import * as i1 from 'yukit-web/helm/badge';
+import { HlmBadge } from 'yukit-web/helm/badge';
+import * as i1$1 from 'yukit-web/helm/breadcrumb';
+import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
+import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1$2 from 'yukit-web/helm/combobox';
+import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
+import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
+import { HlmInput } from 'yukit-web/helm/input';
+import * as i1$3 from 'yukit-web/helm/input-group';
+import { HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon, HlmInputGroupTextarea, HlmInputGroupImports } from 'yukit-web/helm/input-group';
+import { HlmTextarea } from 'yukit-web/helm/textarea';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import * as i1$4 from 'yukit-web/helm/input-otp';
+import { HlmInputOtpImports } from 'yukit-web/helm/input-otp';
+import { HlmLabel } from 'yukit-web/helm/label';
+import { HlmCheckbox } from 'yukit-web/helm/checkbox';
+import * as i1$5 from 'yukit-web/helm/switch';
+import { HlmSwitchImports } from 'yukit-web/helm/switch';
+import * as i1$6 from 'yukit-web/helm/radio-group';
+import { HlmRadioGroupImports } from 'yukit-web/helm/radio-group';
+import * as i1$7 from 'yukit-web/helm/skeleton';
+import { HlmSkeleton } from 'yukit-web/helm/skeleton';
+import * as i1$8 from 'yukit-web/helm/card';
+import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction, HlmCardContent, HlmCardFooter } from 'yukit-web/helm/card';
+import * as i1$9 from 'yukit-web/helm/empty';
+import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
+import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
+import * as i1$a from 'yukit-web/helm/context-menu';
+import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
+import * as i1$b from 'yukit-web/helm/date-picker';
+import { injectHlmDatePickerConfig, injectHlmDateRangePickerConfig, injectHlmDatePickerMultiConfig, injectHlmMonthYearPickerConfig, HlmDatePickerImports } from 'yukit-web/helm/date-picker';
+import * as i1$c from 'yukit-web/helm/table';
+import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
+import { injectTable, FlexRenderDirective } from '@tanstack/angular-table';
+import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
+import { skip } from 'rxjs';
+import * as i1$d from 'yukit-web/helm/avatar';
+import { HlmAvatarImports } from 'yukit-web/helm/avatar';
+import * as i1$e from 'yukit-web/helm/item';
+import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
+import * as i1$f from 'yukit-web/helm/sheet';
+import { HlmSheetImports } from 'yukit-web/helm/sheet';
+import * as i1$g from 'yukit-web/helm/popover';
+import { HlmPopoverImports } from 'yukit-web/helm/popover';
+import * as i1$h 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 { hlm } from 'yukit-web/helm/utils';
+import { HlmSpinner } from 'yukit-web/helm/spinner';
+import { HlmToaster } from 'yukit-web/helm/sonner';
+export { toast as yuwToast } from '@spartan-ng/brain/sonner';
+import { HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction } from 'yukit-web/helm/alert';
+import * as i1$i from 'yukit-web/helm/dialog';
+import { HlmDialogImports } from 'yukit-web/helm/dialog';
+import * as i1$j from 'yukit-web/helm/alert-dialog';
+import { HlmAlertDialogImports } from 'yukit-web/helm/alert-dialog';
+import * as i1$k from 'yukit-web/helm/tabs';
+import { HlmTabsImports } from 'yukit-web/helm/tabs';
+import * as i1$l from 'yukit-web/helm/attachment';
+import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
+import * as i1$m from 'yukit-web/helm/sidebar';
+import { injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset } from 'yukit-web/helm/sidebar';
+export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
+
+/**
+ * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
+ * then drops earlier Tailwind classes that a later one overrides (e.g. `px-3 ... px-4` keeps
+ * only `px-4`) instead of shipping both to the DOM.
+ *
+ * Every yukit-web component's variant classes are combined through this, so a consumer's own
+ * `class` input always wins over the component's defaults without fighting specificity.
+ */
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Registers a component as a form control, so `formControlName`/`formControl`/`ngModel` bind to it.
+ *
+ * Spartan's own controls mostly don't need this: `hlmInput` and `hlmTextarea` are *directives on a
+ * native element*, so Angular's built-in `DefaultValueAccessor` already applies to the same host.
+ * The moment we wrap that native element inside a component template, the host a consumer writes
+ * `formControlName` on is no longer the `<input>` — Angular finds no accessor there and throws
+ * `NG01203`. This restores what the wrapping cost us.
+ *
+ * Kept as a `useExisting` + `forwardRef` provider because the class is referenced in its own
+ * decorator metadata, before the class binding is initialized.
+ */
+function provideValueAccessor(component) {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => component),
+        multi: true,
+    };
+}
+/**
+ * Shared `ControlValueAccessor` for the library's text-entry controls.
+ *
+ * Exists so the five text components don't each carry a near-identical copy of the same CVA
+ * plumbing — the single-responsibility and DRY concerns in `agents.md`. Subclasses supply nothing;
+ * they just extend it, add the provider, and bind `value`/`_onBlur()` in their template.
+ *
+ * ## Why `disabled` needs care
+ *
+ * `disabled` has two sources that don't know about each other: our own `disabled` input, and the
+ * forms API calling `setDisabledState()` (which is what `new FormControl({value, disabled: true})`
+ * and `control.disable()` go through). Letting either one own a single signal means the last
+ * writer wins and the other is silently ignored — the classic bug in hand-rolled accessors.
+ *
+ * They're kept as two separate signals and OR'd together in `disabledState`: disabled by *either*
+ * source means disabled. That's the only combination that never drops a caller's intent.
+ */
+class YuwValueAccessorBase {
+    constructor() {
+        this._formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+        this._onChange = () => undefined;
+        this._onTouched = () => undefined;
+    }
+    _isDisabled(ownDisabled) {
+        return ownDisabled || this._formDisabled();
+    }
+    _commit(next) {
+        this.value.set(next);
+        this._onChange(next);
+    }
+    _onBlur() {
+        this._onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value ?? this._emptyValue());
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwValueAccessorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwValueAccessorBase, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwValueAccessorBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+
+/**
+ * yukit-web's own class layer for `<yuw-button>`, applied on top of the helm `buttonVariants()`
+ * output. The result lands on the `[class]` binding of the inner `[hlmBtn]` element; the helm
+ * `classes()` utility registers it as base classes and merges it last through `twMerge`, so every
+ * class here beats the helm default of the same Tailwind group *and* modifier stack without
+ * needing `!important`.
+ */
+const yuwButtonVariants = cva('', {
+    variants: {
+        /**
+         * Mirrors the helm `variant` input. Only `outline` needs correcting: helm paints it with
+         * `bg-background` (+ `dark:bg-input/30`) and a muted text color, while ours is transparent at
+         * rest and uses the foreground color (which `[data-yuw-color]` remaps to the accent). The
+         * helm `hover:`/`aria-expanded:` backgrounds are intentionally left in place.
+         */
+        variant: {
+            default: '',
+            secondary: '',
+            outline: 'bg-transparent text-foreground dark:bg-transparent',
+            ghost: '',
+            destructive: '',
+            link: '',
+        },
+        /**
+         * Strips every background/border the helm variants set, covering each modifier stack they
+         * use (`hover:`, `aria-expanded:`, `dark:`, `dark:hover:`, `[a]:hover:`) so `twMerge` drops
+         * the helm counterpart in every state. The `component-colors.css` gradients key off the
+         * `.bg-primary` class, which this merge removes from the element, so they never match a
+         * transparent button and no `!important` is needed here either.
+         */
+        transparent: {
+            true: 'border-transparent bg-transparent text-foreground hover:bg-transparent aria-expanded:bg-transparent aria-expanded:text-foreground dark:border-transparent dark:bg-transparent dark:hover:bg-transparent [a]:hover:bg-transparent',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        transparent: false,
+    },
+});
+
+/**
+ * Button component supporting single action button or grouped button options.
+ *
+ * Inputs:
+ * - `variant`: Button style variant (`'default'`, `'secondary'`, `'outline'`, `'destructive'`, `'ghost'`, `'link'`). Default is `'default'`.
+ * - `size`: Button size (`'default'`, `'sm'`, `'lg'`, `'icon'`, etc.). Default is `'default'`.
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'secondary'`.
+ * - `disabled`: Disables button interactions.
+ * - `type`: HTML button type (`'button'`, `'submit'`, `'reset'`). Default is `'button'`.
+ * - `href`: Renders button as an anchor tag navigating to specified URL.
+ * - `target`: Target attribute for link button (e.g. `'_blank'`).
+ * - `transparent`: Removes background and border styling.
+ * - `class`: Extra CSS classes merged onto the inner button/anchor (single and link mode); 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.
+ * - `buttons`: Array of button items (`YuwButtonGroupItemDto[]`) to render as a welded button group.
+ * - `orientation`: Group layout orientation (`'horizontal'` or `'vertical'`). Default is `'horizontal'`.
+ * - `groupAriaLabel`: Accessible name for button group container.
+ *
+ * Outputs:
+ * - `clicked`: Emits MouseEvent on single button click.
+ * - `buttonClicked`: Emits object containing clicked button `id` and `event` in group mode.
+ *
+ * Single Button Usage:
+ * ```html
+ * <yuw-button variant="outline" color="primary" (clicked)="onSave()">Save</yuw-button>
+ * <yuw-button href="/dashboard">Navigate</yuw-button>
+ * ```
+ *
+ * Button Group Usage:
+ * ```html
+ * <yuw-button [buttons]="actionList" (buttonClicked)="onAction($event)" />
+ * ```
+ */
+class YuwButtonComponent {
+    constructor() {
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        this.target = input(undefined, ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.yuwDropdownMenuTrigger = input(undefined, ...(ngDevMode ? [{ debugName: "yuwDropdownMenuTrigger" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.buttons = input(undefined, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.groupAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Consumer CSS classes for the inner button/anchor (single and link mode). Merged last with
+         * `cn`, so they win over the component's own variant/transparent classes.
+         */
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.clicked = output();
+        this.buttonClicked = output();
+        this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
+        /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
+        this._btnClass = computed(() => cn(yuwButtonVariants({ variant: this.variant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
+        this._resolved = computed(() => (this.buttons() ?? []).map((button) => {
+            const variant = button.variant ?? this.variant();
+            return {
+                ...button,
+                variant,
+                size: button.size ?? this.size(),
+                color: button.color ?? this.color(),
+                disabled: button.disabled ?? false,
+                type: button.type ?? 'button',
+                class: yuwButtonVariants({ variant, transparent: button.transparent ?? false }),
+            };
+        }), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    onGroupClick(button, event) {
+        if (button.disabled) {
+            return;
+        }
+        this.buttonClicked.emit({ id: button.id, event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" } }, ngImport: i0, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"variant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n} @else {\n  <button hlmBtn [variant]=\"variant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-button', imports: [HlmButton, HlmButtonGroup, HlmDropdownMenuTrigger], host: {
+                        '[class.cursor-not-allowed]': 'disabled()',
+                        '[attr.data-yuw-color]': 'color()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"variant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n} @else {\n  <button hlmBtn [variant]=\"variant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
+
+/**
+ * Renders a small badge or tag component for status indicators, counts, and category labels.
+ *
+ * Supports the shared color vocabulary (`color`, any `YuwColorDto` value), variant styles
+ * (`variant`), dismissible action (`removeLabel` / `removed`), and a compact dot mode (`dot`)
+ * that renders no content at all.
+ *
+ * Usage:
+ * ```html
+ * <yuw-badge color="primary">New</yuw-badge>
+ * <yuw-badge removeLabel="Remove tag" (removed)="onRemove()">Category</yuw-badge>
+ * <yuw-badge dot color="success" />
+ * ```
+ */
+class YuwBadgeComponent {
+    constructor() {
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.removed = output();
+        this.dotClass = computed(() => (this.dot() ? 'size-4 p-0' : ''), ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
+    }
+    onRemoveClick(event) {
+        event.stopPropagation();
+        this.removed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <button type=\"button\" hlmBtn variant=\"ghost\" size=\"icon-xs\" [attr.aria-label]=\"removeLabel()\"\n            (click)=\"onRemoveClick($event)\">\n      <ng-icon name=\"lucideX\"/>\n    </button>\n  }\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { 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.8", ngImport: i0, type: YuwBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-badge', hostDirectives: [{ directive: HlmBadge, inputs: ['variant'] }], imports: [HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+                        '[class]': 'dotClass()',
+                        '[attr.data-yuw-color]': 'color()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <button type=\"button\" hlmBtn variant=\"ghost\" size=\"icon-xs\" [attr.aria-label]=\"removeLabel()\"\n            (click)=\"onRemoveClick($event)\">\n      <ng-icon name=\"lucideX\"/>\n    </button>\n  }\n}\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Navigation breadcrumb bar displaying page hierarchy and links.
+ *
+ * Accepts an array of item objects (`items`), custom separator text (`separator`), and a required
+ * accessible label (`ariaLabel`). The last item is announced as the current page
+ * (`aria-current="page"`); intermediate items render as links when they have an `href` and as
+ * plain text otherwise.
+ *
+ * Usage:
+ * ```html
+ * <yuw-breadcrumb
+ *   [items]="[{ label: 'Inicio', href: '/' }, { label: 'Ajustes' }]"
+ *   ariaLabel="Ruta de navegación"
+ * />
+ * ```
+ */
+class YuwBreadcrumbComponent {
+    constructor() {
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
+
+/**
+ * Pure function on purpose: the page-range math has nothing to do with Angular, so it's testable
+ * in isolation and keeps `pagination.component.ts` limited to wiring inputs/outputs.
+ *
+ * Always shows page 1 and the last page, plus the current page and its immediate neighbors,
+ * collapsing any gap into a single `'ellipsis'` entry.
+ */
+function getPaginationRange(page, totalPages) {
+    if (totalPages <= 7) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const range = [1];
+    const start = Math.max(2, page - 1);
+    const end = Math.min(totalPages - 1, page + 1);
+    if (start > 2) {
+        range.push('ellipsis');
+    }
+    for (let i = start; i <= end; i++) {
+        range.push(i);
+    }
+    if (end < totalPages - 1) {
+        range.push('ellipsis');
+    }
+    range.push(totalPages);
+    return range;
+}
+
+/**
+ * Pagination navigation bar for navigating multi-page content datasets.
+ *
+ * Controls two-way active page state `[(page)]`, accepts total pages (`totalPages`), accessible
+ * previous/next/ellipsis labels, size and color theme.
+ *
+ * Usage:
+ * ```html
+ * <yuw-pagination
+ *   [(page)]="currentPage"
+ *   [totalPages]="10"
+ *   previousLabel="Página anterior"
+ *   nextLabel="Página siguiente"
+ *   ellipsisSrText="Más páginas"
+ * />
+ * ```
+ */
+class YuwPaginationComponent {
+    constructor() {
+        this.page = model.required(...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+        this.previousLabel = input.required(...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
+        this.nextLabel = input.required(...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+        this.ellipsisSrText = input.required(...(ngDevMode ? [{ debugName: "ellipsisSrText" }] : /* istanbul ignore next */ []));
+        this.size = input('icon', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.range = computed(() => getPaginationRange(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    }
+    goTo(target) {
+        if (target < 1 || target > this.totalPages() || target === this.page()) {
+            return;
+        }
+        this.page.set(target);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPaginationComponent, isStandalone: true, selector: "yuw-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, ellipsisSrText: { classPropertyName: "ellipsisSrText", publicName: "ellipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "pageChange" }, host: { properties: { "attr.data-yuw-color": "color()" }, classAttribute: "contents" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\"/>\n\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { 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.8", ngImport: i0, type: YuwPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-pagination', imports: [HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis, NgIcon], providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], host: {
+                        class: 'contents',
+                        '[attr.data-yuw-color]': 'color()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmPagination [aria-label]=\"ariaLabel()\">\n  <ul hlmPaginationContent>\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() <= 1\"\n        [attr.aria-label]=\"previousLabel()\"\n        (click)=\"goTo(page() - 1)\"\n      >\n        <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n\n    @for (entry of range(); track $index) {\n      <li hlmPaginationItem>\n        @if (entry === 'ellipsis') {\n          <hlm-pagination-ellipsis [srOnlyText]=\"ellipsisSrText()\"/>\n\n        } @else if (entry === page()) {\n          <button\n            type=\"button\"\n            hlmPaginationLink\n            isActive\n            [size]=\"size()\"\n            class=\"border-transparent bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary\"\n            (click)=\"goTo(entry)\"\n          >\n            {{ entry }}\n          </button>\n        } @else {\n          <button type=\"button\" hlmPaginationLink [size]=\"size()\" (click)=\"goTo(entry)\">\n            {{ entry }}\n          </button>\n        }\n      </li>\n    }\n\n    <li hlmPaginationItem>\n      <button\n        type=\"button\"\n        hlmPaginationLink\n        [size]=\"size()\"\n        [disabled]=\"page() >= totalPages()\"\n        [attr.aria-label]=\"nextLabel()\"\n        (click)=\"goTo(page() + 1)\"\n      >\n        <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\"/>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: true }] }], ellipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsisSrText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
+
+/**
+ * Structural directive for custom option item templates in `yuw-combobox`.
+ *
+ * Exposes the option object (`let-option`) and selection state (`let-selected="selected"`).
+ *
+ * Usage:
+ * ```html
+ * <yuw-combobox [options]="users" [(value)]="userId">
+ *   <ng-template yuwComboboxItem let-option let-selected="selected">
+ *     <img [src]="option.data.avatar" /> {{ option.label }}
+ *   </ng-template>
+ * </yuw-combobox>
+ * ```
+ */
+class YuwComboboxItemDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.typeOf = input(undefined, { ...(ngDevMode ? { debugName: "typeOf" } : /* istanbul ignore next */ {}), alias: 'yuwComboboxItemTypeOf' });
+    }
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwComboboxItemDirective, isStandalone: true, selector: "[yuwComboboxItem]", inputs: { typeOf: { classPropertyName: "typeOf", publicName: "yuwComboboxItemTypeOf", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwComboboxItem]',
+                }]
+        }], propDecorators: { typeOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwComboboxItemTypeOf", required: false }] }] } });
+
+/** Module-level counter for the fallback control id, so external labels always have a stable,
+ * unique target even when the consumer doesn't pass `inputId`. */
+let nextUniqueId$2 = 0;
+/**
+ * Searchable select combobox component supporting single or multiple selections, search filtering, and custom option rendering.
+ *
+ * Inputs / Models:
+ * - `options`: Required array of option items (`YuwComboboxOptionDto<TData>[]`).
+ * - `value`: Two-way selected value(s) (`string` for single mode, `string[]` for multiple mode).
+ *   Emits `valueChange` on every selection change.
+ * - `multiple`: Enables multi-selection mode with removable tags/chips.
+ * - `disabled`: Disables combobox interaction.
+ * - `placeholder`: Placeholder text when no option is selected.
+ * - `searchPlaceholder`: Placeholder text inside the search field popover.
+ * - `emptyText`: Message text displayed when search yields no matching options.
+ * - `search`: Two-way search filter query string.
+ * - `triggerAriaLabel`: Required accessible name for the icon-only popover trigger (the chevron
+ *   button). User-facing text — the consuming app is responsible for providing it translated.
+ *   Only rendered by the single-select input shape, but required in every mode so switching
+ *   modes never silently drops the label.
+ * - `clearAriaLabel`: When set, the clear button is shown on the single-selection control and
+ *   this is its accessible name; when absent, there is no clear button. One input, one source of
+ *   truth. User-facing text — the consuming app is responsible for providing it translated.
+ * - `inputId`: HTML `id` for the focusable control (the search input, or the trigger button when
+ *   `readonlyTrigger` is set), enabling external `<label for="...">` association.
+ * - `readonlyTrigger`: Renders control as a button showing selected label, placing search input inside popover.
+ * - `invalid`: Forces invalid styling.
+ *
+ * `multiple` takes precedence over `readonlyTrigger`: when both are set the multi-select
+ * chips shape renders and `readonlyTrigger` is ignored.
+ *
+ * Usage:
+ * ```html
+ * <yuw-combobox [options]="userOptions" [(value)]="selectedUser" placeholder="Select user..."
+ *   triggerAriaLabel="Toggle options" clearAriaLabel="Clear selection" />
+ * <yuw-combobox [options]="categoryOptions" [(value)]="selectedCategories" multiple
+ *   triggerAriaLabel="Toggle options" />
+ * ```
+ */
+class YuwComboboxComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.triggerAriaLabel = input.required(...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+        this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.readonlyTrigger = input(false, { ...(ngDevMode ? { debugName: "readonlyTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.itemTemplate = contentChild(YuwComboboxItemDirective, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._clearVisible = computed(() => this.clearAriaLabel() !== undefined, ...(ngDevMode ? [{ debugName: "_clearVisible" }] : /* istanbul ignore next */ []));
+        this._generatedId = `yuw-combobox-${++nextUniqueId$2}`;
+        this._controlId = computed(() => this.inputId() ?? this._generatedId, ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
+        this._singleValue = computed(() => {
+            const value = this.value();
+            return Array.isArray(value) ? value[0] : value;
+        }, ...(ngDevMode ? [{ debugName: "_singleValue" }] : /* istanbul ignore next */ []));
+        this._multipleValue = computed(() => {
+            const value = this.value();
+            if (value === undefined) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        }, ...(ngDevMode ? [{ debugName: "_multipleValue" }] : /* istanbul ignore next */ []));
+        this._labelByValue = computed(() => new Map(this.options().map((option) => [option.value, option.label])), ...(ngDevMode ? [{ debugName: "_labelByValue" }] : /* istanbul ignore next */ []));
+        this._selectedChips = computed(() => {
+            const labels = this._labelByValue();
+            return this._multipleValue().map((value) => ({ value, label: labels.get(value) ?? value }));
+        }, ...(ngDevMode ? [{ debugName: "_selectedChips" }] : /* istanbul ignore next */ []));
+        this._selectedValues = computed(() => new Set(this._multipleValue()), ...(ngDevMode ? [{ debugName: "_selectedValues" }] : /* istanbul ignore next */ []));
+        this._itemToString = (value) => this._labelByValue().get(value) ?? value;
+    }
+    _emptyValue() {
+        return this.multiple() ? [] : undefined;
+    }
+    onValueChange(next) {
+        this._commit(next ?? this._emptyValue());
+    }
+    _onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node) {
+            if (event.currentTarget instanceof Node && event.currentTarget.contains(next)) {
+                return;
+            }
+            const panel = this._panel()?.nativeElement;
+            if (panel?.contains(next)) {
+                return;
+            }
+        }
+        this._onBlur();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n                         [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n                [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n                          [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n                          [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n                            [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n                            [showTrigger]=\"false\"/>\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\"/>\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple [disabled]=\"_disabled()\" [value]=\"_multipleValue()\" (valueChange)=\"onValueChange($event)\"\n                         [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\">\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 [disabled]=\"_disabled()\" [value]=\"_singleValue()\" (valueChange)=\"onValueChange($event)\"\n                [(search)]=\"search\" [itemToString]=\"_itemToString\" (focusout)=\"_onFocusOut($event)\">\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger [buttonId]=\"_controlId()\" [forceInvalid]=\"invalid()\">\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\"/>\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input [inputId]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\"\n                          [showClear]=\"_clearVisible()\" [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n                          [triggerAriaLabel]=\"triggerAriaLabel()\" [forceInvalid]=\"invalid()\"/>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input [placeholder]=\"searchPlaceholder() ?? ''\" [showClear]=\"_clearVisible()\"\n                            [clearAriaLabel]=\"clearAriaLabel() ?? ''\" [triggerAriaLabel]=\"triggerAriaLabel()\"\n                            [showTrigger]=\"false\"/>\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" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * Container directive for collapsible accordion items.
+ *
+ * Renders a full-width flexible vertical container for `yuw-accordion-item` elements.
+ * Supports single (`type="single"`) or multiple (`type="multiple"`) expandable items,
+ * as well as vertical or horizontal orientation (`orientation`).
+ *
+ * Direct child items (`yuw-accordion-item`) can be declared statically or rendered dynamically
+ * using `@for`.
+ *
+ * Extends `HlmAccordion` (instead of re-applying `BrnAccordion` and copying the helm's classes
+ * by hand) so the helm's `data-slot`, classes and its `BrnAccordion` host directive — including
+ * the forwarded `type`/`orientation` inputs — are all inherited. Forwarding those inputs through
+ * a `hostDirectives` entry on `HlmAccordion` is not possible: Angular only allows exposing
+ * inputs a host directive declares itself, and the helm exposes them transitively from
+ * `BrnAccordion`.
+ */
+class YuwAccordion extends HlmAccordion {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordion, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordion, isStandalone: true, selector: "yuw-accordion", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-accordion',
+                }]
+        }] });
+
+/**
+ * Directive representing an individual section/item within a `yuw-accordion`.
+ *
+ * Encloses a `yuw-accordion-trigger` button and a `yuw-accordion-content` panel.
+ * Accepts `isOpened` (boolean) to control open state and `disabled` (boolean) to disable
+ * interaction. Emits `openedChange` when the item is expanded or collapsed.
+ *
+ * Extends `HlmAccordionItem` (instead of re-applying `BrnAccordionItem` and copying the helm's
+ * classes by hand) so the helm's `data-slot`, classes and its `BrnAccordionItem` host directive —
+ * including the forwarded `isOpened`/`disabled` inputs and `openedChange` output — are all
+ * inherited. Forwarding those through a `hostDirectives` entry on `HlmAccordionItem` is not
+ * possible: Angular only allows exposing inputs/outputs a host directive declares itself, and
+ * the helm exposes them transitively from `BrnAccordionItem`.
+ */
+class YuwAccordionItem extends HlmAccordionItem {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionItem, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionItem, isStandalone: true, selector: "yuw-accordion-item", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-accordion-item',
+                }]
+        }] });
+
+/**
+ * Interactive header button for expanding or collapsing a `yuw-accordion-item`.
+ *
+ * Project content inside to serve as the trigger label (text, icons, badges, or custom markup).
+ *
+ * Inputs:
+ * - `triggerClass`: Extra classes for the inner trigger `<button>`; the helm merges them last
+ *   (via tailwind-merge), so they win over its defaults.
+ */
+class YuwAccordionTriggerComponent {
+    constructor() {
+        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content/>\n</hlm-accordion-trigger>\n", dependencies: [{ kind: "component", type: HlmAccordionTrigger, selector: "hlm-accordion-trigger", inputs: ["triggerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-accordion-trigger', imports: [HlmAccordionTrigger], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-trigger [triggerClass]=\"triggerClass()\">\n  <ng-content/>\n</hlm-accordion-trigger>\n" }]
+        }], propDecorators: { triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
+
+/**
+ * Collapsible panel container for a `yuw-accordion-item`.
+ *
+ * Projects body content revealed when the item is expanded (supports text, custom markup, or nested components).
+ */
+class YuwAccordionContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwAccordionContentComponent, isStandalone: true, selector: "yuw-accordion-content", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-accordion-content>\n  <ng-content/>\n</hlm-accordion-content>\n", dependencies: [{ kind: "component", type: HlmAccordionContent, selector: "hlm-accordion-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAccordionContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-accordion-content', imports: [HlmAccordionContent], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-accordion-content>\n  <ng-content/>\n</hlm-accordion-content>\n" }]
+        }] });
+
+/** Bundle for consumers who want every `yuw-accordion-*` piece in one `imports: [...]` entry —
+ * same shape as Spartan's own `HlmAccordionImports`. Each piece is still exported and importable
+ * on its own for consumers who only need a subset. */
+const YuwAccordionImports = [
+    YuwAccordion,
+    YuwAccordionItem,
+    YuwAccordionTriggerComponent,
+    YuwAccordionContentComponent,
+];
+
+/**
+ * Slot directive for adding content (icons, text prefixes) on the left side of a `yuw-input` or `yuw-textarea`.
+ */
+class YuwLeftAddonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwLeftAddonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwLeftAddonDirective, isStandalone: true, selector: "yuw-left-addon", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwLeftAddonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-left-addon',
+                }]
+        }] });
+/**
+ * Slot directive for adding content (icons, text suffixes, action buttons) on the right side of a `yuw-input` or `yuw-textarea`.
+ */
+class YuwRightAddonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRightAddonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwRightAddonDirective, isStandalone: true, selector: "yuw-right-addon", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRightAddonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-right-addon',
+                }]
+        }] });
+const YuwInputAddonImports = [YuwLeftAddonDirective, YuwRightAddonDirective];
+
+/** 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'`.
+ * - `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.
+ * - `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).
+ *
+ * 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 YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.committed = output();
+        this._autoId = `yuw-input-${++nextYuwInputId}`;
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
+        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* 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 */ []));
+    }
+    onInput(event) {
+        this._commit(event.target.value);
+    }
+    _emptyValue() {
+        return '';
+    }
+    onChange() {
+        this.committed.emit(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@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 hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n           [disabled]=\"_disabled()\"\n           [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n           [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n           (input)=\"onInput($event)\"\n           (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n         [value]=\"value()\" [disabled]=\"_disabled()\"\n         [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n         [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n}\n", dependencies: [{ 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.8", ngImport: i0, type: YuwInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-input', imports: [HlmInput, HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon], providers: [provideValueAccessor(YuwInputComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@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 hlmInputGroupInput [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\" [value]=\"value()\"\n           [disabled]=\"_disabled()\"\n           [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n           [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n           (input)=\"onInput($event)\"\n           (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\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 hlmInput [class]=\"_classes()\" [id]=\"_inputId()\" [type]=\"type()\" [attr.inputmode]=\"inputmode()\"\n         [value]=\"value()\" [disabled]=\"_disabled()\"\n         [readOnly]=\"readonly()\" [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.name]=\"name()\"\n         [attr.autocomplete]=\"autocomplete()\" [attr.maxlength]=\"maxlength()\" [attr.placeholder]=\"placeholder()\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange()\" (blur)=\"_onBlur()\"/>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
+
+let nextYuwTextareaId = 0;
+/**
+ * Multi-line text input control supporting auto-growing content, character limits, row count, and form integration (`ngModel`, `formControlName`).
+ *
+ * Inputs / Models:
+ * - `value`: Two-way text string.
+ * - `inputId`: `id` applied to the native textarea, for external `<label for>` association.
+ * - `disabled`: Disables input interaction.
+ * - `readonly`: Makes the field read-only.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling.
+ * - `name`: HTML `name` attribute.
+ * - `autocomplete`: Native `autocomplete` attribute.
+ * - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
+ * - `maxlength`: Hard cap on character count, enforced natively by the browser.
+ * - `placeholder`: Hint text shown inside the empty field.
+ * - `class`: Extra classes merged onto the visual root (the textarea, or the input group when addons are present).
+ *
+ * Outputs:
+ * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ *
+ * Usage:
+ * ```html
+ * <yuw-textarea [(value)]="bio" placeholder="Write your biography..." [rows]="4" />
+ * <yuw-textarea formControlName="comments" [maxlength]="500" />
+ * ```
+ */
+class YuwTextareaComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.committed = output();
+        this._autoId = `yuw-textarea-${++nextYuwTextareaId}`;
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
+        this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* 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 */ []));
+    }
+    onInput(event) {
+        this._commit(event.target.value);
+    }
+    _emptyValue() {
+        return '';
+    }
+    onChange() {
+        this.committed.emit(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n  @if (_hasLeftAddon()) {\n  <hlm-input-group-addon align=\"block-start\">\n    <ng-content select=\"yuw-left-addon\" />\n  </hlm-input-group-addon>\n  }\n\n  <textarea hlmInputGroupTextarea [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\"\n    [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\" [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\" (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n\n  @if (_hasRightAddon()) {\n  <hlm-input-group-addon align=\"block-end\">\n    <ng-content select=\"yuw-right-addon\" />\n  </hlm-input-group-addon>\n  }\n</hlm-input-group>\n} @else {\n<textarea hlmTextarea [class]=\"_classes()\" [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\" [required]=\"required()\"\n  [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\" [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\" (input)=\"onInput($event)\"\n  (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n}", dependencies: [{ kind: "directive", type: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-textarea', imports: [HlmTextarea, HlmInputGroup, HlmInputGroupTextarea, HlmInputGroupAddon], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n  @if (_hasLeftAddon()) {\n  <hlm-input-group-addon align=\"block-start\">\n    <ng-content select=\"yuw-left-addon\" />\n  </hlm-input-group-addon>\n  }\n\n  <textarea hlmInputGroupTextarea [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\"\n    [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\" [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\" (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n\n  @if (_hasRightAddon()) {\n  <hlm-input-group-addon align=\"block-end\">\n    <ng-content select=\"yuw-right-addon\" />\n  </hlm-input-group-addon>\n  }\n</hlm-input-group>\n} @else {\n<textarea hlmTextarea [class]=\"_classes()\" [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\" [required]=\"required()\"\n  [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\" [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\" (input)=\"onInput($event)\"\n  (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n}" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
+
+/** Module-level counter backing each instance's stable fallback `id`. */
+let nextYuwSearchInputId = 0;
+/**
+ * Search input control featuring a leading search icon, optional clear button, and form integration (`ngModel`, `formControlName`).
+ *
+ * Inputs / Models:
+ * - `value`: Two-way search query string.
+ * - `inputId`: `id` applied to the native input, for external `<label for>` association.
+ * - `disabled`: Disables input interaction.
+ * - `readonly`: Makes the field read-only.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling.
+ * - `name`: HTML `name` attribute.
+ * - `autocomplete`: Native `autocomplete` attribute.
+ * - `placeholder`: Hint text shown inside the empty field.
+ * - `clearAriaLabel`: Accessible name for the clear button. Supplying it enables the clear button; omit to hide it.
+ * - `class`: Extra classes merged onto the input group.
+ *
+ * Outputs:
+ * - `searched`: Emits the current query string on every keystroke.
+ * - `committed`: Emits the current query string when the user presses Enter — for searches that
+ *   hit a server on explicit submit rather than on every keystroke.
+ *
+ * Usage:
+ * ```html
+ * <yuw-search-input [(value)]="query" placeholder="Search items..." clearAriaLabel="Clear search" (searched)="onSearch($event)" />
+ * ```
+ */
+class YuwSearchInputComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.searched = output();
+        this.committed = output();
+        this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._showClear = computed(() => this.clearAriaLabel() !== undefined && this.value().length > 0 && !this._disabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
+        this._input = viewChild.required('searchInput');
+    }
+    _emptyValue() {
+        return '';
+    }
+    onInput(event) {
+        const next = event.target.value;
+        this._commit(next);
+        this.searched.emit(next);
+    }
+    onEnter() {
+        this.committed.emit(this.value());
+    }
+    onClear() {
+        this._commit('');
+        this.searched.emit('');
+        this._input().nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, 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-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\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", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\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" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+/** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
+ * directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
+ * mode, say) means adding an entry here — open for extension, closed for modification. */
+const YUW_PASSWORD_REVEAL_STATES = {
+    true: { inputType: 'password', icon: 'lucideEyeOff', struck: true },
+    false: { inputType: 'text', icon: 'lucideEye', struck: false },
+};
+
+/** Module-level counter backing each instance's stable fallback `id`. */
+let nextYuwPasswordInputId = 0;
+/**
+ * Password input field with optional visibility toggle button and form integration (`ngModel`, `formControlName`).
+ *
+ * Inputs / Models:
+ * - `value`: Two-way password string.
+ * - `inputId`: `id` applied to the native input, for external `<label for>` association.
+ * - `disabled`: Disables input interaction.
+ * - `readonly`: Makes the field read-only.
+ * - `required`: Marks the field as required.
+ * - `invalid`: Forces invalid styling.
+ * - `name`: HTML `name` attribute.
+ * - `autocomplete`: Native `autocomplete` attribute (e.g. `'current-password'`, `'new-password'`).
+ * - `placeholder`: Hint text shown inside the empty field.
+ * - `revealAriaLabel`: Accessible name for the reveal toggle button. Supplying it enables the toggle; omit to hide it.
+ * - `masked`: Two-way boolean controlling whether the value is masked. Default is `true` (masked). A parent can reset it (e.g. re-mask after a failed submit).
+ * - `class`: Extra classes merged onto the input group.
+ *
+ * Outputs:
+ * - `committed`: Emits the current value on the native `change` event (blur/enter).
+ *
+ * Usage:
+ * ```html
+ * <yuw-password-input [(value)]="password" revealAriaLabel="Toggle password visibility" />
+ * <yuw-password-input formControlName="password" autocomplete="current-password" />
+ * ```
+ */
+class YuwPasswordInputComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.revealAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "revealAriaLabel" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.committed = output();
+        this.masked = model(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
+        this._autoId = `yuw-password-input-${++nextYuwPasswordInputId}`;
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._reveal = computed(() => YUW_PASSWORD_REVEAL_STATES[`${this.masked()}`], ...(ngDevMode ? [{ debugName: "_reveal" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return '';
+    }
+    onInput(event) {
+        this._commit(event.target.value);
+    }
+    onChange() {
+        this.committed.emit(this.value());
+    }
+    onToggleReveal() {
+        this.masked.update((masked) => !masked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", masked: "maskedChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\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", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-password-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\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]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (change)=\"onChange()\"\n    (blur)=\"_onBlur()\"\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" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }] } });
+
+/**
+ * Expands a list of group sizes (`[3, 3]`) into the groups the template renders, assigning
+ * absolute indices as it goes.
+ *
+ * Lives in its own file rather than inline in the component because `agents.md` wants the
+ * component file to read as inputs, outputs, a couple of `computed()`s, done — and because this
+ * is the one piece of real logic here, so it's the piece worth being able to test on its own.
+ *
+ * Sizes that are zero or negative are dropped: they'd contribute no slots but would still emit a
+ * stray separator, so a typo like `[3, 0, 3]` would render a dangling dash between two groups.
+ */
+function buildInputOtpGroups(groupSizes) {
+    let nextIndex = 0;
+    return groupSizes
+        .filter((size) => size > 0)
+        .map((size, groupPosition) => {
+        const indices = Array.from({ length: size }, (_, offset) => nextIndex + offset);
+        nextIndex += size;
+        return { indices, precededBySeparator: groupPosition > 0 };
+    });
+}
+/** Total slot count across every group — what `BrnInputOtp`'s own `length` input expects. Derived
+ * from the same source as the groups so the two can never disagree, which is the bug you get from
+ * accepting `length` and `groupSizes` as two independent inputs. */
+function totalInputOtpLength(groupSizes) {
+    return groupSizes.filter((size) => size > 0).reduce((total, size) => total + size, 0);
+}
+
+/** Module-level counter backing each instance's stable fallback `id`. */
+let nextYuwInputOtpId = 0;
+/**
+ * One-time password / verification code input component rendering grouped digit or text slots.
+ *
+ * Inputs / Models:
+ * - `value`: Two-way OTP code string.
+ * - `inputId`: `id` applied to the hidden native input, for external `<label for>` association.
+ * - `groupSizes`: Slot counts per visual group (`number[]`). A separator renders between groups, e.g. `[3, 3]` gives `000-000`. Default is `[6]`.
+ * - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
+ * - `disabled`: Disables input interaction.
+ * - `invalid`: Forces invalid styling.
+ * - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
+ * - `transformPaste`: Normalizes pasted text before it fills the slots.
+ * - `class`: Extra classes merged onto the OTP container.
+ *
+ * Outputs:
+ * - `completed`: Emits the full code string once the final slot is filled (by typing or paste).
+ *
+ * Usage:
+ * ```html
+ * <yuw-input-otp [(value)]="code" [groupSizes]="[3, 3]" (completed)="verifyCode($event)" />
+ * <yuw-input-otp formControlName="otpCode" [groupSizes]="[6]" mode="numeric" />
+ * ```
+ */
+class YuwInputOtpComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.groupSizes = input([6], ...(ngDevMode ? [{ debugName: "groupSizes" }] : /* istanbul ignore next */ []));
+        this.mode = input('numeric', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.transformPaste = input((pastedText) => pastedText, ...(ngDevMode ? [{ debugName: "transformPaste" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.completed = output();
+        this._autoId = `yuw-input-otp-${++nextYuwInputOtpId}`;
+        this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+        this._groups = computed(() => buildInputOtpGroups(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+        this._length = computed(() => totalInputOtpLength(this.groupSizes()), ...(ngDevMode ? [{ debugName: "_length" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return '';
+    }
+    onValueChange(next) {
+        this._commit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<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>\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]=\"invalid()\"/>\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\n", dependencies: [{ kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-input-otp', imports: [BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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>\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]=\"invalid()\"/>\n      }\n    </hlm-input-otp-group>\n  }\n</brn-input-otp>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
+
+/**
+ * Form label directive applied directly to a native `<label>` element.
+ *
+ * Provides label styling and pairs with form controls using standard `for` attribute.
+ *
+ * Extends `HlmLabel` (instead of composing it via `hostDirectives`) because `id`/`for` are
+ * inputs `HlmLabel` itself re-exposes from `BrnLabel` through its own `hostDirectives`, and
+ * Angular's host-directive forwarding is not transitive (NG2017) — they can't be re-listed at
+ * this level. Class inheritance carries the whole surface over unchanged: a static `for`/`id`
+ * on the `<label>` reaches `BrnLabel` as an initial input, whose `[attr.for]` host binding then
+ * re-writes the same value.
+ *
+ * Usage:
+ * ```html
+ * <label yuwLabel for="username">Username</label>
+ * <yuw-input inputId="username" [(value)]="username" />
+ * ```
+ */
+class YuwLabel extends HlmLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwLabel, isStandalone: true, selector: "label[yuwLabel]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[yuwLabel]',
+                }]
+        }] });
+
+/**
+ * Class map for `yuw-checkbox`, layered on top of `HlmCheckbox`'s own classes.
+ *
+ * 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 `secondary` is an opt-in
+ * boolean variant layered on top.
+ *
+ * Order is load-bearing: the secondary classes override the base's `bg-primary`/`border-primary`,
+ * and cva emits base classes before variant classes, so the component must pass the result
+ * through `cn()` for `tailwind-merge` to keep the later (secondary) ones instead of shipping both
+ * to the DOM and leaving it to specificity.
+ */
+const checkboxVariants = cva([
+    'data-[state=indeterminate]:bg-primary',
+    'dark:data-[state=indeterminate]:bg-primary',
+    'data-[state=indeterminate]:text-primary-foreground',
+    'data-[state=indeterminate]:[&>span]:hidden',
+    'data-[state=indeterminate]:after:h-0.5',
+    'data-[state=indeterminate]:after:w-2.5',
+    'data-[state=indeterminate]:after:rounded-full',
+    'data-[state=indeterminate]:after:bg-current',
+], {
+    variants: {
+        secondary: {
+            true: [
+                'data-[state=checked]:bg-(color:--neutrals-element-high)',
+                'data-[state=checked]:bg-(image:--neutrals-element-high-gradient)',
+                'data-[state=checked]:text-(--neutrals-overlay)',
+                'data-[state=checked]:border-(--neutrals-element-high)',
+                'data-[state=indeterminate]:bg-(color:--neutrals-element-high)',
+                'data-[state=indeterminate]:bg-(image:--neutrals-element-high-gradient)',
+                'data-[state=indeterminate]:text-(--neutrals-white)',
+                'data-[state=indeterminate]:border-(--neutrals-element-high)',
+                'dark:data-[state=indeterminate]:text-(--neutrals-black)',
+            ],
+            false: 'data-[state=indeterminate]:border-primary',
+        },
+    },
+    defaultVariants: {
+        secondary: false,
+    },
+});
+
+/**
+ * Checkbox control supporting two-way boolean binding, form integration (`ngModel`, `formControlName`),
+ * indeterminate state, and secondary styling variant.
+ *
+ * Projected content becomes the checkbox's clickable label: the control is wrapped in a `<label>`,
+ * so clicking the text toggles it and the text is announced as the accessible name. Without
+ * 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`.
+ * - `indeterminate`: Two-way boolean state for mixed/indeterminate checkbox appearance. Default is `false`.
+ * - `disabled`: Disables checkbox interaction.
+ * - `required`: Marks checkbox as required.
+ * - `invalid`: Forces invalid styling.
+ * - `name`: Form input name attribute.
+ * - `inputId`: ID set on the native input element for `<label [for]>` matching.
+ * - `ariaLabel`: Accessible name for screen readers when there's no visible label.
+ * - `ariaLabelledby`: ID of an external element that labels the checkbox.
+ * - `ariaDescribedby`: ID of an external element that describes the checkbox (hints, errors).
+ * - `secondary`: Enables secondary color variant styling.
+ *
+ * Usage:
+ * ```html
+ * <yuw-checkbox [(checked)]="acceptedTerms">Accept terms</yuw-checkbox>
+ * <yuw-checkbox [(indeterminate)]="isMixed" [(checked)]="allSelected" />
+ * <yuw-checkbox formControlName="rememberMe" />
+ * ```
+ */
+class YuwCheckboxComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
+        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+        this.ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+        this.secondary = input(false, { ...(ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._class = computed(() => cn(checkboxVariants({ secondary: this.secondary() })), ...(ngDevMode ? [{ debugName: "_class" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return false;
+    }
+    onCheckedChange(checked) {
+        this._commit(checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwCheckboxComponent, isStandalone: true, selector: "yuw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "checkedChange", indeterminate: "indeterminateChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwCheckboxComponent)], usesInheritance: true, ngImport: i0, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox [class]=\"_class()\" [checked]=\"value()\" [(indeterminate)]=\"indeterminate\" [disabled]=\"_disabled()\"\n                [required]=\"required()\" [forceInvalid]=\"invalid()\" [name]=\"name() ?? null\" [inputId]=\"inputId() ?? null\"\n                [aria-label]=\"ariaLabel() ?? null\" [aria-labelledby]=\"ariaLabelledby() ?? null\"\n                [aria-describedby]=\"ariaDescribedby() ?? null\" (checkedChange)=\"onCheckedChange($event)\"/>\n  <ng-content/>\n</label>\n", dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "checked", "indeterminate", "name", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-checkbox', imports: [HlmCheckbox, YuwLabel], providers: [provideValueAccessor(YuwCheckboxComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-checkbox [class]=\"_class()\" [checked]=\"value()\" [(indeterminate)]=\"indeterminate\" [disabled]=\"_disabled()\"\n                [required]=\"required()\" [forceInvalid]=\"invalid()\" [name]=\"name() ?? null\" [inputId]=\"inputId() ?? null\"\n                [aria-label]=\"ariaLabel() ?? null\" [aria-labelledby]=\"ariaLabelledby() ?? null\"\n                [aria-describedby]=\"ariaDescribedby() ?? null\" (checkedChange)=\"onCheckedChange($event)\"/>\n  <ng-content/>\n</label>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }] } });
+
+/**
+ * Toggle switch control for binary settings and immediate state changes.
+ *
+ * Projected content becomes the switch's clickable label: the control is wrapped in a `<label>`,
+ * so clicking the text toggles it and the text is announced as the accessible name. Without
+ * projected content, pair it with an external `<label [for]>` via `inputId` or set `ariaLabel`.
+ *
+ * Inputs / Models:
+ * - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
+ * - `size`: Track size variant (`'default'`, `'sm'`). Default is `'default'`.
+ * - `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.
+ *
+ * Usage:
+ * ```html
+ * <yuw-switch [(checked)]="notificationsEnabled">Enable Notifications</yuw-switch>
+ * <yuw-switch formControlName="darkMode" size="sm" />
+ * ```
+ */
+class YuwSwitchComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model(false, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'checked' });
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+        this.ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return false;
+    }
+    onCheckedChange(checked) {
+        this._commit(checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSwitchComponent, isStandalone: true, selector: "yuw-switch", inputs: { value: { classPropertyName: "value", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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]=\"size()\"\n    [disabled]=\"_disabled()\"\n    [inputId]=\"inputId() ?? null\"\n    [aria-label]=\"ariaLabel() ?? null\"\n    [aria-labelledby]=\"ariaLabelledby() ?? null\"\n    [aria-describedby]=\"ariaDescribedby() ?? null\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  />\n  <ng-content/>\n</label>\n", dependencies: [{ kind: "component", type: i1$5.HlmSwitch, selector: "hlm-switch", inputs: ["class", "checked", "disabled", "size", "inputId", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["checkedChange"] }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-switch', imports: [...HlmSwitchImports, YuwLabel], providers: [provideValueAccessor(YuwSwitchComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label yuwLabel class=\"gap-3\" (focusout)=\"_onBlur()\">\n  <hlm-switch\n    [checked]=\"value()\"\n    [size]=\"size()\"\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" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
+
+/** Module-level counter so every unnamed group gets its own radio `name`. Binding `[name]`
+ * unconditionally overrides Brain's autogenerated unique name, and an empty-string fallback
+ * would make two unnamed groups on the same page share `name=""` — i.e. act as one group. */
+let nextUniqueId$1 = 0;
+/**
+ * Radio button group component for selecting a single option from a list.
+ *
+ * Inputs / Models:
+ * - `value`: Two-way selected option value (`string | undefined`). `undefined` means nothing is selected.
+ * - `options`: Required array of radio options (`YuwRadioOptionDto[]`).
+ * - `disabled`: Disables all radio options.
+ * - `required`: Marks the group as required.
+ * - `name`: Shared HTML `name` attribute for all radios, making them mutually exclusive in native
+ *   form submission. When omitted, a unique per-instance name is generated.
+ * - `ariaLabel`: Accessible name for the `role="radiogroup"` element. User-facing text — the
+ *   consuming app is responsible for providing it translated.
+ * - `ariaLabelledby`: ID of an external element (e.g. a visible heading) that labels the group.
+ * - `class`: Extra classes merged onto the group container (layout tweaks like
+ *   `grid-cols-2` or `flex-row`). The `gap-3` base stays unless overridden.
+ *
+ * Usage:
+ * ```html
+ * <yuw-radio-group [options]="planOptions" [(value)]="selectedPlan" ariaLabel="Plan" />
+ * <yuw-radio-group [options]="genderOptions" formControlName="gender" ariaLabelledby="gender-heading" />
+ * ```
+ */
+class YuwRadioGroupComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._generatedName = `yuw-radio-group-${++nextUniqueId$1}`;
+        this._name = computed(() => this.name() ?? this._generatedName, ...(ngDevMode ? [{ debugName: "_name" }] : /* istanbul ignore next */ []));
+        this._groupClass = computed(() => cn('gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return undefined;
+    }
+    onValueChange(next) {
+        this._commit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwRadioGroupComponent, isStandalone: true, selector: "yuw-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwRadioGroupComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-radio-group\n  [class]=\"_groupClass()\"\n  [value]=\"value() ?? ''\"\n  [disabled]=\"_disabled()\"\n  [required]=\"required()\"\n  [name]=\"_name()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (valueChange)=\"onValueChange($event)\"\n  (focusout)=\"_onBlur()\"\n>\n  @for (option of options(); track option.value) {\n    <label yuwLabel class=\"gap-3\">\n      <hlm-radio [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n        <hlm-radio-indicator indicator/>\n      </hlm-radio>\n\n      {{ option.label }}\n    </label>\n  }\n</hlm-radio-group>\n", dependencies: [{ kind: "directive", type: i1$6.HlmRadioGroup, selector: "[hlmRadioGroup],hlm-radio-group", inputs: ["class"] }, { kind: "component", type: i1$6.HlmRadio, selector: "hlm-radio", inputs: ["class", "inputId", "aria-label", "aria-labelledby", "aria-describedby", "value", "required", "disabled"], outputs: ["change"] }, { kind: "component", type: i1$6.HlmRadioIndicator, selector: "hlm-radio-indicator" }, { kind: "directive", type: YuwLabel, selector: "label[yuwLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-radio-group', imports: [...HlmRadioGroupImports, YuwLabel], providers: [provideValueAccessor(YuwRadioGroupComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Loading skeleton placeholder directive with pulse animation effect.
+ *
+ * Sized using standard CSS height and width classes on the host element.
+ *
+ * Usage:
+ * ```html
+ * <div yuwSkeleton class="h-4 w-32 rounded"></div>
+ * <div yuwSkeleton class="size-10 rounded-full"></div>
+ * ```
+ */
+class YuwSkeletonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSkeletonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSkeletonDirective, isStandalone: true, selector: "[yuwSkeleton]", host: { attributes: { "aria-hidden": "true" } }, hostDirectives: [{ directive: i1$7.HlmSkeleton }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSkeletonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSkeleton]',
+                    hostDirectives: [HlmSkeleton],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * Container directive for card components.
+ * Accepts optional `size` input (e.g. `'default'` or `'sm'`).
+ *
+ * Usage:
+ * ```html
+ * <div yuwCard>
+ *   <div yuwCardHeader>
+ *     <h3 yuwCardTitle>Title</h3>
+ *     <p yuwCardDescription>Description text</p>
+ *   </div>
+ *   <div yuwCardContent>Main content</div>
+ *   <div yuwCardFooter>Footer content</div>
+ * </div>
+ * ```
+ */
+class YuwCardDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardDirective, isStandalone: true, selector: "[yuwCard]", hostDirectives: [{ directive: i1$8.HlmCard, inputs: ["size", "size"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCard]',
+                    hostDirectives: [{ directive: HlmCard, inputs: ['size'] }],
+                }]
+        }] });
+/** Header container directive for a card. */
+class YuwCardHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardHeaderDirective, isStandalone: true, selector: "[yuwCardHeader]", hostDirectives: [{ directive: i1$8.HlmCardHeader }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardHeader]',
+                    hostDirectives: [HlmCardHeader],
+                }]
+        }] });
+/** Heading directive for card title text. */
+class YuwCardTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardTitleDirective, isStandalone: true, selector: "[yuwCardTitle]", hostDirectives: [{ directive: i1$8.HlmCardTitle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardTitle]',
+                    hostDirectives: [HlmCardTitle],
+                }]
+        }] });
+/** Subtitle or description directive for card text. */
+class YuwCardDescriptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardDescriptionDirective, isStandalone: true, selector: "[yuwCardDescription]", hostDirectives: [{ directive: i1$8.HlmCardDescription }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardDescription]',
+                    hostDirectives: [HlmCardDescription],
+                }]
+        }] });
+/** 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.8", ngImport: i0, type: YuwCardActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardActionDirective, isStandalone: true, selector: "[yuwCardAction]", hostDirectives: [{ directive: i1$8.HlmCardAction }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardAction]',
+                    hostDirectives: [HlmCardAction],
+                }]
+        }] });
+/** Main body container directive for card content. */
+class YuwCardContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardContentDirective, isStandalone: true, selector: "[yuwCardContent]", hostDirectives: [{ directive: i1$8.HlmCardContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardContent]',
+                    hostDirectives: [HlmCardContent],
+                }]
+        }] });
+/** Footer container directive for card action buttons or summary info. */
+class YuwCardFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCardFooterDirective, isStandalone: true, selector: "[yuwCardFooter]", hostDirectives: [{ directive: i1$8.HlmCardFooter }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCardFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCardFooter]',
+                    hostDirectives: [HlmCardFooter],
+                }]
+        }] });
+/** Every card part, for a consumer's `imports`. */
+const YuwCardImports = [
+    YuwCardDirective,
+    YuwCardHeaderDirective,
+    YuwCardTitleDirective,
+    YuwCardDescriptionDirective,
+    YuwCardActionDirective,
+    YuwCardContentDirective,
+    YuwCardFooterDirective,
+];
+
+/**
+ * Container directive for empty-state layout panels (e.g., "No search results", "Inbox empty").
+ *
+ * Usage:
+ * ```html
+ * <div yuwEmpty>
+ *   <div yuwEmptyHeader>
+ *     <div yuwEmptyMedia>
+ *       <ng-icon name="lucideFolderOpen" />
+ *     </div>
+ *     <h3 yuwEmptyTitle>No files found</h3>
+ *     <p yuwEmptyDescription>Try uploading a file or changing your query.</p>
+ *   </div>
+ *   <div yuwEmptyContent>
+ *     <yuw-button>Upload File</yuw-button>
+ *   </div>
+ * </div>
+ * ```
+ */
+class YuwEmptyDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyDirective, isStandalone: true, selector: "[yuwEmpty]", hostDirectives: [{ directive: i1$9.HlmEmpty }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmpty]',
+                    hostDirectives: [HlmEmpty],
+                }]
+        }] });
+/** Header container directive for empty-state title and media. */
+class YuwEmptyHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyHeaderDirective, isStandalone: true, selector: "[yuwEmptyHeader]", hostDirectives: [{ directive: i1$9.HlmEmptyHeader }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmptyHeader]',
+                    hostDirectives: [HlmEmptyHeader],
+                }]
+        }] });
+/** 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.8", ngImport: i0, type: YuwEmptyMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyMediaDirective, isStandalone: true, selector: "[yuwEmptyMedia]", hostDirectives: [{ directive: i1$9.HlmEmptyMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmptyMedia]',
+                    hostDirectives: [{ directive: HlmEmptyMedia, inputs: ['variant'] }],
+                }]
+        }] });
+/** Title heading directive for empty state message. */
+class YuwEmptyTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyTitleDirective, isStandalone: true, selector: "[yuwEmptyTitle]", hostDirectives: [{ directive: i1$9.HlmEmptyTitle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmptyTitle]',
+                    hostDirectives: [HlmEmptyTitle],
+                }]
+        }] });
+/** Description paragraph directive explaining the empty state. */
+class YuwEmptyDescriptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyDescriptionDirective, isStandalone: true, selector: "[yuwEmptyDescription]", hostDirectives: [{ directive: i1$9.HlmEmptyDescription }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmptyDescription]',
+                    hostDirectives: [HlmEmptyDescription],
+                }]
+        }] });
+/** 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.8", ngImport: i0, type: YuwEmptyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwEmptyContentDirective, isStandalone: true, selector: "[yuwEmptyContent]", hostDirectives: [{ directive: i1$9.HlmEmptyContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwEmptyContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwEmptyContent]',
+                    hostDirectives: [HlmEmptyContent],
+                }]
+        }] });
+/** Every empty-state part, for a consumer's `imports`. */
+const YuwEmptyImports = [
+    YuwEmptyDirective,
+    YuwEmptyHeaderDirective,
+    YuwEmptyMediaDirective,
+    YuwEmptyTitleDirective,
+    YuwEmptyDescriptionDirective,
+    YuwEmptyContentDirective,
+];
+
+/**
+ * Checkmark shown at the trailing edge of a `[yuwContextMenuCheckbox]` item while it is checked.
+ *
+ * Place it inside the checkbox item; the helm indicator positions itself absolutely against the
+ * item and only becomes visible when the item carries `data-checked`.
+ *
+ * Usage:
+ * ```html
+ * <button yuwContextMenuCheckbox [checked]="showArchived()" (triggered)="toggleArchived()">
+ *   Show archived
+ *   <yuw-context-menu-checkbox-indicator />
+ * </button>
+ * ```
+ */
+class YuwContextMenuCheckboxIndicatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuCheckboxIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-checkbox-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-checkbox-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-context-menu-checkbox-indicator', imports: [HlmDropdownMenuCheckboxIndicator], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-checkbox-indicator/>\n" }]
+        }] });
+
+/**
+ * Mark shown at the trailing edge of a `[yuwContextMenuRadio]` item while it is selected.
+ *
+ * Place it inside the radio item; the helm indicator positions itself absolutely against the
+ * item and only becomes visible when the item carries `data-checked`.
+ *
+ * Usage:
+ * ```html
+ * <button yuwContextMenuRadio [checked]="order() === 'asc'" (triggered)="setOrder('asc')">
+ *   Ascending
+ *   <yuw-context-menu-radio-indicator />
+ * </button>
+ * ```
+ */
+class YuwContextMenuRadioIndicatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuRadioIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-radio-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-radio-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuRadioIndicator, selector: "hlm-dropdown-menu-radio-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-context-menu-radio-indicator', imports: [HlmDropdownMenuRadioIndicator], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-radio-indicator/>\n" }]
+        }] });
+
+/**
+ * Trailing chevron for a `[yuwContextMenuSubTrigger]` item, signalling that it opens a nested
+ * sub-menu. Flips automatically in RTL layouts.
+ *
+ * Usage:
+ * ```html
+ * <button [yuwContextMenuSubTrigger]="subMenu">
+ *   More tools
+ *   <yuw-context-menu-sub-indicator />
+ * </button>
+ * ```
+ */
+class YuwContextMenuSubIndicatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubIndicatorComponent, isStandalone: true, selector: "yuw-context-menu-sub-indicator", host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-dropdown-menu-item-sub-indicator/>\n", dependencies: [{ kind: "component", type: HlmDropdownMenuItemSubIndicator, selector: "hlm-dropdown-menu-item-sub-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-context-menu-sub-indicator', imports: [HlmDropdownMenuItemSubIndicator], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dropdown-menu-item-sub-indicator/>\n" }]
+        }] });
+
+/**
+ * Context menu directives suite based on right-click actions and panel controls.
+ *
+ * Why some inputs/outputs below are bridged imperatively instead of forwarded via
+ * `hostDirectives`: Angular only lets a wrapper re-expose a host directive's *own* (or
+ * class-inherited) inputs/outputs. Names the helm layer itself only *exposes* from its own host
+ * directives (`hlmContextMenuTrigger`, `hlmContextMenuOpened`/`hlmContextMenuClosed`, the items'
+ * `checked`/`disabled`/`keepOpen`/`triggered`) are not re-exposable one level further — the
+ * compiler rejects the mapping with NG2017 ("does not have an input with a public name of …"),
+ * and the runtime's `validateMappings` enforces the same rule. Verified against Angular 21.2
+ * (`validateHostDirectiveMappings` in the compiler, `validateMappings` in core) and reproduced
+ * with an isolated `ngc` compile. Own inputs of the helm classes (`disabled`/`align`/`side` on
+ * the trigger, `inset`/`variant` on items, `sideOffset` on the panel) *are* forwarded
+ * declaratively.
+ */
+/**
+ * Attach to an element to open a context menu upon right-clicking.
+ *
+ * Usage:
+ * ```html
+ * <div [yuwContextMenuTrigger]="menu">Right-click me</div>
+ *
+ * <ng-template #menu>
+ *   <div yuwContextMenu>
+ *     <button yuwContextMenuItem (triggered)="onEdit()">Edit</button>
+ *     <button yuwContextMenuItem variant="destructive" (triggered)="onDelete()">Delete</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
+class YuwContextMenuTriggerDirective {
+    constructor() {
+        this._trigger = inject(CdkContextMenuTrigger, { host: true });
+        this.menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'yuwContextMenuTrigger' });
+        this.menuData = input(undefined, { ...(ngDevMode ? { debugName: "menuData" } : /* istanbul ignore next */ {}), alias: 'yuwContextMenuTriggerData' });
+        this.opened = outputFromObservable(this._trigger.opened);
+        this.closed = outputFromObservable(this._trigger.closed);
+        effect(() => {
+            this._trigger.menuTemplateRef = this.menu();
+            this._trigger.menuData = this.menuData();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", 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: { opened: "opened", closed: "closed" }, hostDirectives: [{ directive: i1$a.HlmContextMenuTrigger, inputs: ["disabled", "disabled", "align", "align", "side", "side"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuTrigger]',
+                    hostDirectives: [
+                        {
+                            directive: HlmContextMenuTrigger,
+                            inputs: ['disabled', 'align', 'side'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwContextMenuTrigger", required: true }] }], menuData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwContextMenuTriggerData", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+/** Container directive for context menu options, placed inside the context menu template. */
+class YuwContextMenuDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuDirective, isStandalone: true, selector: "[yuwContextMenu]", hostDirectives: [{ directive: i2.HlmDropdownMenu, inputs: ["sideOffset", "sideOffset"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenu]',
+                    hostDirectives: [{ directive: HlmDropdownMenu, inputs: ['sideOffset'] }],
+                }]
+        }] });
+/** Interactive action item within a context menu. Place on a `<button>` element. */
+class YuwContextMenuItemDirective {
+    constructor() {
+        this._item = inject(CdkMenuItem, { host: true });
+        this.triggered = outputFromObservable(this._item.triggered);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuItemDirective, isStandalone: true, selector: "[yuwContextMenuItem]", outputs: { triggered: "triggered" }, hostDirectives: [{ directive: i2.HlmDropdownMenuItem, inputs: ["disabled", "disabled", "variant", "variant", "inset", "inset"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuItem]',
+                    hostDirectives: [{ directive: HlmDropdownMenuItem, inputs: ['disabled', 'variant', 'inset'] }],
+                }]
+        }], propDecorators: { triggered: [{ type: i0.Output, args: ["triggered"] }] } });
+/**
+ * Checkable action item within a context menu. Place on a `<button>` element and project a
+ * `<yuw-context-menu-checkbox-indicator />` to show the checkmark while checked.
+ *
+ * Toggling keeps the menu open (the helm default). The `checked` input drives the state; listen
+ * to `triggered` to flip it in the consumer.
+ *
+ * Usage:
+ * ```html
+ * <button yuwContextMenuCheckbox [checked]="showArchived()" (triggered)="toggleArchived()">
+ *   Show archived
+ *   <yuw-context-menu-checkbox-indicator />
+ * </button>
+ * ```
+ */
+class YuwContextMenuCheckboxDirective {
+    constructor() {
+        this._item = inject(CdkMenuItemCheckbox, { host: true });
+        this.checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.triggered = outputFromObservable(this._item.triggered);
+        effect(() => {
+            this._item.checked = this.checked();
+            this._item.disabled = this.disabled();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwContextMenuCheckboxDirective, isStandalone: true, selector: "[yuwContextMenuCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggered: "triggered" }, hostDirectives: [{ directive: i2.HlmDropdownMenuCheckbox, inputs: ["inset", "inset"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuCheckbox]',
+                    hostDirectives: [{ directive: HlmDropdownMenuCheckbox, inputs: ['inset'] }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggered: [{ type: i0.Output, args: ["triggered"] }] } });
+/**
+ * Single-select (radio) item within a context menu. Place on a `<button>` element inside a
+ * `[yuwContextMenuGroup]` and project a `<yuw-context-menu-radio-indicator />` to show the mark
+ * while selected.
+ *
+ * Selecting keeps the menu open (the helm default). The `checked` input drives the state; listen
+ * to `triggered` to set it in the consumer.
+ *
+ * Usage:
+ * ```html
+ * <div yuwContextMenuGroup>
+ *   <button yuwContextMenuRadio [checked]="order() === 'asc'" (triggered)="setOrder('asc')">
+ *     Ascending
+ *     <yuw-context-menu-radio-indicator />
+ *   </button>
+ * </div>
+ * ```
+ */
+class YuwContextMenuRadioDirective {
+    constructor() {
+        this._item = inject(CdkMenuItemRadio, { host: true });
+        this.checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.triggered = outputFromObservable(this._item.triggered);
+        effect(() => {
+            this._item.checked = this.checked();
+            this._item.disabled = this.disabled();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwContextMenuRadioDirective, isStandalone: true, selector: "[yuwContextMenuRadio]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggered: "triggered" }, hostDirectives: [{ directive: i2.HlmDropdownMenuRadio }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuRadioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuRadio]',
+                    hostDirectives: [HlmDropdownMenuRadio],
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggered: [{ type: i0.Output, args: ["triggered"] }] } });
+/** Section heading/label within a context menu. */
+class YuwContextMenuLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuLabelDirective, isStandalone: true, selector: "[yuwContextMenuLabel]", hostDirectives: [{ directive: i2.HlmDropdownMenuLabel, inputs: ["inset", "inset"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuLabel]',
+                    hostDirectives: [{ directive: HlmDropdownMenuLabel, inputs: ['inset'] }],
+                }]
+        }] });
+/** Group container for grouping context menu items (required around `[yuwContextMenuRadio]` sets). */
+class YuwContextMenuGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuGroupDirective, isStandalone: true, selector: "[yuwContextMenuGroup]", hostDirectives: [{ directive: i2.HlmDropdownMenuGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuGroup]',
+                    hostDirectives: [HlmDropdownMenuGroup],
+                }]
+        }] });
+/** Visual divider line between context menu items. */
+class YuwContextMenuSeparatorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSeparatorDirective, isStandalone: true, selector: "[yuwContextMenuSeparator]", hostDirectives: [{ directive: i2.HlmDropdownMenuSeparator }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuSeparator]',
+                    hostDirectives: [HlmDropdownMenuSeparator],
+                }]
+        }] });
+/** Text hint for a keyboard shortcut displayed alongside a context menu item. */
+class YuwContextMenuShortcutDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuShortcutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuShortcutDirective, isStandalone: true, selector: "[yuwContextMenuShortcut]", hostDirectives: [{ directive: i2.HlmDropdownMenuShortcut }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuShortcutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuShortcut]',
+                    hostDirectives: [HlmDropdownMenuShortcut],
+                }]
+        }] });
+/** Container directive for nesting a sub-level context menu. */
+class YuwContextMenuSubDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwContextMenuSubDirective, isStandalone: true, selector: "[yuwContextMenuSub]", hostDirectives: [{ directive: i2.HlmDropdownMenuSub }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuSub]',
+                    hostDirectives: [HlmDropdownMenuSub],
+                }]
+        }] });
+/**
+ * Trigger item for expanding a nested sub-context menu.
+ *
+ * Usage:
+ * ```html
+ * <button [yuwContextMenuSubTrigger]="subMenu">
+ *   More tools
+ *   <yuw-context-menu-sub-indicator />
+ * </button>
+ * ```
+ */
+class YuwContextMenuSubTriggerDirective {
+    constructor() {
+        this._trigger = inject(CdkMenuTrigger, { host: true });
+        this.menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'yuwContextMenuSubTrigger' });
+        effect(() => {
+            this._trigger.menuTemplateRef = this.menu();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwContextMenuSubTriggerDirective, isStandalone: true, selector: "[yuwContextMenuSubTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "yuwContextMenuSubTrigger", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i2.HlmDropdownMenuSubTrigger, inputs: ["align", "align", "side", "side"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwContextMenuSubTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwContextMenuSubTrigger]',
+                    hostDirectives: [{ directive: HlmDropdownMenuSubTrigger, inputs: ['align', 'side'] }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwContextMenuSubTrigger", required: true }] }] } });
+/** Every context-menu part, for a consumer's `imports`. */
+const YuwContextMenuImports = [
+    YuwContextMenuTriggerDirective,
+    YuwContextMenuDirective,
+    YuwContextMenuItemDirective,
+    YuwContextMenuCheckboxDirective,
+    YuwContextMenuCheckboxIndicatorComponent,
+    YuwContextMenuRadioDirective,
+    YuwContextMenuRadioIndicatorComponent,
+    YuwContextMenuLabelDirective,
+    YuwContextMenuGroupDirective,
+    YuwContextMenuSeparatorDirective,
+    YuwContextMenuShortcutDirective,
+    YuwContextMenuSubDirective,
+    YuwContextMenuSubTriggerDirective,
+    YuwContextMenuSubIndicatorComponent,
+];
+
+/** Module-level counter for the fallback trigger id, so external labels always have a stable,
+ * unique target even when the consumer doesn't pass `buttonId`. */
+let nextUniqueId = 0;
+/**
+ * Date picker control supporting single date, date range, multiple dates, or month/year pick modes.
+ *
+ * Inputs / Models:
+ * - `mode`: Selection mode (`'single'`, `'range'`, `'multiple'`, `'monthYear'`). Default is `'single'`.
+ * - `value`: Two-way selected date(s) (`YuwDatepickerValue`). Shape follows `mode`. Emits
+ *   `valueChange` on every selection change.
+ * - `disabled`: Disables the control.
+ * - `placeholder`: Text shown on the trigger while nothing is selected.
+ * - `minDate`: Earliest selectable date.
+ * - `maxDate`: Latest selectable date.
+ * - `captionLayout`: Calendar caption mode — `'dropdown'` adds month/year dropdowns for faster year navigation. Default is `'label'`.
+ *   Ignored in `monthYear` mode: that picker renders its own month/year grid and has no calendar caption.
+ * - `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.
+ * - `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.
+ *   In `range`/`multiple` modes it formats each date, joined with `' - '` / `', '`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-datepicker [(value)]="selectedDate" placeholder="Select date..." />
+ * <yuw-datepicker mode="range" [(value)]="dateRange" />
+ * <yuw-datepicker mode="monthYear" [(value)]="selectedMonth" />
+ * ```
+ */
+class YuwDatepickerComponent extends YuwValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
+        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.buttonId = input(undefined, ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.formatDate = input(undefined, ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
+        this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._generatedButtonId = `yuw-datepicker-${++nextUniqueId}`;
+        this._buttonId = computed(() => this.buttonId() ?? this._generatedButtonId, ...(ngDevMode ? [{ debugName: "_buttonId" }] : /* istanbul ignore next */ []));
+        this._singleConfig = injectHlmDatePickerConfig();
+        this._rangeConfig = injectHlmDateRangePickerConfig();
+        this._multiConfig = injectHlmDatePickerMultiConfig();
+        this._monthYearConfig = injectHlmMonthYearPickerConfig();
+        this._formatSingle = computed(() => this.formatDate() ?? this._singleConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatSingle" }] : /* istanbul ignore next */ []));
+        this._formatMonthYear = computed(() => this.formatDate() ?? this._monthYearConfig.formatDate, ...(ngDevMode ? [{ debugName: "_formatMonthYear" }] : /* istanbul ignore next */ []));
+        this._formatRange = computed(() => {
+            const format = this.formatDate();
+            if (!format) {
+                return this._rangeConfig.formatDates;
+            }
+            return ([start, end]) => [start, end]
+                .filter((date) => date !== null)
+                .map(format)
+                .join(' - ');
+        }, ...(ngDevMode ? [{ debugName: "_formatRange" }] : /* istanbul ignore next */ []));
+        this._formatMulti = computed(() => {
+            const format = this.formatDate();
+            if (!format) {
+                return this._multiConfig.formatDates;
+            }
+            return (dates) => dates.map(format).join(', ');
+        }, ...(ngDevMode ? [{ debugName: "_formatMulti" }] : /* istanbul ignore next */ []));
+        this._singleValue = computed(() => {
+            const value = this.value();
+            return Array.isArray(value) ? undefined : (value ?? undefined);
+        }, ...(ngDevMode ? [{ debugName: "_singleValue" }] : /* istanbul ignore next */ []));
+        this._rangeValue = computed(() => {
+            const value = this.value();
+            return Array.isArray(value) && value.length === 2 ? value : undefined;
+        }, ...(ngDevMode ? [{ debugName: "_rangeValue" }] : /* istanbul ignore next */ []));
+        this._multipleValue = computed(() => {
+            const value = this.value();
+            if (!value) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        }, ...(ngDevMode ? [{ debugName: "_multipleValue" }] : /* istanbul ignore next */ []));
+    }
+    _emptyValue() {
+        return this.mode() === 'multiple' ? [] : null;
+    }
+    onValueChange(next) {
+        this._commit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", 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 [date]=\"_rangeValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatRange()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi [date]=\"_multipleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\"\n                           [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatMulti()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [align]=\"align()\" [formatDate]=\"_formatMonthYear()\" (dateChange)=\"onValueChange($event)\"\n                           (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                     [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDate]=\"_formatSingle()\"\n                     (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$b.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$b.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$b.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker [date]=\"_rangeValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatRange()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi [date]=\"_multipleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\"\n                           [maxDate]=\"maxDate()\"\n                           [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDates]=\"_formatMulti()\"\n                           (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                           [align]=\"align()\" [formatDate]=\"_formatMonthYear()\" (dateChange)=\"onValueChange($event)\"\n                           (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker [date]=\"_singleValue()\" [disabled]=\"_disabled()\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\"\n                     [captionLayout]=\"captionLayout()\" [align]=\"align()\" [formatDate]=\"_formatSingle()\"\n                     (dateChange)=\"onValueChange($event)\" (focusout)=\"_onBlur()\">\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"userClass()\"\n                               [forceInvalid]=\"invalid()\">{{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }] } });
+
+/**
+ * Outer wrapper container directive for responsive HTML table scroll container.
+ *
+ * Usage:
+ * ```html
+ * <div yuwTableContainer>
+ *   <table yuwTable>
+ *     <thead yuwTHead>
+ *       <tr yuwTr><th yuwTh>Header</th></tr>
+ *     </thead>
+ *     <tbody yuwTBody>
+ *       <tr yuwTr><td yuwTd>Data cell</td></tr>
+ *     </tbody>
+ *   </table>
+ * </div>
+ * ```
+ */
+class YuwTableContainerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTableContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTableContainerDirective, isStandalone: true, selector: "[yuwTableContainer]", hostDirectives: [{ directive: i1$c.HlmTableContainer }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTableContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTableContainer]',
+                    hostDirectives: [HlmTableContainer],
+                }]
+        }] });
+/** Table element styling directive applied to native `<table>`. */
+class YuwTableDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTableDirective, isStandalone: true, selector: "[yuwTable]", hostDirectives: [{ directive: i1$c.HlmTable }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTable]',
+                    hostDirectives: [HlmTable],
+                }]
+        }] });
+/** Table header container directive applied to native `<thead>`. */
+class YuwTHeadDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTHeadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTHeadDirective, isStandalone: true, selector: "[yuwTHead]", hostDirectives: [{ directive: i1$c.HlmTHead }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTHeadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTHead]',
+                    hostDirectives: [HlmTHead],
+                }]
+        }] });
+/** Table body container directive applied to native `<tbody>`. */
+class YuwTBodyDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTBodyDirective, isStandalone: true, selector: "[yuwTBody]", hostDirectives: [{ directive: i1$c.HlmTBody }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTBody]',
+                    hostDirectives: [HlmTBody],
+                }]
+        }] });
+/** Table footer container directive applied to native `<tfoot>`. */
+class YuwTFootDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTFootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTFootDirective, isStandalone: true, selector: "[yuwTFoot]", hostDirectives: [{ directive: i1$c.HlmTFoot }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTFootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTFoot]',
+                    hostDirectives: [HlmTFoot],
+                }]
+        }] });
+/** Table row directive applied to native `<tr>`. */
+class YuwTrDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTrDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTrDirective, isStandalone: true, selector: "[yuwTr]", hostDirectives: [{ directive: i1$c.HlmTr }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTrDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTr]',
+                    hostDirectives: [HlmTr],
+                }]
+        }] });
+/** Table header cell directive applied to native `<th>`. */
+class YuwThDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwThDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwThDirective, isStandalone: true, selector: "[yuwTh]", hostDirectives: [{ directive: i1$c.HlmTh }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwThDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTh]',
+                    hostDirectives: [HlmTh],
+                }]
+        }] });
+/** Table data cell directive applied to native `<td>`. */
+class YuwTdDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTdDirective, isStandalone: true, selector: "[yuwTd]", hostDirectives: [{ directive: i1$c.HlmTd }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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.8", ngImport: i0, type: YuwCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwCaptionDirective, isStandalone: true, selector: "[yuwCaption]", hostDirectives: [{ directive: i1$c.HlmCaption }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwCaptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwCaption]',
+                    hostDirectives: [HlmCaption],
+                }]
+        }] });
+/** Every table part, for a consumer's `imports`. */
+const YuwTableImports = [
+    YuwTableContainerDirective,
+    YuwTableDirective,
+    YuwTHeadDirective,
+    YuwTBodyDirective,
+    YuwTFootDirective,
+    YuwTrDirective,
+    YuwThDirective,
+    YuwTdDirective,
+    YuwCaptionDirective,
+];
+
+const YUW_DATATABLE_FEATURES = {
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+};
+/**
+ * Full-featured data table component supporting sorting, filtering, pagination, row selection,
+ * loading skeleton state, and column visibility.
+ *
+ * Inputs / Models:
+ * - `columns`: Column definitions array (`YuwDatatableColumnDef<TData>[]`). Default is `[]`.
+ * - `data`: Row data array (`TData[]`). Default is `[]`.
+ * - `sortable`: Enables click-to-sort on headers whose column allows it.
+ * - `paginated`: Enables the pagination row model and renders footer controls.
+ * - `selectable`: Enables the row-selection state. The checkbox column itself is *not* rendered
+ *   by the datatable — the consumer provides it as a display column (`id: 'select'`,
+ *   `flexRenderComponent(...)` header/cell that call TanStack's own toggle handlers), as in the
+ *   demo's data page.
+ * - `emptyText`: Message shown when data is empty or filtered to nothing. User-facing text the
+ *   consuming app is responsible for translating.
+ * - `loading`: Renders skeleton rows instead of data. The pagination footer stays visible (with
+ *   its buttons disabled) so the layout doesn't jump.
+ * - `loadingRows`: Number of skeleton rows to show while `loading`. Default is `5`.
+ * - `previousPageLabel` (required): Accessible name for the footer's previous-page button.
+ *   User-facing text the consuming app is responsible for translating.
+ * - `nextPageLabel` (required): Accessible name for the footer's next-page button. User-facing
+ *   text the consuming app is responsible for translating.
+ * - `caption`: Optional `<caption>` text for the table. User-facing text the consuming app is
+ *   responsible for translating; when absent, no caption is rendered.
+ * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
+ *   `display: contents`, so a plain `class` on `<yuw-datatable>` would never reach the table.
+ * - `sorting`: Two-way sorting state (`SortingState`).
+ * - `columnFilters`: Two-way column filters state (`ColumnFiltersState`).
+ * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
+ * - `rowSelection`: Two-way row selection state (`RowSelectionState`).
+ * - `pagination`: Two-way pagination state (`PaginationState`). Default is `{ pageIndex: 0, pageSize: 10 }`.
+ *
+ * Outputs:
+ * - `selectedRowsChange`: Emits the selected row objects (`TData[]`) on selection changes. The
+ *   initial state does not emit — only actual changes after mount.
+ *
+ * Usage:
+ * ```html
+ * <yuw-datatable
+ *   [columns]="columns"
+ *   [data]="users"
+ *   [(sorting)]="sorting"
+ *   paginated
+ *   selectable
+ *   previousPageLabel="Página anterior"
+ *   nextPageLabel="Página siguiente"
+ *   (selectedRowsChange)="onSelect($event)"
+ * />
+ * ```
+ */
+class YuwDatatableComponent {
+    constructor() {
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.sortable = input(false, { ...(ngDevMode ? { debugName: "sortable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.paginated = input(false, { ...(ngDevMode ? { debugName: "paginated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.loadingRows = input(5, { ...(ngDevMode ? { debugName: "loadingRows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.previousPageLabel = input.required(...(ngDevMode ? [{ debugName: "previousPageLabel" }] : /* istanbul ignore next */ []));
+        this.nextPageLabel = input.required(...(ngDevMode ? [{ debugName: "nextPageLabel" }] : /* istanbul ignore next */ []));
+        this.caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+        this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
+        this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
+        this.columnFilters = model([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
+        this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
+        this.rowSelection = model({}, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+        this.pagination = model({ pageIndex: 0, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        this._options = () => ({
+            features: {
+                ...YUW_DATATABLE_FEATURES,
+                coreRowModel: createCoreRowModel(),
+                filteredRowModel: createFilteredRowModel(),
+                ...(this.sortable()
+                    ? { sortedRowModel: createSortedRowModel(), sortFns }
+                    : {}),
+                ...(this.paginated() ? { paginatedRowModel: createPaginatedRowModel() } : {}),
+            },
+            data: this.data(),
+            columns: this.columns(),
+            enableRowSelection: this.selectable(),
+            state: {
+                sorting: this.sorting(),
+                columnFilters: this.columnFilters(),
+                columnVisibility: this.columnVisibility(),
+                rowSelection: this.rowSelection(),
+                pagination: this.pagination(),
+            },
+            onSortingChange: (updater) => this.sorting.update((current) => (typeof updater === 'function' ? updater(current) : updater)),
+            onColumnFiltersChange: (updater) => this.columnFilters.update((current) => (typeof updater === 'function' ? updater(current) : updater)),
+            onColumnVisibilityChange: (updater) => this.columnVisibility.update((current) => (typeof updater === 'function' ? updater(current) : updater)),
+            onPaginationChange: (updater) => this.pagination.update((current) => (typeof updater === 'function' ? updater(current) : updater)),
+            onRowSelectionChange: (updater) => this.rowSelection.update((current) => (typeof updater === 'function' ? updater(current) : updater)),
+        });
+        this.table = injectTable(this._options);
+        this._selectedRows = computed(() => {
+            this.rowSelection();
+            return this.table.getSelectedRowModel().rows.map((row) => row.original);
+        }, ...(ngDevMode ? [{ debugName: "_selectedRows" }] : /* istanbul ignore next */ []));
+        this.selectedRowsChange = outputFromObservable(toObservable(this._selectedRows).pipe(skip(1)));
+        this._isEmpty = computed(() => !this.loading() && this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this._columnCount = computed(() => this.table.getVisibleLeafColumns().length, ...(ngDevMode ? [{ debugName: "_columnCount" }] : /* istanbul ignore next */ []));
+        this._skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_skeletonRows" }] : /* istanbul ignore next */ []));
+        this._tableClass = computed(() => cn(this.tableClass()), ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
+        this._ariaSort = {
+            asc: 'ascending',
+            desc: 'descending',
+        };
+    }
+    /**
+     * Applies the real options once, after inputs are set.
+     *
+     * `injectTable` constructs the table from a `queueMicrotask` that can fire before Angular has
+     * assigned any input, so it captures `columns: []`/`data: []`. Its own options effect then
+     * *skips its first run* (an `isMount` guard inside the library) — and that skipped run is
+     * exactly the one carrying the real values. Without this the table stays permanently empty no
+     * matter what is bound.
+     *
+     * This runs in `ngOnInit` rather than a constructor `effect` because the effect fires in the
+     * same too-early window and re-applies the same empty options; `ngOnInit` is the first point
+     * where inputs are guaranteed present. Later changes are handled by the library's own effect,
+     * which by then is past its mount guard.
+     */
+    ngOnInit() {
+        const options = this._options();
+        this.table.setOptions((previous) => ({ ...previous, ...options }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", 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 }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\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>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\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 yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\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 justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\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: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwButtonComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\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>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\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 yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\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 justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", 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 }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+
+/**
+ * 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.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.fallback = input(undefined, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        this.badge = input(false, { ...(ngDevMode ? { debugName: "badge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.groupCount = input(undefined, ...(ngDevMode ? [{ debugName: "groupCount" }] : /* 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.8", ngImport: i0, type: YuwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAvatarComponent, isStandalone: true, selector: "yuw-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", 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 }, 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 [ngTemplateOutlet]=\"avatarBox\"\n                    [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"/>\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"/>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$d.HlmAvatar, selector: "hlm-avatar", inputs: ["size"] }, { kind: "directive", type: i1$d.HlmAvatarBadge, selector: "[hlmAvatarBadge],hlm-avatar-badge" }, { kind: "directive", type: i1$d.HlmAvatarFallback, selector: "[hlmAvatarFallback]", exportAs: ["hlmAvatarFallback"] }, { kind: "directive", type: i1$d.HlmAvatarGroup, selector: "[hlmAvatarGroup],hlm-avatar-group" }, { kind: "directive", type: i1$d.HlmAvatarGroupCount, selector: "[hlmAvatarGroupCount],hlm-avatar-group-count" }, { kind: "directive", type: i1$d.HlmAvatarImage, selector: "img[hlmAvatarImage]", exportAs: ["hlmAvatarImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 [ngTemplateOutlet]=\"avatarBox\"\n                    [ngTemplateOutletContext]=\"{ src: entry.src, alt: entry.alt, fallback: entry.fallback, showBadge: false }\"/>\n    }\n\n    @if (groupCount()) {\n      <span hlmAvatarGroupCount>{{ groupCount() }}</span>\n    }\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"avatarBox\"\n                [ngTemplateOutletContext]=\"{ src: src(), alt: alt(), fallback: fallback(), showBadge: badge() }\"/>\n}\n" }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCount", 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.
+ *
+ * Usage:
+ * ```html
+ * <div yuwItem>
+ *   <div yuwItemMedia><yuw-avatar fallback="JD" alt="John Doe" /></div>
+ *   <div yuwItemContent>
+ *     <h4 yuwItemTitle>John Doe</h4>
+ *     <p yuwItemDescription>Software Engineer</p>
+ *   </div>
+ *   <div yuwItemActions><yuw-button size="sm">Follow</yuw-button></div>
+ * </div>
+ * ```
+ */
+class YuwItemDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemDirective, isStandalone: true, selector: "[yuwItem], yuw-item", hostDirectives: [{ directive: i1$e.HlmItem, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItem], yuw-item',
+                    hostDirectives: [{ directive: HlmItem, inputs: ['variant', 'size'] }],
+                }]
+        }] });
+/** Header slot directive for an item container. */
+class YuwItemHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemHeaderDirective, isStandalone: true, selector: "[yuwItemHeader], yuw-item-header", hostDirectives: [{ directive: i1$e.HlmItemHeader }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemHeader], yuw-item-header',
+                    hostDirectives: [HlmItemHeader],
+                }]
+        }] });
+/** Leading media slot directive (for icons, avatars, or images) at the start of an item. Supports `variant` (`'default'`, `'icon'`, `'image'`). */
+class YuwItemMediaDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemMediaDirective, isStandalone: true, selector: "[yuwItemMedia], yuw-item-media", hostDirectives: [{ directive: i1$e.HlmItemMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemMedia], yuw-item-media',
+                    hostDirectives: [{ directive: HlmItemMedia, inputs: ['variant'] }],
+                }]
+        }] });
+/** Main text content container directive for an item. */
+class YuwItemContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemContentDirective, isStandalone: true, selector: "[yuwItemContent], yuw-item-content", hostDirectives: [{ directive: i1$e.HlmItemContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemContent], yuw-item-content',
+                    hostDirectives: [HlmItemContent],
+                }]
+        }] });
+/** Title heading directive for an item. */
+class YuwItemTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemTitleDirective, isStandalone: true, selector: "[yuwItemTitle], yuw-item-title", hostDirectives: [{ directive: i1$e.HlmItemTitle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemTitle], yuw-item-title',
+                    hostDirectives: [HlmItemTitle],
+                }]
+        }] });
+/** Subtitle or description paragraph directive for an item. */
+class YuwItemDescriptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemDescriptionDirective, isStandalone: true, selector: "[yuwItemDescription], yuw-item-description", hostDirectives: [{ directive: i1$e.HlmItemDescription }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemDescription], yuw-item-description',
+                    hostDirectives: [HlmItemDescription],
+                }]
+        }] });
+/** Trailing action controls slot directive (for buttons, switches, or menu triggers) at the end of an item. */
+class YuwItemActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemActionsDirective, isStandalone: true, selector: "[yuwItemActions], yuw-item-actions", hostDirectives: [{ directive: i1$e.HlmItemActions }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemActions], yuw-item-actions',
+                    hostDirectives: [HlmItemActions],
+                }]
+        }] });
+/** Footer slot directive for an item. */
+class YuwItemFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemFooterDirective, isStandalone: true, selector: "[yuwItemFooter], yuw-item-footer", hostDirectives: [{ directive: i1$e.HlmItemFooter }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemFooter], yuw-item-footer',
+                    hostDirectives: [HlmItemFooter],
+                }]
+        }] });
+/** Container directive for grouping multiple item rows together into a list card or bordered group. */
+class YuwItemGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemGroupDirective, isStandalone: true, selector: "[yuwItemGroup], yuw-item-group", hostDirectives: [{ directive: i1$e.HlmItemGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemGroup], yuw-item-group',
+                    hostDirectives: [HlmItemGroup],
+                }]
+        }] });
+/**
+ * Visual separator line between items inside a group. Accepts `orientation` (`'horizontal'` or
+ * `'vertical'`), reaching the underlying `BrnSeparator`, which owns the `role`,
+ * `aria-orientation` and `data-orientation` attributes. Extends `HlmItemSeparator` (instead of
+ * composing it via `hostDirectives`) because `orientation` is re-exposed by the helm from
+ * `BrnSeparator` through its own `hostDirectives`, and host-directive forwarding is not
+ * transitive (NG2017).
+ */
+class YuwItemSeparatorDirective extends HlmItemSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwItemSeparatorDirective, isStandalone: true, selector: "[yuwItemSeparator], yuw-item-separator", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwItemSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwItemSeparator], yuw-item-separator',
+                }]
+        }] });
+/** Every item part, for a consumer's `imports`. */
+const YuwItemImports = [
+    YuwItemDirective,
+    YuwItemHeaderDirective,
+    YuwItemMediaDirective,
+    YuwItemContentDirective,
+    YuwItemTitleDirective,
+    YuwItemDescriptionDirective,
+    YuwItemActionsDirective,
+    YuwItemFooterDirective,
+    YuwItemGroupDirective,
+    YuwItemSeparatorDirective,
+];
+
+/**
+ * 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.8", ngImport: i0, type: YuwSheetFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSheetFooterDirective, isStandalone: true, selector: "[yuwSheetFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSheetFooter]',
+                }]
+        }] });
+
+/**
+ * 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`.
+ * - `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.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* 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.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
+    }
+    onStateChanged(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", 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 }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmSheetTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </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      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-3 top-3\" hlmSheetClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$f.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "directive", type: i1$f.HlmSheetClose, selector: "button[hlmSheetClose]" }, { kind: "component", type: i1$f.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$f.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$f.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$f.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$f.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$f.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "directive", type: i1$f.HlmSheetTrigger, selector: "button[hlmSheetTrigger]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { 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.8", ngImport: i0, type: YuwSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmSheetTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </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      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-3 top-3\" hlmSheetClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
+const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
+
+/**
+ * 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`.
+ * - `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.
+ * - `triggerSize`: Button size for the trigger button.
+ *
+ * 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.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* 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.8", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <button hlmBtn hlmPopoverTrigger [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </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$g.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$g.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$g.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$g.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$g.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$g.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "directive", type: i1$g.HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, HlmButton], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <button hlmBtn hlmPopoverTrigger [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </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: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }] } });
+
+/**
+ * Tooltip directive applied directly to the element that should show a hint on hover/focus.
+ *
+ * Inputs:
+ * - `yuwTooltip`: Tooltip text (or `TemplateRef`) to display. User-facing text the consuming app
+ *   is responsible for translating.
+ * - `position`: Side the tooltip opens on (`'top'`, `'bottom'`, `'left'`, `'right'`). Default is `'top'`.
+ * - `showDelay`: Milliseconds before the tooltip opens on hover. Defaults to the Brain tooltip
+ *   config default (`150`).
+ * - `hideDelay`: Milliseconds before the tooltip closes after the pointer leaves. Defaults to the
+ *   Brain tooltip config default (`100`).
+ * - `tooltipDisabled`: Disables the tooltip entirely.
+ *
+ * Usage:
+ * ```html
+ * <button yuwTooltip="Save changes" hlmBtn>Save</button>
+ * <yuw-button [yuwTooltip]="helpText" position="right">Help</yuw-button>
+ * ```
+ */
+class YuwTooltipDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwTooltipDirective, isStandalone: true, selector: "[yuwTooltip]", providers: [
+            provideBrnTooltipDefaultOptions({
+                svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+            }),
+        ], hostDirectives: [{ directive: i1$h.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwTooltip]',
+                    providers: [
+                        provideBrnTooltipDefaultOptions({
+                            svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+                            tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+                            arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
+                        }),
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: BrnTooltip,
+                            inputs: ['brnTooltip: yuwTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Indeterminate loading spinner.
+ *
+ * Inputs:
+ * - `label`: Accessible label announced by screen readers. User-facing text the consuming app is
+ *   responsible for translating.
+ * - `icon`: Name of a registered icon to spin instead of the default loader.
+ *
+ * Usage:
+ * ```html
+ * <yuw-spinner label="Cargando" />
+ * ```
+ */
+class YuwSpinnerComponent {
+    constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.icon = input('lucideLoader2', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSpinnerComponent, isStandalone: true, selector: "yuw-spinner", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n", dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["icon", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-spinner', imports: [HlmSpinner], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-spinner [icon]=\"icon()\" [aria-label]=\"label()\"/>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+/**
+ * Global toast host. Mount once near the application root; individual toasts are dispatched
+ * through the `toast` API from `@spartan-ng/brain/sonner`.
+ *
+ * Inputs:
+ * - `richColors`: Enables per-type colored toasts (success, error, warning, info). Enabled by
+ *   default — a deliberate deviation from the spartan default (`false`).
+ * - `theme`: Toast color theme (`'light'`, `'dark'`, `'system'`). Default is `'light'` (the helm
+ *   default) — apps rendering in dark mode must pass `'dark'` (or `'system'`) explicitly.
+ * - `toastOptions`: Default options applied to every toast (classes, styles, etc.), passed
+ *   through to the underlying sonner toaster.
+ * - `position`: Screen corner the stack renders in. Default is `'bottom-right'`.
+ * - `duration`: Milliseconds a toast stays visible. Default is `4000`.
+ * - `visibleToasts`: Maximum simultaneously visible toasts. Default is `3`.
+ * - `closeButton`: Renders a dismiss button on each toast.
+ * - `expand`: Keeps the stack expanded instead of collapsed.
+ *
+ * Usage:
+ * ```html
+ * <yuw-toaster />
+ * ```
+ */
+class YuwToasterComponent {
+    constructor() {
+        this.richColors = input(true, { ...(ngDevMode ? { debugName: "richColors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.theme = input('light', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        this.toastOptions = input({}, ...(ngDevMode ? [{ debugName: "toastOptions" }] : /* istanbul ignore next */ []));
+        this.position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.duration = input(4000, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.visibleToasts = input(3, { ...(ngDevMode ? { debugName: "visibleToasts" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.closeButton = input(false, { ...(ngDevMode ? { debugName: "closeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.expand = input(false, { ...(ngDevMode ? { debugName: "expand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwToasterComponent, isStandalone: true, selector: "yuw-toaster", inputs: { richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"/>\n", dependencies: [{ kind: "component", type: HlmToaster, selector: "hlm-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwToasterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-toaster', imports: [HlmToaster], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-toaster\n  [richColors]=\"richColors()\"\n  [theme]=\"theme()\"\n  [toastOptions]=\"toastOptions()\"\n  [position]=\"position()\"\n  [duration]=\"duration()\"\n  [visibleToasts]=\"visibleToasts()\"\n  [closeButton]=\"closeButton()\"\n  [expand]=\"expand()\"/>\n" }]
+        }], propDecorators: { richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], visibleToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleToasts", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }] } });
+
+/**
+ * Marks a projected element as the trailing action of a `<yuw-alert>`, which pins it to the
+ * top-right corner of the alert.
+ */
+class YuwAlertActionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAlertActionDirective, isStandalone: true, selector: "[yuwAlertAction]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAlertAction]',
+                }]
+        }] });
+
+/**
+ * Marks projected rich content (links, `<strong>`, …) as the description of a `<yuw-alert>`.
+ *
+ * When present, the alert projects this content into its description slot instead of rendering
+ * the `description` string input. The content lands inside the element carrying the helm
+ * `alert-description` data-slot, so the alert's grid keeps positioning it correctly.
+ */
+class YuwAlertDescriptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAlertDescriptionDirective, isStandalone: true, selector: "[yuwAlertDescription]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAlertDescription]',
+                }]
+        }] });
+
+/**
+ * Marks projected rich content (links, `<strong>`, …) as the title of a `<yuw-alert>`.
+ *
+ * When present, the alert projects this content into its title slot instead of rendering the
+ * `title` string input. The content lands inside the element carrying the helm `alert-title`
+ * data-slot, so the alert's grid keeps positioning it correctly.
+ */
+class YuwAlertTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAlertTitleDirective, isStandalone: true, selector: "[yuwAlertTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAlertTitle]',
+                }]
+        }] });
+
+/**
+ * Inline, non-blocking message panel for status and validation feedback.
+ *
+ * Inputs:
+ * - `variant`: Visual tone (`'default'`, `'destructive'`). Default is `'default'`.
+ * - `title`: Heading text. User-facing text the consuming app is responsible for translating.
+ *   Ignored when a `[yuwAlertTitle]` slot is projected.
+ * - `description`: Body text. User-facing text the consuming app is responsible for translating.
+ *   Ignored when a `[yuwAlertDescription]` slot is projected.
+ * - `class`: Classes forwarded to the inner `hlm-alert` panel (the host is `display: contents`,
+ *   so they would otherwise never reach the rendered element). The consumer's classes win over
+ *   the alert's own styling.
+ *
+ * Content slots:
+ * - `[yuwAlertIcon]`: Leading icon.
+ * - `[yuwAlertTitle]`: Rich title content (links, `<strong>`, …). Replaces the `title` input.
+ * - `[yuwAlertDescription]`: Rich description content. Replaces the `description` input.
+ * - `[yuwAlertAction]`: Trailing action control, pinned to the top-right corner.
+ *
+ * Usage:
+ * ```html
+ * <yuw-alert variant="destructive" title="Pago rechazado" description="Revisa los datos de la tarjeta.">
+ *   <ng-icon yuwAlertIcon name="lucideTriangleAlert" />
+ *   <yuw-button yuwAlertAction size="sm" variant="ghost">Reintentar</yuw-button>
+ * </yuw-alert>
+ *
+ * <yuw-alert>
+ *   <span yuwAlertTitle>Condiciones <strong>actualizadas</strong></span>
+ *   <span yuwAlertDescription>Consulta los <a href="/cambios">cambios</a> antes de continuar.</span>
+ * </yuw-alert>
+ * ```
+ */
+class YuwAlertComponent {
+    constructor() {
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.hasAction = contentChild(YuwAlertActionDirective, ...(ngDevMode ? [{ debugName: "hasAction" }] : /* istanbul ignore next */ []));
+        this.titleSlot = contentChild(YuwAlertTitleDirective, ...(ngDevMode ? [{ debugName: "titleSlot" }] : /* istanbul ignore next */ []));
+        this.descriptionSlot = contentChild(YuwAlertDescriptionDirective, ...(ngDevMode ? [{ debugName: "descriptionSlot" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertComponent, isStandalone: true, selector: "yuw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasAction", first: true, predicate: YuwAlertActionDirective, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: YuwAlertTitleDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: YuwAlertDescriptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\"/>\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\"/>\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\"/>\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content/>\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\"/>\n    </div>\n  }\n</hlm-alert>\n", dependencies: [{ kind: "directive", type: HlmAlert, selector: "hlm-alert,[hlmAlert]", inputs: ["variant"] }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]" }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDescription]" }, { kind: "directive", type: HlmAlertAction, selector: "[hlmAlertAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-alert', imports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert [variant]=\"variant()\" [class]=\"userClass()\">\n  <ng-content select=\"[yuwAlertIcon]\"/>\n\n  @if (titleSlot()) {\n    <div hlmAlertTitle>\n      <ng-content select=\"[yuwAlertTitle]\"/>\n    </div>\n  } @else if (title()) {\n    <div hlmAlertTitle>{{ title() }}</div>\n  }\n\n  @if (descriptionSlot()) {\n    <div hlmAlertDescription>\n      <ng-content select=\"[yuwAlertDescription]\"/>\n    </div>\n  } @else if (description()) {\n    <div hlmAlertDescription>{{ description() }}</div>\n  }\n\n  <ng-content/>\n\n  @if (hasAction()) {\n    <div hlmAlertAction>\n      <ng-content select=\"[yuwAlertAction]\"/>\n    </div>\n  }\n</hlm-alert>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hasAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertActionDirective), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertTitleDirective), { isSignal: true }] }], descriptionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDescriptionDirective), { isSignal: true }] }] } });
+const YuwAlertImports = [
+    YuwAlertComponent,
+    YuwAlertActionDirective,
+    YuwAlertTitleDirective,
+    YuwAlertDescriptionDirective,
+];
+
+/**
+ * Marks an element as the dialog's footer content, projected into the footer slot.
+ * Its presence is also what makes the footer render at all — without it the dialog
+ * shows no empty footer strip.
+ */
+class YuwDialogFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwDialogFooterDirective, isStandalone: true, selector: "[yuwDialogFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwDialogFooter]',
+                }]
+        }] });
+
+/**
+ * Modal dialog overlay for focused tasks and forms.
+ *
+ * Accessibility: provide either `title` or `ariaLabel` — a modal without an accessible name is
+ * announced as an anonymous dialog by screen readers.
+ *
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state. Drive via `[(open)]` to control it programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `title`: Header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Header description text. User-facing text the consuming app is responsible for translating.
+ * - `ariaLabel`: Accessible name for the dialog 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 dialog panel (e.g. `sm:max-w-lg` to widen it).
+ *   They win over the library defaults via `twMerge`.
+ * - `triggerVariant`: Button style variant for the trigger button. Default is `'outline'`.
+ * - `triggerSize`: Button size for the trigger button.
+ *
+ * Content slots:
+ * - `[yuwDialogTrigger]`: Trigger button content.
+ * - `[yuwDialogFooter]`: Footer actions (`YuwDialogFooterDirective`). The footer only renders when
+ *   this slot is filled.
+ *
+ * The projected body scrolls internally when it is taller than the viewport, like `<yuw-sheet>`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-dialog [(open)]="isOpen" title="Crear proyecto" description="Asigna un nombre para empezar." closeLabel="Cerrar">
+ *   <ng-container yuwDialogTrigger>Crear proyecto</ng-container>
+ *
+ *   <yuw-input [(value)]="name" label="Nombre" />
+ *
+ *   <div yuwDialogFooter>
+ *     <yuw-button (clicked)="save()">Guardar</yuw-button>
+ *   </div>
+ * </yuw-dialog>
+ * ```
+ */
+class YuwDialogComponent {
+    constructor() {
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.hasFooter = contentChild(YuwDialogFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+        this._dialogState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_dialogState" }] : /* istanbul ignore next */ []));
+    }
+    onStateChanged(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-2 inset-t-2\" hlmDialogClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$i.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$i.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$i.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$i.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$i.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$i.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$i.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "directive", type: i1$i.HlmDialogTrigger, selector: "button[hlmDialogTrigger],button[hlmDialogTriggerFor]" }, { kind: "directive", type: i1$i.HlmDialogClose, selector: "button[hlmDialogClose]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { 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.8", ngImport: i0, type: YuwDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-2 inset-t-2\" hlmDialogClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDialogFooterDirective), { isSignal: true }] }] } });
+const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
+
+/**
+ * Marks a projected element as the leading media of a `<yuw-alert-dialog>`, rendered in a
+ * highlighted square above or beside the title.
+ */
+class YuwAlertDialogMediaDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAlertDialogMediaDirective, isStandalone: true, selector: "[yuwAlertDialogMedia]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAlertDialogMedia]',
+                }]
+        }] });
+
+/**
+ * Blocking confirmation dialog for destructive or irreversible actions. Unlike `<yuw-dialog>` it
+ * cannot be dismissed by clicking the backdrop, so the user must pick one of the two actions.
+ *
+ * Inputs / Models:
+ * - `open`: Two-way open/closed state. Drive via `[(open)]` to control it programmatically.
+ * - `showTrigger`: Whether to render the trigger button. Set `false` when opening only via `[(open)]`.
+ * - `title`: Header title text. User-facing text the consuming app is responsible for translating.
+ * - `description`: Header description text. User-facing text the consuming app is responsible for translating.
+ * - `confirmLabel`: Label of the confirm action. User-facing text the consuming app is responsible for translating.
+ * - `cancelLabel`: Label of the cancel action. User-facing text the consuming app is responsible for translating.
+ * - `confirmVariant`: Button style variant for the confirm action. Use `'destructive'` for deletions.
+ * - `size`: Content width (`'sm'`, `'default'`). Default is `'default'`.
+ * - `triggerVariant`: Button style variant for the trigger button.
+ * - `triggerSize`: Button size for the trigger button.
+ *
+ * Outputs:
+ * - `confirmed`: Emitted when the confirm action is activated.
+ * - `cancelled`: Emitted only when the cancel button is activated — programmatic closes (setting
+ *   `open` to `false`) do not emit it.
+ *
+ * Content slots:
+ * - `[yuwAlertDialogTrigger]`: Trigger button content.
+ * - `[yuwAlertDialogMedia]`: Leading media/icon shown above or beside the title.
+ *
+ * Usage:
+ * ```html
+ * <yuw-alert-dialog
+ *   [(open)]="isOpen"
+ *   title="¿Eliminar factura?"
+ *   description="Esta acción no se puede deshacer."
+ *   confirmLabel="Eliminar"
+ *   cancelLabel="Cancelar"
+ *   confirmVariant="destructive"
+ *   (confirmed)="delete()" />
+ * ```
+ */
+class YuwAlertDialogComponent {
+    constructor() {
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.confirmLabel = input.required(...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+        this.cancelLabel = input.required(...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+        this.confirmVariant = input('default', ...(ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.confirmed = output();
+        this.cancelled = output();
+        this.hasMedia = contentChild(YuwAlertDialogMediaDirective, ...(ngDevMode ? [{ debugName: "hasMedia" }] : /* istanbul ignore next */ []));
+        this._dialogState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_dialogState" }] : /* istanbul ignore next */ []));
+    }
+    onStateChanged(state) {
+        this.open.set(state === 'open');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmAlertDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$j.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$j.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$j.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$j.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$j.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$j.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$j.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$j.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$j.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$j.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "directive", type: i1$j.HlmAlertDialogTrigger, selector: "button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-alert-dialog', imports: [...HlmAlertDialogImports, HlmButton], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmAlertDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }] } });
+
+/**
+ * Declares the content of a single `<yuw-tabs>` panel. Apply it to an `<ng-template>` and pass the
+ * id of the tab it belongs to, matching an entry in the `tabs` input.
+ *
+ * Usage:
+ * ```html
+ * <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
+ * ```
+ */
+class YuwTabPanelDirective {
+    constructor() {
+        this.tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'yuwTabPanel' });
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwTabPanelDirective, isStandalone: true, selector: "ng-template[yuwTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "yuwTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwTabPanel]',
+                }]
+        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
+
+/**
+ * Tabbed navigation between sibling panels.
+ *
+ * Triggers come from the `tabs` input; each panel's content is declared by the consumer as an
+ * `<ng-template yuwTabPanel="<id>">` whose id matches a tab. Panels are lazy: a panel's content
+ * is only instantiated the first time its tab becomes active (and stays alive, hidden, after
+ * switching away).
+ *
+ * Inputs / Models:
+ * - `tabs`: The tab definitions (`YuwTabItemDto[]`) rendered as triggers, in order.
+ * - `activeTab`: Two-way id of the selected tab. Drive via `[(activeTab)]` to control it
+ *   programmatically; listen to `activeTabChange` to react to activations.
+ * - `variant`: Trigger list style (`'default'` filled, `'line'` underlined). Default is `'default'`.
+ * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
+ * - `activationMode`: How keyboard focus activates tabs (`'automatic'` activates on focus,
+ *   `'manual'` requires Enter/Space). Default is `'automatic'`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-tabs [tabs]="tabs" [(activeTab)]="selected">
+ *   <ng-template yuwTabPanel="general">Contenido general</ng-template>
+ *   <ng-template yuwTabPanel="billing">Contenido de facturación</ng-template>
+ * </yuw-tabs>
+ * ```
+ */
+class YuwTabsComponent {
+    constructor() {
+        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+        this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    }
+    onTabActivated(tabId) {
+        this.activeTab.set(tabId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ 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()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</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$k.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$k.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$k.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$k.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$k.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\"/>\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }] } });
+
+/**
+ * Container directive for a single file attachment card.
+ *
+ * Accepts `state` (`'idle'`, `'uploading'`, `'processing'`, `'error'`, `'done'`), `size`
+ * (`'default'`, `'sm'`, `'xs'`) and `orientation` (`'horizontal'`, `'vertical'`), which drive the
+ * styling of every nested slot.
+ *
+ * Usage:
+ * ```html
+ * <div yuwAttachment state="uploading">
+ *   <div yuwAttachmentMedia><ng-icon name="lucideFileText" /></div>
+ *   <div yuwAttachmentContent>
+ *     <span yuwAttachmentTitle>informe.pdf</span>
+ *     <span yuwAttachmentDescription>2,4 MB</span>
+ *   </div>
+ *   <div yuwAttachmentActions>
+ *     <button yuwAttachmentAction><ng-icon name="lucideX" /></button>
+ *   </div>
+ * </div>
+ * ```
+ */
+class YuwAttachmentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDirective, isStandalone: true, selector: "[yuwAttachment], yuw-attachment", hostDirectives: [{ directive: i1$l.HlmAttachment, inputs: ["state", "state", "size", "size", "orientation", "orientation"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachment], yuw-attachment',
+                    hostDirectives: [{ directive: HlmAttachment, inputs: ['state', 'size', 'orientation'] }],
+                }]
+        }] });
+/** Scrollable, snapping row that lays out several attachment cards. */
+class YuwAttachmentGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentGroupDirective, isStandalone: true, selector: "[yuwAttachmentGroup], yuw-attachment-group", hostDirectives: [{ directive: i1$l.HlmAttachmentGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentGroup], yuw-attachment-group',
+                    hostDirectives: [HlmAttachmentGroup],
+                }]
+        }] });
+/** Leading media slot of an attachment, for a file-type icon or an image preview. Supports `variant` (`'icon'`, `'image'`). */
+class YuwAttachmentMediaDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentMediaDirective, isStandalone: true, selector: "[yuwAttachmentMedia], yuw-attachment-media", hostDirectives: [{ directive: i1$l.HlmAttachmentMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentMedia], yuw-attachment-media',
+                    hostDirectives: [{ directive: HlmAttachmentMedia, inputs: ['variant'] }],
+                }]
+        }] });
+/** Text content container of an attachment, holding its title and description. */
+class YuwAttachmentContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentContentDirective, isStandalone: true, selector: "[yuwAttachmentContent], yuw-attachment-content", hostDirectives: [{ directive: i1$l.HlmAttachmentContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentContent], yuw-attachment-content',
+                    hostDirectives: [HlmAttachmentContent],
+                }]
+        }] });
+/** File name of an attachment. Truncates and shimmers while the attachment is uploading or processing. */
+class YuwAttachmentTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTitleDirective, isStandalone: true, selector: "[yuwAttachmentTitle], yuw-attachment-title", hostDirectives: [{ directive: i1$l.HlmAttachmentTitle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentTitle], yuw-attachment-title',
+                    hostDirectives: [HlmAttachmentTitle],
+                }]
+        }] });
+/** Secondary line of an attachment, for file size, progress, or an error message. */
+class YuwAttachmentDescriptionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDescriptionDirective, isStandalone: true, selector: "[yuwAttachmentDescription], yuw-attachment-description", hostDirectives: [{ directive: i1$l.HlmAttachmentDescription }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentDescription], yuw-attachment-description',
+                    hostDirectives: [HlmAttachmentDescription],
+                }]
+        }] });
+/** Trailing container for an attachment's action buttons. */
+class YuwAttachmentActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentActionsDirective, isStandalone: true, selector: "[yuwAttachmentActions], yuw-attachment-actions", hostDirectives: [{ directive: i1$l.HlmAttachmentActions }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwAttachmentActions], yuw-attachment-actions',
+                    hostDirectives: [HlmAttachmentActions],
+                }]
+        }] });
+/**
+ * Icon-sized action button inside an attachment, such as remove or retry.
+ *
+ * Besides `type`, accepts the button `variant` and `size` (defaults `'ghost'` / `'icon-xs'`).
+ * Extends `HlmAttachmentAction` (instead of composing it via `hostDirectives`) because
+ * `variant`/`size` are inputs the helm only exposes from its own `HlmButton` host directive, and
+ * host-directive forwarding is not transitive (NG2017) — inheritance carries the whole surface
+ * over as real `HlmButton` inputs, so the cva variants resolve natively instead of being layered
+ * on top of the defaults. Angular does not inherit `providers`, so the helm's
+ * `provideBrnButtonConfig` defaults are mirrored here; keep them in sync with
+ * `helm/attachment/src/lib/hlm-attachment-action.ts` if the helm is regenerated.
+ */
+class YuwAttachmentActionDirective extends HlmAttachmentAction {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentActionDirective, isStandalone: true, selector: "button[yuwAttachmentAction]", providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[yuwAttachmentAction]',
+                    providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
+                }]
+        }] });
+/** Turns the whole attachment card into a single clickable target, layered under its actions. */
+class YuwAttachmentTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTriggerDirective, isStandalone: true, selector: "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", hostDirectives: [{ directive: i1$l.HlmAttachmentTrigger, inputs: ["type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]',
+                    hostDirectives: [{ directive: HlmAttachmentTrigger, inputs: ['type'] }],
+                }]
+        }] });
+
+/**
+ * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
+ * mobile, and reads its colors from the `--sidebar-*` theme tokens.
+ *
+ * Place it inside a `[yuwSidebarWrapper]` alongside a `<main yuwSidebarInset>`, and compose its
+ * inner structure with the `yuwSidebar*` directives. Open state is shared through
+ * `YuwSidebarService`, so `<yuw-sidebar-trigger>` works from anywhere in the page.
+ *
+ * Inputs:
+ * - `side`: Edge the sidebar is docked to (`'left'`, `'right'`). Default is `'left'`.
+ * - `variant`: Panel treatment (`'sidebar'` flush, `'floating'` card, `'inset'` inset page). Default is `'sidebar'`.
+ * - `collapsible`: Collapse behaviour (`'offcanvas'` slides away, `'icon'` shrinks to icons, `'none'` always open). Default is `'offcanvas'`.
+ * - `sidebarWidthMobile`: Width of the mobile slide-in sheet (any CSS length). Defaults to the helm sidebar config (`18rem`).
+ * - `sidebarContainerClass`: Extra classes merged onto the desktop fixed container (the helm merges them last, so they win).
+ *
+ * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
+ * them): `HlmSidebarMenuAction`, `HlmSidebarMenuSkeleton`, `HlmSidebarInput` and
+ * `HlmSidebarGroupAction`.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sidebar collapsible="icon">
+ *   <div yuwSidebarHeader>Yurest</div>
+ *   <div yuwSidebarContent>
+ *     <ul yuwSidebarMenu>
+ *       <li yuwSidebarMenuItem><a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a></li>
+ *     </ul>
+ *   </div>
+ * </yuw-sidebar>
+ * ```
+ */
+class YuwSidebarComponent {
+    constructor() {
+        this.config = injectHlmSidebarConfig();
+        this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        this.sidebarWidthMobile = input(this.config.sidebarWidthMobile, ...(ngDevMode ? [{ debugName: "sidebarWidthMobile" }] : /* istanbul ignore next */ []));
+        this.sidebarContainerClass = input('', ...(ngDevMode ? [{ debugName: "sidebarContainerClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content/>\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sidebar', imports: [HlmSidebar], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content/>\n</hlm-sidebar>\n" }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }] } });
+
+/**
+ * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
+ * inside `<main yuwSidebarInset>`, since the open state lives in `YuwSidebarService`.
+ *
+ * Inputs:
+ * - `label`: Screen-reader-only label for the button. User-facing text the consuming app is
+ *   responsible for translating.
+ *
+ * Usage:
+ * ```html
+ * <yuw-sidebar-trigger label="Alternar menú" />
+ * ```
+ */
+class YuwSidebarTriggerComponent {
+    constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sidebar-trigger', imports: [HlmSidebarTrigger], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+
+/**
+ * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
+ * the `--sidebar-width` / `--sidebar-width-icon` custom properties via its `sidebarWidth` and
+ * `sidebarWidthIcon` inputs.
+ *
+ * Usage:
+ * ```html
+ * <div yuwSidebarWrapper>
+ *   <yuw-sidebar collapsible="icon">
+ *     <div yuwSidebarHeader>Yurest</div>
+ *     <div yuwSidebarContent>
+ *       <div yuwSidebarGroup>
+ *         <div yuwSidebarGroupLabel>Gestión</div>
+ *         <div yuwSidebarGroupContent>
+ *           <ul yuwSidebarMenu>
+ *             <li yuwSidebarMenuItem>
+ *               <a yuwSidebarMenuButton isActive tooltip="Pedidos">Pedidos</a>
+ *             </li>
+ *           </ul>
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </yuw-sidebar>
+ *
+ *   <main yuwSidebarInset>
+ *     <button yuw-sidebar-trigger></button>
+ *   </main>
+ * </div>
+ * ```
+ */
+class YuwSidebarWrapperDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarWrapperDirective, isStandalone: true, selector: "[yuwSidebarWrapper], yuw-sidebar-wrapper", hostDirectives: [{ directive: i1$m.HlmSidebarWrapper, inputs: ["sidebarWidth", "sidebarWidth", "sidebarWidthIcon", "sidebarWidthIcon"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarWrapper], yuw-sidebar-wrapper',
+                    hostDirectives: [{ directive: HlmSidebarWrapper, inputs: ['sidebarWidth', 'sidebarWidthIcon'] }],
+                }]
+        }] });
+/** Top area of the sidebar, above the scrollable content. */
+class YuwSidebarHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarHeaderDirective, isStandalone: true, selector: "[yuwSidebarHeader], yuw-sidebar-header", hostDirectives: [{ directive: i1$m.HlmSidebarHeader }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarHeader], yuw-sidebar-header',
+                    hostDirectives: [HlmSidebarHeader],
+                }]
+        }] });
+/** Scrollable middle area of the sidebar that holds the navigation groups. */
+class YuwSidebarContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$m.HlmSidebarContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarContent], yuw-sidebar-content',
+                    hostDirectives: [HlmSidebarContent],
+                }]
+        }] });
+/** Bottom area of the sidebar, below the scrollable content. */
+class YuwSidebarFooterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFooterDirective, isStandalone: true, selector: "[yuwSidebarFooter], yuw-sidebar-footer", hostDirectives: [{ directive: i1$m.HlmSidebarFooter }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarFooter], yuw-sidebar-footer',
+                    hostDirectives: [HlmSidebarFooter],
+                }]
+        }] });
+/** A titled section of the sidebar. */
+class YuwSidebarGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$m.HlmSidebarGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarGroup], yuw-sidebar-group',
+                    hostDirectives: [HlmSidebarGroup],
+                }]
+        }] });
+/** Heading of a sidebar group. Fades out when the sidebar collapses to icons. */
+class YuwSidebarGroupLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$m.HlmSidebarGroupLabel }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]',
+                    hostDirectives: [HlmSidebarGroupLabel],
+                }]
+        }] });
+/** Body of a sidebar group, wrapping its menu. */
+class YuwSidebarGroupContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupContentDirective, isStandalone: true, selector: "div[yuwSidebarGroupContent]", hostDirectives: [{ directive: i1$m.HlmSidebarGroupContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[yuwSidebarGroupContent]',
+                    hostDirectives: [HlmSidebarGroupContent],
+                }]
+        }] });
+/** Navigation list of a sidebar group. Apply to a `<ul>`. */
+class YuwSidebarMenuDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuDirective, isStandalone: true, selector: "ul[yuwSidebarMenu]", hostDirectives: [{ directive: i1$m.HlmSidebarMenu }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[yuwSidebarMenu]',
+                    hostDirectives: [HlmSidebarMenu],
+                }]
+        }] });
+/** A single entry of a sidebar menu. Apply to an `<li>`. */
+class YuwSidebarMenuItemDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuItem]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[yuwSidebarMenuItem]',
+                    hostDirectives: [HlmSidebarMenuItem],
+                }]
+        }] });
+/**
+ * Interactive control of a sidebar menu item. Accepts `variant` (`'default'`, `'outline'`), `size`
+ * (`'default'`, `'sm'`, `'lg'`) and `isActive`.
+ *
+ * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
+ * alongside this directive — it comes from the underlying menu-button primitive and is only shown
+ * in the collapsed state.
+ */
+class YuwSidebarMenuButtonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]',
+                    hostDirectives: [
+                        {
+                            directive: HlmSidebarMenuButton,
+                            inputs: ['variant', 'size', 'isActive', 'closeMobileSidebarOnClick'],
+                        },
+                    ],
+                }]
+        }] });
+/** Trailing count or status badge of a sidebar menu item. */
+class YuwSidebarMenuBadgeDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuBadgeDirective, isStandalone: true, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge", hostDirectives: [{ directive: i1$m.HlmSidebarMenuBadge }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarMenuBadge], yuw-sidebar-menu-badge',
+                    hostDirectives: [HlmSidebarMenuBadge],
+                }]
+        }] });
+/** Nested submenu list of a sidebar menu item. Apply to a `<ul>`. */
+class YuwSidebarMenuSubDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubDirective, isStandalone: true, selector: "ul[yuwSidebarMenuSub]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSub }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[yuwSidebarMenuSub]',
+                    hostDirectives: [HlmSidebarMenuSub],
+                }]
+        }] });
+/** A single entry of a sidebar submenu. Apply to an `<li>`. */
+class YuwSidebarMenuSubItemDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuSubItem]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSubItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[yuwSidebarMenuSubItem]',
+                    hostDirectives: [HlmSidebarMenuSubItem],
+                }]
+        }] });
+/** Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`. */
+class YuwSidebarMenuSubButtonDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]',
+                    hostDirectives: [
+                        { directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] },
+                    ],
+                }]
+        }] });
+/** Divider between sidebar sections. */
+class YuwSidebarSeparatorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarSeparatorDirective, isStandalone: true, selector: "[yuwSidebarSeparator], yuw-sidebar-separator", hostDirectives: [{ directive: i1$m.HlmSidebarSeparator }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarSeparator], yuw-sidebar-separator',
+                    hostDirectives: [HlmSidebarSeparator],
+                }]
+        }] });
+/** Thin draggable edge that toggles the sidebar. Apply to a `<button>`. */
+class YuwSidebarRailDirective {
+    constructor() {
+        /**
+         * Accessible label of the rail button (it has no visible text). User-facing text — the
+         * consuming app is responsible for providing it already translated.
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarRailDirective, isStandalone: true, selector: "button[yuwSidebarRail]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-label": "label()" } }, hostDirectives: [{ directive: i1$m.HlmSidebarRail }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[yuwSidebarRail]',
+                    hostDirectives: [HlmSidebarRail],
+                    host: {
+                        '[attr.aria-label]': 'label()',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+/** Main content region beside the sidebar. Apply to a `<main>`. */
+class YuwSidebarInsetDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarInsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarInsetDirective, isStandalone: true, selector: "main[yuwSidebarInset]", hostDirectives: [{ directive: i1$m.HlmSidebarInset }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarInsetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'main[yuwSidebarInset]',
+                    hostDirectives: [HlmSidebarInset],
+                }]
+        }] });
+
+/*
+ * Public API Surface of yukit-web
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+//# sourceMappingURL=yukit-web.mjs.map