yukit-web 0.5.1 → 0.6.1

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, Directive, inject, ElementRef, NgZone, DestroyRef, forwardRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, runInInjectionContext, DOCUMENT as DOCUMENT$1 } from '@angular/core';
+import { input, Directive, inject, ElementRef, NgZone, DestroyRef, forwardRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, afterRenderEffect, runInInjectionContext, DOCUMENT as DOCUMENT$1 } from '@angular/core';
 import { classes, hlm } from 'yukit-web/helm/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -15,7 +15,7 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucidePencil, lucideMinus, lucideCheck, lucideCopy, lucideTrash2, lucideSave, lucideArrowLeft, lucideArchiveRestore, lucidePlus, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideEllipsis, lucideStar } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucidePencil, lucideCheck, lucideMinus, lucideCopy, lucideTrash2, lucideSave, lucideArrowLeft, lucideArchiveRestore, lucidePlus, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideEllipsis, lucideStar } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
@@ -26,6 +26,7 @@ import * as i1$3 from '@spartan-ng/brain/combobox';
 import { BrnComboboxTrigger, BrnComboboxAnchor, BrnComboboxPopoverTrigger, BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
 import * as i1$4 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
+import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
 import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
 import { HlmInput } from 'yukit-web/helm/input';
@@ -85,6 +86,7 @@ import * as i1$n from '@spartan-ng/brain/alert-dialog';
 import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
 import * as i1$p from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
+import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i1$q from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
 import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
@@ -1441,6 +1443,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else {\n      <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n        @for (chip of _selectedChips(); track chip.value) {\n          <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n        }\n        <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-chips>\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value class=\"min-w-0 truncate\" [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxTriggerDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Open state of the sheet a piece of content is declared in. `<yuw-sheet>` and `<yuws-form-sheet>` provide it, so
+ * content projected into either can react to the panel opening or closing without knowing which one it sits in.
+ */
+class YuwSheetOpenState {
+}
+
 /**
  * Container directive for collapsible accordion items.
  *
@@ -1451,6 +1460,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Direct child items (`yuw-accordion-item`) can be declared statically or rendered dynamically
  * using `@for`.
  *
+ * Inputs:
+ * - `collapseWithSheet`: Inside a `<yuw-sheet>` or `<yuws-form-sheet>`, collapses every item whenever the sheet opens
+ *   or closes, so each opening starts folded. Ignored outside a sheet. Default is `false`.
+ *
  * 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
@@ -1459,15 +1472,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `BrnAccordion`.
  */
 class YuwAccordion extends HlmAccordion {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAccordion, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwAccordion, isStandalone: true, selector: "yuw-accordion", usesInheritance: true, ngImport: i0 }); }
