yukit-web 0.5.0 → 0.6.0

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';
@@ -85,6 +85,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';
@@ -5084,6 +5085,268 @@ 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-md 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',
+        },
+    },
+});
+
+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).
+ * 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.
+ *
+ * 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._activePanel = computed(() => {
+            const active = this.activeStep();
+            return this.panels().find((panel) => panel.stepId() === active)?.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._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.activeStep.set(id);
+    }
+    _goTo(id) {
+        if (id !== undefined) {
+            this.activeStep.set(id);
+        }
+    }
+    /** 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" }, 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  @if (_activePanel(); as panel) {\n    <div role=\"region\" class=\"min-w-0 flex-1\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel\" />\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  @if (_activePanel(); as panel) {\n    <div role=\"region\" class=\"min-w-0 flex-1\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel\" />\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 }] }] } });
+
 /**
  * Container directive for a single file attachment card.
  *
@@ -7798,6 +8061,10 @@ const WELD_CLASS = '[&_[data-slot=combobox-trigger]>button]:rounded-e-none [&_[d
  *
  * Below `md` the host and the fieldset are `display: contents`, so the star, the add button and the strip
  * become items of `yuws-list-toolbar`'s wrapping row and the strip takes a full line of its own.
+ *
+ * The strip is `contain-inline-size`, so it adds nothing to the row's min-content width: the row's floor is just
+ * the star and the add button. `yuws-list-toolbar` relies on that floor to keep its actions column, which grows
+ * when the collapsible search expands, from overlapping them; the strip fills whatever is left and scrolls.
  * `disabled` disables the whole row through a native `<fieldset disabled>`, which reaches every
  * button inside without wiring each control.
  *
@@ -7902,7 +8169,7 @@ class YuwsListToolbarFiltersComponent {
         filter?.querySelector('button, input, [tabindex]')?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFiltersComponent, isStandalone: true, selector: "yuws-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full max-md:contents" }, providers: [provideIcons({ lucidePlus, lucideX })], viewQueries: [{ propertyName: "_addBox", first: true, predicate: ["addBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset class=\"m-0 flex min-w-0 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 items-center gap-2 overflow-x-auto px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { kind: "component", type: YuwsListToolbarFilterSetPickerComponent, selector: "yuws-list-toolbar-filter-set-picker", inputs: ["idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFiltersComponent, isStandalone: true, selector: "yuws-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full flex-1 max-md:contents" }, providers: [provideIcons({ lucidePlus, lucideX })], viewQueries: [{ propertyName: "_addBox", first: true, predicate: ["addBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset class=\"m-0 flex min-w-0 flex-1 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 flex-1 items-center gap-2 overflow-x-auto contain-inline-size px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { kind: "component", type: YuwsListToolbarFilterSetPickerComponent, selector: "yuws-list-toolbar-filter-set-picker", inputs: ["idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFiltersComponent, decorators: [{
             type: Component,
@@ -7914,14 +8181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwComboboxTriggerDirective,
                         YuwsListToolbarFilterSetPickerComponent,
                         YuwMouseScrollXDirective,
-                    ], providers: [provideIcons({ lucidePlus, lucideX })], host: { class: 'flex min-w-0 max-w-full max-md:contents' }, template: "<fieldset class=\"m-0 flex min-w-0 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 items-center gap-2 overflow-x-auto px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n" }]
+                    ], providers: [provideIcons({ lucidePlus, lucideX })], host: { class: 'flex min-w-0 max-w-full flex-1 max-md:contents' }, template: "<fieldset class=\"m-0 flex min-w-0 flex-1 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 flex-1 items-center gap-2 overflow-x-auto contain-inline-size px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n" }]
         }], propDecorators: { _addBox: [{ type: i0.ViewChild, args: ['addBox', { isSignal: true }] }], contents: [{ type: i0.Input, args: [{ isSignal: true, alias: "contents", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 /**
  * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
- * trailing one, and projected content after them. The trailing actions keep the room they need (the
- * search grows into it when expanded) and the filter row takes the rest, scrolling its active
- * filters horizontally with faded edges when they do not fit. Below `md` the active filters move to a
+ * trailing one, and projected content after them. The filter row never shrinks below its star and
+ * add button; the trailing actions take the room they need above that (the search grows into it when
+ * expanded, and shrinks back to fit when that room runs out) and the filter row takes the rest,
+ * scrolling its active filters horizontally with faded edges when they do not fit. Below `md` the active filters move to a
  * full-width second line, still a single scrolling row, and the trailing actions stay on the first.
  *
  * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
@@ -7976,11 +8244,11 @@ class YuwsListToolbarComponent {
         this.isMobile = injectIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarComponent, isStandalone: true, selector: "yuws-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex items-center gap-3 max-md:flex-wrap max-md:gap-2" }, queries: [{ propertyName: "filterContents", predicate: YuwsFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 flex-1 items-center max-md:contents\">\n  @if (filterGroups(); as groups) {\n    <yuws-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex shrink-0 items-center gap-2 max-md:ms-auto\">\n  <yuws-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwsListToolbarActionsComponent, selector: "yuws-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwsListToolbarFiltersComponent, selector: "yuws-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarComponent, isStandalone: true, selector: "yuws-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex items-center gap-3 max-md:flex-wrap max-md:gap-2" }, queries: [{ propertyName: "filterContents", predicate: YuwsFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex flex-1 items-center max-md:contents\">\n  @if (filterGroups(); as groups) {\n    <yuws-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex min-w-0 items-center gap-2 max-md:ms-auto\">\n  <yuws-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwsListToolbarActionsComponent, selector: "yuws-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwsListToolbarFiltersComponent, selector: "yuws-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuws-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwsListToolbarActionsComponent, YuwsListToolbarFiltersComponent], host: { class: 'flex items-center gap-3 max-md:flex-wrap max-md:gap-2' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 flex-1 items-center max-md:contents\">\n  @if (filterGroups(); as groups) {\n    <yuws-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex shrink-0 items-center gap-2 max-md:ms-auto\">\n  <yuws-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
+            args: [{ selector: 'yuws-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwsListToolbarActionsComponent, YuwsListToolbarFiltersComponent], host: { class: 'flex items-center gap-3 max-md:flex-wrap max-md:gap-2' }, template: "<!-- Filters -->\n<div class=\"flex flex-1 items-center max-md:contents\">\n  @if (filterGroups(); as groups) {\n    <yuws-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex min-w-0 items-center gap-2 max-md:ms-auto\">\n  <yuws-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
         }], propDecorators: { filterContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwsFilterContentDirective), { isSignal: true }] }], filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 const FOCUSABLE = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
@@ -8080,5 +8348,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