+    constructor() {
+        super();
+        this._sheet = inject(YuwSheetOpenState, { optional: true });
+        this._items = contentChildren(BrnAccordionItem, { ...(ngDevMode ? { debugName: "_items" } : /* istanbul ignore next */ {}), descendants: true });
+        this.collapseWithSheet = input(false, { ...(ngDevMode ? { debugName: "collapseWithSheet" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        effect(() => {
+            const sheet = this._sheet;
+            if (!sheet || !this.collapseWithSheet()) {
+                return;
+            }
+            sheet.open();
+            untracked(() => this._items().forEach((item) => item.close()));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.22", type: YuwAccordion, isStandalone: true, selector: "yuw-accordion", inputs: { collapseWithSheet: { classPropertyName: "collapseWithSheet", publicName: "collapseWithSheet", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_items", predicate: BrnAccordionItem, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAccordion, decorators: [{
             type: Directive,
             args: [{
                     selector: 'yuw-accordion',
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { _items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BrnAccordionItem), { ...{ descendants: true }, isSignal: true }] }], collapseWithSheet: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseWithSheet", required: false }] }] } });
 
 /**
  * Directive representing an individual section/item within a `yuw-accordion`.
@@ -1502,20 +1529,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Inputs:
  * - `triggerClass`: Extra classes for the inner trigger `<button>`; the helm merges them last
  *   (via tailwind-merge), so they win over its defaults.
+ * - `underline`: Underlines the label on hover, as the helm does. Set `underline="false"` for a header whose content
+ *   is more than a line of text. Default is `true`.
  */
 class YuwAccordionTriggerComponent {
     constructor() {
         this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+        this.underline = input(true, { ...(ngDevMode ? { debugName: "underline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this._triggerClass = computed(() => cn(!this.underline() && 'hover:no-underline', this.triggerClass()), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAccordionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwAccordionTriggerComponent, isStandalone: true, selector: "yuw-accordion-trigger", inputs: { triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", 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.22", 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 }] }] } });
+                    }, 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 }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }] } });
 
 /**
  * Collapsible panel container for a `yuw-accordion-item`.
@@ -2005,7 +2036,7 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }, { propertyName: "hasHeader", first: true, predicate: YuwSheetHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    @if (hasHeader()) {\n      <div class=\"flex items-start gap-3 px-4 pt-6\">\n        <div class=\"min-w-0 flex-1\">\n          <ng-content select=\"[yuwSheetHeader]\" />\n        </div>\n        @if (closeLabel()) {\n          <ng-container [ngTemplateOutlet]=\"closeButton\" />\n        }\n      </div>\n    }\n\n    <div [class]=\"_bodyClass()\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel() && !hasHeader()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <ng-container [ngTemplateOutlet]=\"closeButton\" />\n      </div>\n    }\n\n    <ng-template #closeButton>\n      <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n        <ng-icon name=\"lucideX\" />\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </yuw-button>\n    </ng-template>\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$9.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$9.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$9.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$9.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$9.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$9.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$9.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX }), { provide: YuwSheetOpenState, useExisting: YuwSheetComponent }], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }, { propertyName: "hasHeader", first: true, predicate: YuwSheetHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    @if (hasHeader()) {\n      <div class=\"flex items-start gap-3 px-4 pt-6\">\n        <div class=\"min-w-0 flex-1\">\n          <ng-content select=\"[yuwSheetHeader]\" />\n        </div>\n        @if (closeLabel()) {\n          <ng-container [ngTemplateOutlet]=\"closeButton\" />\n        }\n      </div>\n    }\n\n    <div [class]=\"_bodyClass()\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel() && !hasHeader()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <ng-container [ngTemplateOutlet]=\"closeButton\" />\n      </div>\n    }\n\n    <ng-template #closeButton>\n      <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n        <ng-icon name=\"lucideX\" />\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </yuw-button>\n    </ng-template>\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$9.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$9.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$9.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$9.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$9.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$9.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$9.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
             type: Component,
@@ -2016,7 +2047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSheetTriggerDirective,
                         YuwSheetCloseDirective,
                         NgIcon,
-                    ], providers: [provideIcons({ lucideX })], host: {
+                    ], providers: [provideIcons({ lucideX }), { provide: YuwSheetOpenState, useExisting: YuwSheetComponent }], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    @if (hasHeader()) {\n      <div class=\"flex items-start gap-3 px-4 pt-6\">\n        <div class=\"min-w-0 flex-1\">\n          <ng-content select=\"[yuwSheetHeader]\" />\n        </div>\n        @if (closeLabel()) {\n          <ng-container [ngTemplateOutlet]=\"closeButton\" />\n        }\n      </div>\n    }\n\n    <div [class]=\"_bodyClass()\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel() && !hasHeader()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <ng-container [ngTemplateOutlet]=\"closeButton\" />\n      </div>\n    }\n\n    <ng-template #closeButton>\n      <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n        <ng-icon name=\"lucideX\" />\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </yuw-button>\n    </ng-template>\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
         }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], hasHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetHeaderDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
@@ -5084,6 +5115,293 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
         }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
+/**
+ * Replaces the content of every step's indicator circle (the number, or the check once completed).
+ * The circle itself keeps its shape and state colors.
+ *
+ * Usage:
+ * ```html
+ * <ng-template yuwStepIndicator let-state let-step="step">
+ *   <ng-icon [name]="icons[step.id]" />
+ * </ng-template>
+ * ```
+ */
+class YuwStepIndicatorDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwStepIndicatorDirective, isStandalone: true, selector: "ng-template[yuwStepIndicator]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwStepIndicator]',
+                }]
+        }] });
+
+/**
+ * Declares the content of a single `<yuw-stepper>` step. Apply it to an `<ng-template>` and pass the
+ * id of the step it belongs to, matching an entry in the `steps` input.
+ *
+ * Inputs:
+ * - `yuwStepPanel`: Required string; id of the step this panel renders for.
+ */
+class YuwStepPanelDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.stepId = input.required({ ...(ngDevMode ? { debugName: "stepId" } : /* istanbul ignore next */ {}), alias: 'yuwStepPanel' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwStepPanelDirective, isStandalone: true, selector: "ng-template[yuwStepPanel]", inputs: { stepId: { classPropertyName: "stepId", publicName: "yuwStepPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwStepPanel]',
+                }]
+        }], propDecorators: { stepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwStepPanel", required: true }] }] } });
+
+/**
+ * A step counts as completed when the consumer says so, or, when it says nothing, once it lies behind the active one.
+ * In `linear` mode a step ahead of the active one is reachable only when every step before it is explicitly completed;
+ * a disabled step is never reachable.
+ */
+function resolveSteps(steps, activeIndex, linear) {
+    let gateOpen = true;
+    return steps.map((step, index) => {
+        const completed = step.completed ?? index < activeIndex;
+        const state = index === activeIndex ? 'active' : completed ? 'completed' : 'upcoming';
+        const reachable = !step.disabled && (!linear || index <= activeIndex || gateOpen);
+        gateOpen = gateOpen && step.completed === true;
+        return { step, index, state, reachable, context: { $implicit: state, step, index } };
+    });
+}
+
+/**
+ * Accent classes read `--yuw-accent`. Neutral parts name the raw `--neutrals-*` tokens because `data-yuw-color`
+ * remaps `--border` and `--foreground` to the accent.
+ */
+const yuwStepIndicatorVariants = cva('flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-colors [&_ng-icon]:text-base', {
+    variants: {
+        state: {
+            completed: 'border-(--yuw-accent) bg-(--yuw-accent) text-(--yuw-accent-foreground)',
+            active: 'border-(--yuw-accent) bg-(--yuw-accent) text-(--yuw-accent-foreground) ring-3 ring-(--yuw-accent)/20',
+            upcoming: 'border-(--neutrals-outline) bg-background text-muted-foreground',
+        },
+    },
+});
+const yuwStepTriggerVariants = cva('flex items-center gap-3 rounded-full text-left outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-default', {
+    variants: {
+        state: {
+            completed: 'text-(--neutrals-element-high)',
+            active: 'text-(--neutrals-element-high)',
+            upcoming: 'text-muted-foreground',
+        },
+        disabled: {
+            true: 'opacity-50',
+            false: '',
+        },
+    },
+});
+const yuwStepSeparatorVariants = cva('shrink-0 transition-colors', {
+    variants: {
+        orientation: {
+            horizontal: 'mx-3 h-px min-w-8 flex-1',
+            vertical: 'my-1 ml-4 min-h-6 w-px flex-1',
+        },
+        done: {
+            true: 'bg-(--yuw-accent)',
+            false: 'bg-(--neutrals-outline)',
+        },
+    },
+});
+const yuwStepperLayoutVariants = cva('flex min-w-0 gap-6', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-col',
+            vertical: 'flex-row',
+        },
+    },
+});
+const yuwStepListVariants = cva('flex', {
+    variants: {
+        orientation: {
+            horizontal: 'relative flex-row items-center overflow-x-auto p-1 scroll-fade-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden overscroll-none',
+            vertical: 'flex-col',
+        },
+    },
+});
+const yuwStepVariants = cva('flex', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-1 items-center whitespace-nowrap last:flex-none',
+            vertical: 'flex-col',
+        },
+    },
+});
+/** Entrance of a step's panel, sliding in from the side the user moved towards; off for reduced motion. */
+const yuwStepPanelVariants = cva('min-w-0 flex-1 animate-in fade-in duration-200 motion-reduce:animate-none', {
+    variants: {
+        direction: {
+            forward: 'slide-in-from-right-2',
+            backward: 'slide-in-from-left-2',
+        },
+    },
+});
+
+const TOOLTIP_POSITION = {
+    horizontal: 'top',
+    vertical: 'right',
+};
+/**
+ * Multi-step flow: a header of numbered steps and the panel of the active one.
+ *
+ * Steps come from the `steps` input; each panel is an `<ng-template yuwStepPanel="<id>">` whose id matches a step.
+ * A horizontal header that does not fit scrolls sideways (touch, trackpad, mouse wheel or drag), its edges fading out.
+ * Only the active panel is rendered, so state that must survive a step change belongs to the parent (a form group). It
+ * slides in from the side the user moved towards, through `tw-animate-css`, which the Spartan preset already requires.
+ * Navigation buttons are the consumer's: grab the stepper with a template reference and call `next()` / `previous()`,
+ * disabling them with `hasNext()` / `hasPrevious()`.
+ *
+ * Inputs / Models:
+ * - `steps`: The step definitions (`YuwStepItemDto[]`), in order.
+ * - `activeStep`: Two-way id of the current step.
+ * - `linear`: A step ahead can only be reached once every step before it has `completed: true`. Default is `false`.
+ * - `orientation`: `'horizontal'` header above the panel, or `'vertical'` header beside it. Default is `'horizontal'`.
+ * - `iconOnly`: Hides each step's label and description visually; they stay announced to screen readers and the label
+ *   shows as a tooltip. Pair it with a `yuwStepIndicator` template so the circles carry an icon. Default is `false`.
+ * - `color`: Accent of the active and completed steps (any `YuwColorDto`). Default is `'primary'`.
+ * - `class`: Extra classes merged last onto the root element.
+ *
+ * Outputs:
+ * - `stepChange`: Emits the step the user moved to (`YuwStepChangeDto`, the step and its index), from the header or
+ *   `next()` / `previous()`. Not emitted when the parent sets `activeStep` itself.
+ *
+ * Content:
+ * - `<ng-template yuwStepIndicator let-state let-step="step" let-index="index">` replaces the number/check inside
+ *   every indicator.
+ *
+ * Usage:
+ * ```html
+ * <yuw-stepper #stepper [steps]="steps" [(activeStep)]="current" linear>
+ *   <ng-template yuwStepPanel="account">…</ng-template>
+ *   <ng-template yuwStepPanel="billing">…</ng-template>
+ * </yuw-stepper>
+ * <yuw-button [disabled]="!stepper.hasNext()" (clicked)="stepper.next()">{{ 'next' | translate }}</yuw-button>
+ * ```
+ */
+class YuwStepperComponent {
+    constructor() {
+        this._idPrefix = inject(_IdGenerator).getId('yuw-stepper-');
+        this._window = inject(DOCUMENT).defaultView;
+        this._list = viewChild.required('list');
+        this.indicator = contentChild(YuwStepIndicatorDirective, ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+        this.panels = contentChildren(YuwStepPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+        this.activeStep = model.required(...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.stepChange = output();
+        this._activePanel = computed(() => {
+            const active = this.activeStep();
+            const panel = this.panels().find((candidate) => candidate.stepId() === active);
+            return panel ? [{ id: active, templateRef: panel.templateRef }] : [];
+        }, ...(ngDevMode ? [{ debugName: "_activePanel" }] : /* istanbul ignore next */ []));
+        this._activeTriggerId = computed(() => `${this._idPrefix}-${this.activeStep()}`, ...(ngDevMode ? [{ debugName: "_activeTriggerId" }] : /* istanbul ignore next */ []));
+        this.activeIndex = computed(() => this.steps().findIndex((step) => step.id === this.activeStep()), ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this._items = computed(() => {
+            const orientation = this.orientation();
+            return resolveSteps(this.steps(), this.activeIndex(), this.linear()).map((view) => ({
+                ...view,
+                triggerId: `${this._idPrefix}-${view.step.id}`,
+                ariaCurrent: view.state === 'active' ? 'step' : null,
+                triggerClass: yuwStepTriggerVariants({ state: view.state, disabled: view.step.disabled ?? false }),
+                indicatorClass: yuwStepIndicatorVariants({ state: view.state }),
+                separatorClass: yuwStepSeparatorVariants({ orientation, done: view.state === 'completed' }),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        this._labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'flex flex-col'), ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+        this._listClass = computed(() => yuwStepListVariants({ orientation: this.orientation() }), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
+        this._panelClass = linkedSignal({ ...(ngDevMode ? { debugName: "_panelClass" } : /* istanbul ignore next */ {}), source: () => this.activeIndex(),
+            computation: (index, previous) => {
+                const direction = previous && index < previous.source ? 'backward' : 'forward';
+                return yuwStepPanelVariants({ direction });
+            } });
+        this._rootClass = computed(() => cn(yuwStepperLayoutVariants({ orientation: this.orientation() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_rootClass" }] : /* istanbul ignore next */ []));
+        this._stepClass = computed(() => yuwStepVariants({ orientation: this.orientation() }), ...(ngDevMode ? [{ debugName: "_stepClass" }] : /* istanbul ignore next */ []));
+        this._tooltipPosition = computed(() => TOOLTIP_POSITION[this.orientation()], ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.hasNext = computed(() => this._neighbour(1) !== undefined, ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+        this.hasPrevious = computed(() => this._neighbour(-1) !== undefined, ...(ngDevMode ? [{ debugName: "hasPrevious" }] : /* istanbul ignore next */ []));
+        this.isLast = computed(() => this.activeIndex() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            this.activeStep();
+            this._revealActive();
+        });
+    }
+    next() {
+        this._goTo(this._neighbour(1));
+    }
+    previous() {
+        this._goTo(this._neighbour(-1));
+    }
+    select(id) {
+        this._goTo(id);
+    }
+    _goTo(id) {
+        const index = this.steps().findIndex((step) => step.id === id);
+        const step = this.steps()[index];
+        if (!step || step.id === this.activeStep()) {
+            return;
+        }
+        this.activeStep.set(step.id);
+        this.stepChange.emit({ step, index });
+    }
+    /** Closest reachable step in `direction`, skipping disabled ones. */
+    _neighbour(direction) {
+        const items = this._items();
+        const from = this.activeIndex();
+        for (let index = from + direction; index >= 0 && index < items.length; index += direction) {
+            if (items[index].reachable) {
+                return items[index].step.id;
+            }
+            if (!items[index].step.disabled) {
+                return undefined;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Centers the active step inside a horizontally overflowing header by scrolling the list itself, never
+     * `scrollIntoView`, which would also scroll the page to a stepper below the fold on first render.
+     */
+    _revealActive() {
+        const list = this._list().nativeElement;
+        const active = list.querySelector('[aria-current="step"]');
+        if (!active || list.scrollWidth <= list.clientWidth) {
+            return;
+        }
+        list.scrollTo({
+            left: active.offsetLeft - (list.clientWidth - active.offsetWidth) / 2,
+            behavior: this._window?.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwStepperComponent, isStandalone: true, selector: "yuw-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideCheck })], queries: [{ propertyName: "indicator", first: true, predicate: YuwStepIndicatorDirective, descendants: true, isSignal: true }, { propertyName: "panels", predicate: YuwStepPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_rootClass()\">\n  <ol #list yuwMouseScrollX [class]=\"_listClass()\" [attr.data-yuw-color]=\"color()\">\n    @for (item of _items(); track item.step.id; let last = $last) {\n      <li [class]=\"_stepClass()\">\n        <button\n          type=\"button\"\n          [id]=\"item.triggerId\"\n          [class]=\"item.triggerClass\"\n          [disabled]=\"!item.reachable\"\n          [attr.aria-current]=\"item.ariaCurrent\"\n          [yuwTooltip]=\"item.step.label\"\n          [tooltipDisabled]=\"!iconOnly()\"\n          [position]=\"_tooltipPosition()\"\n          (click)=\"select(item.step.id)\"\n        >\n          <span [class]=\"item.indicatorClass\">\n            @if (indicator(); as custom) {\n              <ng-container [ngTemplateOutlet]=\"custom.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else if (item.state === 'completed') {\n              <ng-icon name=\"lucideCheck\" aria-hidden=\"true\" />\n            } @else {\n              {{ item.index + 1 }}\n            }\n          </span>\n          <span [class]=\"_labelClass()\">\n            <span class=\"text-sm font-medium\">{{ item.step.label }}</span>\n            @if (item.step.description) {\n              <span class=\"text-xs text-muted-foreground\">{{ item.step.description }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"item.separatorClass\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (panel of _activePanel(); track panel.id) {\n    <div role=\"region\" [class]=\"_panelClass()\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }, { kind: "directive", type: YuwTooltipDirective, selector: "[yuwTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-stepper', imports: [NgTemplateOutlet, NgIcon, YuwMouseScrollXDirective, YuwTooltipDirective], providers: [provideIcons({ lucideCheck })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_rootClass()\">\n  <ol #list yuwMouseScrollX [class]=\"_listClass()\" [attr.data-yuw-color]=\"color()\">\n    @for (item of _items(); track item.step.id; let last = $last) {\n      <li [class]=\"_stepClass()\">\n        <button\n          type=\"button\"\n          [id]=\"item.triggerId\"\n          [class]=\"item.triggerClass\"\n          [disabled]=\"!item.reachable\"\n          [attr.aria-current]=\"item.ariaCurrent\"\n          [yuwTooltip]=\"item.step.label\"\n          [tooltipDisabled]=\"!iconOnly()\"\n          [position]=\"_tooltipPosition()\"\n          (click)=\"select(item.step.id)\"\n        >\n          <span [class]=\"item.indicatorClass\">\n            @if (indicator(); as custom) {\n              <ng-container [ngTemplateOutlet]=\"custom.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else if (item.state === 'completed') {\n              <ng-icon name=\"lucideCheck\" aria-hidden=\"true\" />\n            } @else {\n              {{ item.index + 1 }}\n            }\n          </span>\n          <span [class]=\"_labelClass()\">\n            <span class=\"text-sm font-medium\">{{ item.step.label }}</span>\n            @if (item.step.description) {\n              <span class=\"text-xs text-muted-foreground\">{{ item.step.description }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"item.separatorClass\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (panel of _activePanel(); track panel.id) {\n    <div role=\"region\" [class]=\"_panelClass()\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], indicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwStepIndicatorDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwStepPanelDirective), { isSignal: true }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: true }] }, { type: i0.Output, args: ["activeStepChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
+
 /**
  * Container directive for a single file attachment card.
  *
@@ -7120,11 +7438,17 @@ class YuwsFormSheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsFormSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsFormSheetComponent, isStandalone: true, selector: "yuws-form-sheet", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, removeDisabled: { classPropertyName: "removeDisabled", publicName: "removeDisabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saving: { classPropertyName: "saving", publicName: "saving", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", back: "back", remove: "remove", restore: "restore", save: "save" }, providers: [provideIcons({ lucideArchiveRestore, lucideArrowLeft, lucideSave, lucideTrash2, lucideX })], ngImport: i0, template: "<yuw-sheet\n  side=\"right\"\n  [showTrigger]=\"false\"\n  [panelClass]=\"panelClass()\"\n  bodyClass=\"scroll-fade-y\"\n  [title]=\"backLabel() ? undefined : title()\"\n  [closeLabel]=\"backLabel() ? undefined : labels().close\"\n  [(open)]=\"open\"\n>\n  @if (backLabel(); as label) {\n    <div yuwSheetHeader class=\"-ml-2 -mt-3 flex items-center gap-1 pb-3\">\n      <yuw-button type=\"button\" variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"label\" (clicked)=\"back.emit()\">\n        <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n      </yuw-button>\n      <h2 class=\"text-base font-medium text-foreground\">{{ title() }}</h2>\n    </div>\n  }\n\n  <ng-content />\n\n  <div\n    yuwSheetFooter\n    class=\"flex flex-wrap items-center justify-between gap-2\"\n    [style.display]=\"hideFooter() ? 'none' : null\"\n    [attr.aria-busy]=\"saving()\"\n  >\n    @if (errorMessage(); as message) {\n      <p role=\"alert\" class=\"w-full rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive\">{{ message }}</p>\n    }\n\n    @if (removeLabel(); as label) {\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        class=\"gap-2\"\n        [disabled]=\"removeDisabled() || saving()\"\n        (clicked)=\"remove.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" />\n        {{ label }}\n      </yuw-button>\n    }\n\n    <span class=\"ms-auto flex gap-2\">\n      <yuw-button variant=\"outline\" (clicked)=\"onCancel()\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n        {{ labels().cancel }}\n      </yuw-button>\n      @if (restoreLabel(); as label) {\n        <yuw-button color=\"primary\" [disabled]=\"saving()\" (clicked)=\"restore.emit()\">\n          <ng-icon name=\"lucideArchiveRestore\" size=\"16\" />\n          {{ label }}\n        </yuw-button>\n      }\n      @if (!readonly()) {\n        <yuw-button color=\"primary\" [disabled]=\"saveDisabled() || saving()\" (clicked)=\"save.emit()\">\n          <ng-icon name=\"lucideSave\" size=\"16\" />\n          {{ labels().save }}\n        </yuw-button>\n      }\n    </span>\n  </div>\n</yuw-sheet>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "bodyClass", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwSheetFooterDirective, selector: "[yuwSheetFooter]" }, { kind: "directive", type: YuwSheetHeaderDirective, selector: "[yuwSheetHeader]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsFormSheetComponent, isStandalone: true, selector: "yuws-form-sheet", inputs: { backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, removeDisabled: { classPropertyName: "removeDisabled", publicName: "removeDisabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saving: { classPropertyName: "saving", publicName: "saving", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", back: "back", remove: "remove", restore: "restore", save: "save" }, providers: [
+            provideIcons({ lucideArchiveRestore, lucideArrowLeft, lucideSave, lucideTrash2, lucideX }),
+            { provide: YuwSheetOpenState, useExisting: YuwsFormSheetComponent },
+        ], ngImport: i0, template: "<yuw-sheet\n  side=\"right\"\n  [showTrigger]=\"false\"\n  [panelClass]=\"panelClass()\"\n  bodyClass=\"scroll-fade-y\"\n  [title]=\"backLabel() ? undefined : title()\"\n  [closeLabel]=\"backLabel() ? undefined : labels().close\"\n  [(open)]=\"open\"\n>\n  @if (backLabel(); as label) {\n    <div yuwSheetHeader class=\"-ml-2 -mt-3 flex items-center gap-1 pb-3\">\n      <yuw-button type=\"button\" variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"label\" (clicked)=\"back.emit()\">\n        <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n      </yuw-button>\n      <h2 class=\"text-base font-medium text-foreground\">{{ title() }}</h2>\n    </div>\n  }\n\n  <ng-content />\n\n  <div\n    yuwSheetFooter\n    class=\"flex flex-wrap items-center justify-between gap-2\"\n    [style.display]=\"hideFooter() ? 'none' : null\"\n    [attr.aria-busy]=\"saving()\"\n  >\n    @if (errorMessage(); as message) {\n      <p role=\"alert\" class=\"w-full rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive\">{{ message }}</p>\n    }\n\n    @if (removeLabel(); as label) {\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        class=\"gap-2\"\n        [disabled]=\"removeDisabled() || saving()\"\n        (clicked)=\"remove.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" />\n        {{ label }}\n      </yuw-button>\n    }\n\n    <span class=\"ms-auto flex gap-2\">\n      <yuw-button variant=\"outline\" (clicked)=\"onCancel()\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n        {{ labels().cancel }}\n      </yuw-button>\n      @if (restoreLabel(); as label) {\n        <yuw-button color=\"primary\" [disabled]=\"saving()\" (clicked)=\"restore.emit()\">\n          <ng-icon name=\"lucideArchiveRestore\" size=\"16\" />\n          {{ label }}\n        </yuw-button>\n      }\n      @if (!readonly()) {\n        <yuw-button color=\"primary\" [disabled]=\"saveDisabled() || saving()\" (clicked)=\"save.emit()\">\n          <ng-icon name=\"lucideSave\" size=\"16\" />\n          {{ labels().save }}\n        </yuw-button>\n      }\n    </span>\n  </div>\n</yuw-sheet>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "bodyClass", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwSheetFooterDirective, selector: "[yuwSheetFooter]" }, { kind: "directive", type: YuwSheetHeaderDirective, selector: "[yuwSheetHeader]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsFormSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuws-form-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective], providers: [provideIcons({ lucideArchiveRestore, lucideArrowLeft, lucideSave, lucideTrash2, lucideX })], template: "<yuw-sheet\n  side=\"right\"\n  [showTrigger]=\"false\"\n  [panelClass]=\"panelClass()\"\n  bodyClass=\"scroll-fade-y\"\n  [title]=\"backLabel() ? undefined : title()\"\n  [closeLabel]=\"backLabel() ? undefined : labels().close\"\n  [(open)]=\"open\"\n>\n  @if (backLabel(); as label) {\n    <div yuwSheetHeader class=\"-ml-2 -mt-3 flex items-center gap-1 pb-3\">\n      <yuw-button type=\"button\" variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"label\" (clicked)=\"back.emit()\">\n        <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n      </yuw-button>\n      <h2 class=\"text-base font-medium text-foreground\">{{ title() }}</h2>\n    </div>\n  }\n\n  <ng-content />\n\n  <div\n    yuwSheetFooter\n    class=\"flex flex-wrap items-center justify-between gap-2\"\n    [style.display]=\"hideFooter() ? 'none' : null\"\n    [attr.aria-busy]=\"saving()\"\n  >\n    @if (errorMessage(); as message) {\n      <p role=\"alert\" class=\"w-full rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive\">{{ message }}</p>\n    }\n\n    @if (removeLabel(); as label) {\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        class=\"gap-2\"\n        [disabled]=\"removeDisabled() || saving()\"\n        (clicked)=\"remove.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" />\n        {{ label }}\n      </yuw-button>\n    }\n\n    <span class=\"ms-auto flex gap-2\">\n      <yuw-button variant=\"outline\" (clicked)=\"onCancel()\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n        {{ labels().cancel }}\n      </yuw-button>\n      @if (restoreLabel(); as label) {\n        <yuw-button color=\"primary\" [disabled]=\"saving()\" (clicked)=\"restore.emit()\">\n          <ng-icon name=\"lucideArchiveRestore\" size=\"16\" />\n          {{ label }}\n        </yuw-button>\n      }\n      @if (!readonly()) {\n        <yuw-button color=\"primary\" [disabled]=\"saveDisabled() || saving()\" (clicked)=\"save.emit()\">\n          <ng-icon name=\"lucideSave\" size=\"16\" />\n          {{ labels().save }}\n        </yuw-button>\n      }\n    </span>\n  </div>\n</yuw-sheet>\n" }]
+            args: [{ selector: 'yuws-form-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective], providers: [
+                        provideIcons({ lucideArchiveRestore, lucideArrowLeft, lucideSave, lucideTrash2, lucideX }),
+                        { provide: YuwSheetOpenState, useExisting: YuwsFormSheetComponent },
+                    ], template: "<yuw-sheet\n  side=\"right\"\n  [showTrigger]=\"false\"\n  [panelClass]=\"panelClass()\"\n  bodyClass=\"scroll-fade-y\"\n  [title]=\"backLabel() ? undefined : title()\"\n  [closeLabel]=\"backLabel() ? undefined : labels().close\"\n  [(open)]=\"open\"\n>\n  @if (backLabel(); as label) {\n    <div yuwSheetHeader class=\"-ml-2 -mt-3 flex items-center gap-1 pb-3\">\n      <yuw-button type=\"button\" variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"label\" (clicked)=\"back.emit()\">\n        <ng-icon name=\"lucideArrowLeft\" size=\"16\" />\n      </yuw-button>\n      <h2 class=\"text-base font-medium text-foreground\">{{ title() }}</h2>\n    </div>\n  }\n\n  <ng-content />\n\n  <div\n    yuwSheetFooter\n    class=\"flex flex-wrap items-center justify-between gap-2\"\n    [style.display]=\"hideFooter() ? 'none' : null\"\n    [attr.aria-busy]=\"saving()\"\n  >\n    @if (errorMessage(); as message) {\n      <p role=\"alert\" class=\"w-full rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive\">{{ message }}</p>\n    }\n\n    @if (removeLabel(); as label) {\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        class=\"gap-2\"\n        [disabled]=\"removeDisabled() || saving()\"\n        (clicked)=\"remove.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" />\n        {{ label }}\n      </yuw-button>\n    }\n\n    <span class=\"ms-auto flex gap-2\">\n      <yuw-button variant=\"outline\" (clicked)=\"onCancel()\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n        {{ labels().cancel }}\n      </yuw-button>\n      @if (restoreLabel(); as label) {\n        <yuw-button color=\"primary\" [disabled]=\"saving()\" (clicked)=\"restore.emit()\">\n          <ng-icon name=\"lucideArchiveRestore\" size=\"16\" />\n          {{ label }}\n        </yuw-button>\n      }\n      @if (!readonly()) {\n        <yuw-button color=\"primary\" [disabled]=\"saveDisabled() || saving()\" (clicked)=\"save.emit()\">\n          <ng-icon name=\"lucideSave\" size=\"16\" />\n          {{ labels().save }}\n        </yuw-button>\n      }\n    </span>\n  </div>\n</yuw-sheet>\n" }]
         }], propDecorators: { backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], removeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeDisabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saving: [{ type: i0.Input, args: [{ isSignal: true, alias: "saving", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], back: [{ type: i0.Output, args: ["back"] }], remove: [{ type: i0.Output, args: ["remove"] }], restore: [{ type: i0.Output, args: ["restore"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 /**
@@ -8085,5 +8409,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwStepIndicatorDirective, YuwStepPanelDirective, YuwStepperComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
 //# sourceMappingURL=yukit-web.mjs.map