yukit-web 0.0.1 → 0.0.3

package/fesm2022/yukit-web.mjs

@@ -1,10 +1,11 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, model, inject, TemplateRef, contentChild, viewChild, ElementRef, contentChildren, effect, numberAttribute } from '@angular/core';
+import { forwardRef, signal, Directive, input, inject, TemplateRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, ElementRef, Injector, afterNextRender, effect, numberAttribute, linkedSignal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
-import { HlmButtonGroup } from 'yukit-web/helm/button-group';
+import { HlmButtonGroup, HlmButtonGroupText } from 'yukit-web/helm/button-group';
 import * as i2 from 'yukit-web/helm/dropdown-menu';
 import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
 import { cva } from 'class-variance-authority';
@@ -15,7 +16,6 @@ import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$1 from 'yukit-web/helm/breadcrumb';
 import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
 import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLink, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
@@ -53,11 +53,15 @@ import * as i1$d from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$e from 'yukit-web/helm/item';
 import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, HlmItemDescription, HlmItemActions, HlmItemFooter, HlmItemGroup, HlmItemSeparator } from 'yukit-web/helm/item';
-import * as i1$f from 'yukit-web/helm/sheet';
+import * as i1$f from '@spartan-ng/brain/sheet';
+import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
+import * as i1$g from 'yukit-web/helm/sheet';
 import { HlmSheetImports } from 'yukit-web/helm/sheet';
-import * as i1$g from 'yukit-web/helm/popover';
+import * as i1$i from 'yukit-web/helm/popover';
 import { HlmPopoverImports } from 'yukit-web/helm/popover';
-import * as i1$h from '@spartan-ng/brain/tooltip';
+import * as i1$h from '@spartan-ng/brain/popover';
+import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import * as i1$j from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { hlm } from 'yukit-web/helm/utils';
@@ -65,15 +69,19 @@ import { HlmSpinner } from 'yukit-web/helm/spinner';
 import { HlmToaster } from 'yukit-web/helm/sonner';
 export { toast as yuwToast } from '@spartan-ng/brain/sonner';
 import { HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertAction } from 'yukit-web/helm/alert';
-import * as i1$i from 'yukit-web/helm/dialog';
+import * as i1$k from '@spartan-ng/brain/dialog';
+import { BrnDialogTrigger, BrnDialogClose } from '@spartan-ng/brain/dialog';
+import * as i1$l from 'yukit-web/helm/dialog';
 import { HlmDialogImports } from 'yukit-web/helm/dialog';
-import * as i1$j from 'yukit-web/helm/alert-dialog';
+import * as i1$n from 'yukit-web/helm/alert-dialog';
 import { HlmAlertDialogImports } from 'yukit-web/helm/alert-dialog';
-import * as i1$k from 'yukit-web/helm/tabs';
+import * as i1$m from '@spartan-ng/brain/alert-dialog';
+import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
+import * as i1$o from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
-import * as i1$l from 'yukit-web/helm/attachment';
+import * as i1$p from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
-import * as i1$m from 'yukit-web/helm/sidebar';
+import * as i1$q from 'yukit-web/helm/sidebar';
 import { injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset } from 'yukit-web/helm/sidebar';
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 
@@ -161,6 +169,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{}]
         }] });
 
+/**
+ * Declares the content of a single text segment inside `<yuw-button>`'s button group. Apply it to
+ * an `<ng-template>` and pass the id of the `kind: 'text'` entry it belongs to, matching an entry
+ * in the `buttons` input.
+ *
+ * Exists because a text segment often isn't text — a checkbox, a badge, an icon with a count — and a
+ * component cannot travel through a data array. An entry whose id has no matching template falls
+ * back to its `label`, so the plain-string case needs no template at all.
+ *
+ * Usage:
+ * ```html
+ * <yuw-button [buttons]="entries">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
+ * ```
+ */
+class YuwButtonGroupTextDirective {
+    constructor() {
+        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwButtonGroupText' });
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonGroupTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwButtonGroupTextDirective, isStandalone: true, selector: "ng-template[yuwButtonGroupText]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwButtonGroupText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonGroupTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwButtonGroupText]',
+                }]
+        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwButtonGroupText", required: true }] }] } });
+
 /**
  * yukit-web's own class layer for `<yuw-button>`, applied on top of the helm `buttonVariants()`
  * output. The result lands on the `[class]` binding of the inner `[hlmBtn]` element; the helm
@@ -184,6 +225,16 @@ const yuwButtonVariants = cva('', {
             destructive: '',
             link: '',
         },
+        size: {
+            default: 'h-10',
+            xs: "h-7",
+            sm: "h-9",
+            lg: 'h-11',
+            icon: 'size-10',
+            'icon-xs': "size-7",
+            'icon-sm': 'size-9',
+            'icon-lg': 'size-11',
+        },
         /**
          * Strips every background/border the helm variants set, covering each modifier stack they
          * use (`hover:`, `aria-expanded:`, `dark:`, `dark:hover:`, `[a]:hover:`) so `twMerge` drops
@@ -201,6 +252,7 @@ const yuwButtonVariants = cva('', {
         transparent: false,
     },
 });
+const yuwButtonGroupTextClass = 'bg-transparent text-foreground';
 
 /**
  * Button component supporting single action button or grouped button options.
@@ -217,7 +269,9 @@ const yuwButtonVariants = cva('', {
  * - `class`: Extra CSS classes merged onto the inner button/anchor (single and link mode); merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
- * - `buttons`: Array of button items (`YuwButtonGroupItemDto[]`) to render as a welded button group.
+ * - `buttons`: Array of group entries (`YuwButtonGroupEntryDto[]`) to render as a welded button group.
+ *   A `kind: 'text'` entry renders a static, non-interactive segment instead of a button; give it an
+ *   `<ng-template yuwButtonGroupText="<id>">` to fill it with markup rather than a plain `label`.
  * - `orientation`: Group layout orientation (`'horizontal'` or `'vertical'`). Default is `'horizontal'`.
  * - `groupAriaLabel`: Accessible name for button group container.
  *
@@ -225,6 +279,12 @@ const yuwButtonVariants = cva('', {
  * - `clicked`: Emits MouseEvent on single button click.
  * - `buttonClicked`: Emits object containing clicked button `id` and `event` in group mode.
  *
+ * The host carries `inline-flex` so it is a real box rather than an inline one: an overlay trigger
+ * directive composed onto `<yuw-button>` (see `YuwPopoverTriggerDirective`) anchors its panel to the
+ * host element, and an inline host reports a rect that misses the button's own box. Elements that
+ * need to be positioned — an overlay's close button, for instance — get a positioned wrapper around
+ * `<yuw-button>` rather than relying on the host's own display.
+ *
  * Single Button Usage:
  * ```html
  * <yuw-button variant="outline" color="primary" (clicked)="onSave()">Save</yuw-button>
@@ -234,6 +294,12 @@ const yuwButtonVariants = cva('', {
  * Button Group Usage:
  * ```html
  * <yuw-button [buttons]="actionList" (buttonClicked)="onAction($event)" />
+ *
+ * <yuw-button [buttons]="[{id: 'caption', kind: 'text', label: 'Sort by'}, ...sortActions]">
+ *   <ng-template yuwButtonGroupText="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button>
  * ```
  */
 class YuwButtonComponent {
@@ -258,21 +324,39 @@ class YuwButtonComponent {
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.clicked = output();
         this.buttonClicked = output();
+        this._textClass = yuwButtonGroupTextClass;
         this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
+        this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
         /** Classes for the single-mode button/anchor: our variant layer + the consumer's `class`, which goes last so it wins. */
-        this._btnClass = computed(() => cn(yuwButtonVariants({ variant: this.variant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
-        this._resolved = computed(() => (this.buttons() ?? []).map((button) => {
-            const variant = button.variant ?? this.variant();
-            return {
-                ...button,
-                variant,
-                size: button.size ?? this.size(),
-                color: button.color ?? this.color(),
-                disabled: button.disabled ?? false,
-                type: button.type ?? 'button',
-                class: yuwButtonVariants({ variant, transparent: button.transparent ?? false }),
-            };
-        }), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        this._btnClass = computed(() => cn(yuwButtonVariants({ size: this.size(), variant: this._effectiveVariant(), transparent: this.transparent() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
+        this._texts = contentChildren(YuwButtonGroupTextDirective, ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
+        /**
+         * The group's entries, each carrying everything its branch of the template needs.
+         *
+         * A text entry has no variant/size/color to fall back to, so it takes its own path rather than
+         * being run through the button resolver, which would invent fields its DTO doesn't declare. Its
+         * content template is looked up through a `Map` rather than a per-entry `.find()`, which would
+         * make an n-entry group cost n² comparisons.
+         */
+        this._resolved = computed(() => {
+            const templates = new Map(this._texts().map((text) => [text.entryId(), text.templateRef]));
+            return (this.buttons() ?? []).map((entry) => {
+                if (entry.kind === 'text') {
+                    return { ...entry, template: templates.get(entry.id) };
+                }
+                const transparent = entry.transparent ?? false;
+                const variant = transparent ? 'ghost' : (entry.variant ?? this.variant());
+                return {
+                    ...entry,
+                    variant,
+                    size: entry.size ?? this.size(),
+                    color: entry.color ?? this.color(),
+                    disabled: entry.disabled ?? false,
+                    type: entry.type ?? 'button',
+                    class: yuwButtonVariants({ variant, transparent }),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     }
     onClick(event) {
         if (this.disabled()) {
@@ -287,16 +371,26 @@ class YuwButtonComponent {
         this.buttonClicked.emit({ id: button.id, event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" } }, ngImport: i0, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"variant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n} @else {\n  <button hlmBtn [variant]=\"variant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()" }, classAttribute: "inline-flex" }, queries: [{ propertyName: "_texts", predicate: YuwButtonGroupTextDirective, isSignal: true }], ngImport: i0, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.kind === 'text') {\n        <hlm-button-group-text [class]=\"_textClass\">\n          @if (button.template) {\n            <ng-container [ngTemplateOutlet]=\"button.template\"/>\n          } @else {\n            {{ button.label }}\n          }\n        </hlm-button-group-text>\n\n      } @else if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmButtonGroup, selector: "[hlmButtonGroup],hlm-button-group", inputs: ["orientation"] }, { kind: "directive", type: HlmButtonGroupText, selector: "[hlmButtonGroupText],hlm-button-group-text" }, { kind: "directive", type: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-button', imports: [HlmButton, HlmButtonGroup, HlmDropdownMenuTrigger], host: {
+            args: [{ selector: 'yuw-button', imports: [NgTemplateOutlet, HlmButton, HlmButtonGroup, HlmButtonGroupText, HlmDropdownMenuTrigger], host: {
+                        class: 'inline-flex',
                         '[class.cursor-not-allowed]': 'disabled()',
                         '[attr.data-yuw-color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"variant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n} @else {\n  <button hlmBtn [variant]=\"variant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n" }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_isGroup()) {\n  <div hlmButtonGroup [orientation]=\"orientation()\" [attr.aria-label]=\"groupAriaLabel()\">\n    @for (button of _resolved(); track button.id) {\n      @if (button.kind === 'text') {\n        <hlm-button-group-text [class]=\"_textClass\">\n          @if (button.template) {\n            <ng-container [ngTemplateOutlet]=\"button.template\"/>\n          } @else {\n            {{ button.label }}\n          }\n        </hlm-button-group-text>\n\n      } @else if (button.href && !button.disabled) {\n        <a hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [href]=\"button.href\" [target]=\"button.target\"\n           [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n           (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n           [class]=\"button.class\">\n          {{ button.label }}\n        </a>\n      } @else {\n        <button hlmBtn [variant]=\"button.variant\" [size]=\"button.size\" [type]=\"button.type\" [disabled]=\"button.disabled\"\n                [attr.data-yuw-color]=\"button.color\" [attr.aria-label]=\"button.ariaLabel\"\n                (click)=\"onGroupClick(button, $event)\" [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n                [class]=\"button.class\">\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n  \n} @else if (href(); as hrefValue) {\n  <a hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [disabled]=\"disabled()\" [href]=\"disabled() ? null : hrefValue\"\n     [target]=\"target()\" [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\"\n     [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\" [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </a>\n\n} @else {\n  <button hlmBtn [variant]=\"_effectiveVariant()\" [size]=\"size()\" [type]=\"type()\" [disabled]=\"disabled()\"\n          [attr.aria-label]=\"ariaLabel()\" (click)=\"onClick($event)\" [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n          [class]=\"_btnClass()\">\n    <ng-content select=\"[yuwButtonIcon]\"/>\n    <ng-content/>\n  </button>\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], _texts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupTextDirective), { isSignal: true }] }] } });
 
+/** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
+const REMOVE_TEXT_CLASS = {
+    default: 'text-primary-foreground hover:text-primary-foreground',
+    secondary: 'text-secondary-foreground hover:text-secondary-foreground',
+    destructive: 'text-destructive hover:text-destructive',
+    outline: 'text-foreground hover:text-foreground',
+    ghost: 'text-foreground hover:text-foreground',
+    link: 'text-primary hover:text-primary',
+};
 /**
  * Renders a small badge or tag component for status indicators, counts, and category labels.
  *
@@ -313,26 +407,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwBadgeComponent {
     constructor() {
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
         this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.removed = output();
         this.dotClass = computed(() => (this.dot() ? 'size-4 p-0' : ''), ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
+        this.removeClass = computed(() => REMOVE_TEXT_CLASS[this.variant() ?? 'default'], ...(ngDevMode ? [{ debugName: "removeClass" }] : /* istanbul ignore next */ []));
     }
     onRemoveClick(event) {
         event.stopPropagation();
         this.removed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <button type=\"button\" hlmBtn variant=\"ghost\" size=\"icon-xs\" [attr.aria-label]=\"removeLabel()\"\n            (click)=\"onRemoveClick($event)\">\n      <ng-icon name=\"lucideX\"/>\n    </button>\n  }\n}\n", dependencies: [{ kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "dotClass()", "attr.data-yuw-color": "color()" } }, providers: [provideIcons({ lucideX })], hostDirectives: [{ directive: i1.HlmBadge, inputs: ["variant", "variant"] }], ngImport: i0, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <yuw-button variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n                [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\n      <ng-icon  name=\"lucideX\"/>\n    </yuw-button>\n  }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-badge', hostDirectives: [{ directive: HlmBadge, inputs: ['variant'] }], imports: [HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+            args: [{ selector: 'yuw-badge', hostDirectives: [{ directive: HlmBadge, inputs: ['variant'] }], imports: [YuwButtonComponent, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         '[class]': 'dotClass()',
                         '[attr.data-yuw-color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <button type=\"button\" hlmBtn variant=\"ghost\" size=\"icon-xs\" [attr.aria-label]=\"removeLabel()\"\n            (click)=\"onRemoveClick($event)\">\n      <ng-icon name=\"lucideX\"/>\n    </button>\n  }\n}\n" }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dot()) {\n  <ng-content select=\"[yuwBadgeIcon]\"/>\n  <span class=\"truncate\"><ng-content/></span>\n\n  @if (removeLabel()) {\n    <yuw-button variant=\"ghost\" size=\"icon-xs\" [color]=\"color()\" [ariaLabel]=\"removeLabel()\"\n                [class]=\"removeClass()\" (clicked)=\"onRemoveClick($event)\">\n      <ng-icon  name=\"lucideX\"/>\n    </yuw-button>\n  }\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
  * Navigation breadcrumb bar displaying page hierarchy and links.
@@ -357,11 +453,11 @@ class YuwBreadcrumbComponent {
         this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwBreadcrumbComponent, isStandalone: true, selector: "yuw-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.HlmBreadcrumb, selector: "[hlmBreadcrumb]", inputs: ["aria-label"] }, { kind: "component", type: i1$1.HlmBreadcrumbSeparator, selector: "[hlmBreadcrumbSeparator]" }, { kind: "directive", type: i1$1.HlmBreadcrumbItem, selector: "[hlmBreadcrumbItem]" }, { kind: "directive", type: i1$1.HlmBreadcrumbLink, selector: "[hlmBreadcrumbLink]", inputs: ["link"] }, { kind: "directive", type: i1$1.HlmBreadcrumbPage, selector: "[hlmBreadcrumbPage]" }, { kind: "directive", type: i1$1.HlmBreadcrumbList, selector: "[hlmBreadcrumbList]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"text-foreground font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n" }]
+            args: [{ selector: 'yuw-breadcrumb', imports: [...HlmBreadcrumbImports], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav hlmBreadcrumb [aria-label]=\"ariaLabel()\">\n  <ol hlmBreadcrumbList>\n    @for (item of items(); track $index; let last = $last) {\n      <li hlmBreadcrumbItem>\n        @if (last) {\n          <span hlmBreadcrumbPage>{{ item.label }}</span>\n        } @else if (item.href) {\n          <a hlmBreadcrumbLink [link]=\"item.href\">{{ item.label }}</a>\n        } @else {\n          <span class=\"font-normal\">{{ item.label }}</span>\n        }\n      </li>\n      @if (!last) {\n        <li hlmBreadcrumbSeparator>{{ separator() }}</li>\n      }\n    }\n  </ol>\n</nav>\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
 
 /**
@@ -859,10 +955,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n  because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n  hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n  group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n<hlm-input-group [class]=\"_classes()\">\n  @if (_hasLeftAddon()) {\n  <hlm-input-group-addon align=\"block-start\">\n    <ng-content select=\"yuw-left-addon\" />\n  </hlm-input-group-addon>\n  }\n\n  <textarea hlmInputGroupTextarea [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\"\n    [required]=\"required()\" [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\"\n    [attr.name]=\"name()\" [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\" (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n\n  @if (_hasRightAddon()) {\n  <hlm-input-group-addon align=\"block-end\">\n    <ng-content select=\"yuw-right-addon\" />\n  </hlm-input-group-addon>\n  }\n</hlm-input-group>\n} @else {\n<textarea hlmTextarea [class]=\"_classes()\" [id]=\"_inputId()\" [value]=\"value()\" [disabled]=\"_disabled()\" [readOnly]=\"readonly()\" [required]=\"required()\"\n  [forceInvalid]=\"invalid()\" [attr.rows]=\"rows()\" [attr.maxlength]=\"maxlength()\" [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete()\" [attr.placeholder]=\"placeholder()\" (input)=\"onInput($event)\"\n  (change)=\"onChange()\" (blur)=\"_onBlur()\"></textarea>\n}" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }] } });
 
+/**
+ * Class map for the collapsible wrapper of `yuw-search-input`.
+ *
+ * The wrapper exists because the component host is `display: contents` and cannot own the animated
+ * width itself. Width animates as `max-width`, bound inline from `expandedWidth`, so the same
+ * element can be a 32px square when collapsed and the full field when expanded.
+ *
+ * Deliberately **not** `overflow-hidden`: the helm draws the group's focus ring outside the border
+ * box, so clipping here would crop it. The input clips itself instead — see
+ * `searchInputFieldVariants`.
+ *
+ * The anchoring and transition classes hang off `collapseFrom` rather than the cva base, because a
+ * non-collapsible instance renders the same wrapper and must stay a plain box with no transition.
+ * The anchor is an auto margin rather than `position: absolute`, so the control keeps participating
+ * in its parent's layout.
+ */
+const searchInputCollapsibleVariants = cva('w-full', {
+    variants: {
+        collapseFrom: {
+            left: 'me-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+            right: 'ms-auto transition-[max-width] duration-300 ease-out motion-reduce:transition-none',
+        },
+        expanded: {
+            true: '',
+            false: 'max-w-8',
+        },
+    },
+    defaultVariants: {
+        expanded: true,
+    },
+});
+/**
+ * Classes for the search icon slot.
+ *
+ * Fixed 32px square, never a share of the wrapper: sizing it with `w-full` would make it track the
+ * wrapper mid-transition, sliding the icon toward the middle and snapping it back at the end.
+ * `shrink-0` holds that width against the sibling input's `flex-1`.
+ *
+ * `ps-0` cancels the addon's own `ps-2`, and `has-[>button]:ms-0` cancels the helm's
+ * `has-[>button]:ms-[-0.3rem]`; the prefix has to be repeated because tailwind-merge keys conflicts
+ * per variant prefix, so a bare `ms-0` would not displace it.
+ */
+const searchInputIconVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'w-8 shrink-0 justify-center ps-0 has-[>button]:ms-0',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        collapsible: false,
+    },
+});
+/**
+ * Classes for the native input while the control is collapsible.
+ *
+ * The input clips itself so the wrapper doesn't have to (which would take the focus ring with it).
+ * `min-w-0` is what lets it shrink: a flex item defaults to `min-width: auto` and would otherwise
+ * hold the collapsed wrapper open past 32px.
+ */
+const searchInputFieldVariants = cva('', {
+    variants: {
+        collapsible: {
+            true: 'min-w-0 overflow-hidden',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        collapsible: false,
+    },
+});
+
 /** Module-level counter backing each instance's stable fallback `id`. */
 let nextYuwSearchInputId = 0;
 /**
- * Search input control featuring a leading search icon, optional clear button, and form integration (`ngModel`, `formControlName`).
+ * Search input control featuring a leading search icon, optional clear button, an optional
+ * collapsible mode, and form integration (`ngModel`, `formControlName`).
  *
  * Inputs / Models:
  * - `value`: Two-way search query string.
@@ -875,6 +1044,14 @@ let nextYuwSearchInputId = 0;
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `placeholder`: Hint text shown inside the empty field.
  * - `clearAriaLabel`: Accessible name for the clear button. Supplying it enables the clear button; omit to hide it.
+ * - `collapseFrom`: Enables collapsible mode and picks the anchored edge — `'right'` collapses back
+ *   towards the right edge (the field grows leftwards), `'left'` mirrors it. Omit for a field that
+ *   is always expanded.
+ * - `expandAriaLabel`: Accessible name for the collapsed search button. Required to make collapsible
+ *   mode usable, since the collapsed control has no visible text — user-facing text the consuming
+ *   app is responsible for translating.
+ * - `expandedWidth`: CSS width the field animates out to, e.g. `'18rem'`. Default is `'16rem'`.
+ *   Collapsible mode only.
  * - `class`: Extra classes merged onto the input group.
  *
  * Outputs:
@@ -882,9 +1059,26 @@ let nextYuwSearchInputId = 0;
  * - `committed`: Emits the current query string when the user presses Enter — for searches that
  *   hit a server on explicit submit rather than on every keystroke.
  *
+ * ## Collapsible mode
+ *
+ * Collapsed, the control is a square icon button; activating it animates the same element out to its
+ * expanded width and focuses the field. It collapses again on Escape, or on blur while the query is
+ * empty — a blur with text still in the field keeps the field open, because collapsing would hide a
+ * query the user can no longer see or edit.
+ *
+ * Button and field are one element tree rather than two swapped views, so the transition is
+ * continuous and the input is never re-created mid-animation (which would drop focus and the caret).
+ *
  * Usage:
  * ```html
  * <yuw-search-input [(value)]="query" placeholder="Search items..." clearAriaLabel="Clear search" (searched)="onSearch($event)" />
+ *
+ * <yuw-search-input
+ *   [(value)]="query"
+ *   collapseFrom="right"
+ *  *   expandAriaLabel="Open search"
+ *   placeholder="Search items..."
+ * />
  * ```
  */
 class YuwSearchInputComponent extends YuwValueAccessorBase {
@@ -900,15 +1094,31 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
         this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+        this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
+        this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+        this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
+        this._input = viewChild.required('searchInput');
+        this._injector = inject(Injector);
         this.searched = output();
         this.committed = output();
-        this._autoId = `yuw-search-input-${++nextYuwSearchInputId}`;
         this._inputId = computed(() => this.inputId() ?? this._autoId, ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
         this._classes = computed(() => cn(this.userClass()), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
         this._disabled = computed(() => this._isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
-        this._showClear = computed(() => this.clearAriaLabel() !== undefined && this.value().length > 0 && !this._disabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
-        this._input = viewChild.required('searchInput');
+        this._collapsible = computed(() => this.collapseFrom() !== undefined, ...(ngDevMode ? [{ debugName: "_collapsible" }] : /* istanbul ignore next */ []));
+        this._expanded = computed(() => !this._collapsible() || this._open(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+        this._wrapperClasses = computed(() => searchInputCollapsibleVariants({ collapseFrom: this.collapseFrom(), expanded: this._expanded() }), ...(ngDevMode ? [{ debugName: "_wrapperClasses" }] : /* istanbul ignore next */ []));
+        this._wrapperMaxWidth = computed(() => (this._expanded() ? this.expandedWidth() : null), ...(ngDevMode ? [{ debugName: "_wrapperMaxWidth" }] : /* istanbul ignore next */ []));
+        this._iconClasses = computed(() => searchInputIconVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_iconClasses" }] : /* istanbul ignore next */ []));
+        this._fieldClasses = computed(() => searchInputFieldVariants({ collapsible: this._collapsible() }), ...(ngDevMode ? [{ debugName: "_fieldClasses" }] : /* istanbul ignore next */ []));
+        this._showExpandButton = computed(() => !this._expanded() && !this._disabled(), ...(ngDevMode ? [{ debugName: "_showExpandButton" }] : /* istanbul ignore next */ []));
+        this._showClear = computed(() => this.clearAriaLabel() !== undefined &&
+            this.value().length > 0 &&
+            this._expanded() &&
+            !this._disabled() &&
+            !this.readonly(), ...(ngDevMode ? [{ debugName: "_showClear" }] : /* istanbul ignore next */ []));
     }
     _emptyValue() {
         return '';
@@ -926,15 +1136,50 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
         this.searched.emit('');
         this._input().nativeElement.focus();
     }
+    /**
+     * Focus is deferred to the next render: while collapsed the input carries `tabindex="-1"` and
+     * `aria-hidden`, and focusing it before those bindings clear would be dropped by the browser.
+     */
+    onExpand() {
+        this._open.set(true);
+        afterNextRender(() => this._input().nativeElement.focus(), { injector: this._injector });
+    }
+    /**
+     * Expands when the collapsed button receives focus, so reaching it with Tab opens the field
+     * instead of leaving the user on a button they must also activate.
+     *
+     * Gated on `:focus-visible` to stay out of a focus loop: collapsing on blur remounts this button,
+     * and if the browser then lands focus on it, an ungated handler would re-expand and the control
+     * could never be tabbed past. `:focus-visible` is set for keyboard traversal but not for the
+     * programmatic/pointer focus that a collapse produces.
+     */
+    onExpandFocus(event) {
+        if (event.target.matches(':focus-visible')) {
+            this.onExpand();
+        }
+    }
+    onEscape() {
+        if (!this._collapsible()) {
+            return;
+        }
+        this._open.set(false);
+        this._input().nativeElement.blur();
+    }
+    onBlur() {
+        this._onBlur();
+        if (this._collapsible() && this.value().length === 0) {
+            this._open.set(false);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (_showClear()) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n        <ng-icon name=\"lucideX\"/>\n      </button>\n    </hlm-input-group-addon>\n  }\n</hlm-input-group>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          class=\"pointer-events-auto\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\"/>\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\"/>\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\"/>\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n  <hlm-input-group-addon align=\"inline-start\">\n    <ng-icon name=\"lucideSearch\"/>\n  </hlm-input-group-addon>\n\n  <input\n    #searchInput\n    hlmInputGroupInput\n    [id]=\"_inputId()\"\n    type=\"text\"\n    inputmode=\"search\"\n    [value]=\"value()\"\n    [disabled]=\"_disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"invalid()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.placeholder]=\"placeholder()\"\n    (input)=\"onInput($event)\"\n    (keydown.enter)=\"onEnter()\"\n    (blur)=\"_onBlur()\"\n  />\n\n  @if (_showClear()) {\n    <hlm-input-group-addon align=\"inline-end\">\n      <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n        <ng-icon name=\"lucideX\"/>\n      </button>\n    </hlm-input-group-addon>\n  }\n</hlm-input-group>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n  <hlm-input-group [class]=\"_classes()\">\n    <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n      @if (_showExpandButton()) {\n        <button\n          hlmInputGroupButton\n          size=\"icon-sm\"\n          class=\"pointer-events-auto\"\n          [attr.aria-label]=\"expandAriaLabel()\"\n          [attr.aria-expanded]=\"false\"\n          (focus)=\"onExpandFocus($event)\"\n          (click)=\"onExpand()\"\n        >\n          <ng-icon name=\"lucideSearch\"/>\n        </button>\n      } @else {\n        <ng-icon name=\"lucideSearch\"/>\n      }\n    </hlm-input-group-addon>\n\n    <input\n      #searchInput\n      hlmInputGroupInput\n      [class]=\"_fieldClasses()\"\n      [id]=\"_inputId()\"\n      type=\"text\"\n      inputmode=\"search\"\n      [value]=\"value()\"\n      [disabled]=\"_disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [forceInvalid]=\"invalid()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.tabindex]=\"_expanded() ? null : -1\"\n      [attr.aria-hidden]=\"_expanded() ? null : true\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (keydown.escape)=\"onEscape()\"\n      (blur)=\"onBlur()\"\n    />\n\n    @if (_showClear()) {\n      <hlm-input-group-addon align=\"inline-end\">\n        <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n          <ng-icon name=\"lucideX\"/>\n        </button>\n      </hlm-input-group-addon>\n    }\n  </hlm-input-group>\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searched: [{ type: i0.Output, args: ["searched"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
 
 /** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
  * directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
@@ -2190,6 +2435,10 @@ const YUW_DATATABLE_FEATURES = {
  *   User-facing text the consuming app is responsible for translating.
  * - `nextPageLabel` (required): Accessible name for the footer's next-page button. User-facing
  *   text the consuming app is responsible for translating.
+ * - `paginationEllipsisSrText` (required): Screen-reader text for the pagination ellipsis.
+ *   User-facing text the consuming app is responsible for translating.
+ * - `paginationAriaLabel` (required): Accessible name for the pagination navigation landmark.
+ *   User-facing text the consuming app is responsible for translating.
  * - `caption`: Optional `<caption>` text for the table. User-facing text the consuming app is
  *   responsible for translating; when absent, no caption is rendered.
  * - `tableClass`: Extra classes merged onto the inner `<table>` element. The host is
@@ -2230,6 +2479,8 @@ class YuwDatatableComponent {
         this.loadingRows = input(5, { ...(ngDevMode ? { debugName: "loadingRows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.previousPageLabel = input.required(...(ngDevMode ? [{ debugName: "previousPageLabel" }] : /* istanbul ignore next */ []));
         this.nextPageLabel = input.required(...(ngDevMode ? [{ debugName: "nextPageLabel" }] : /* istanbul ignore next */ []));
+        this.paginationEllipsisSrText = input.required(...(ngDevMode ? [{ debugName: "paginationEllipsisSrText" }] : /* istanbul ignore next */ []));
+        this.paginationAriaLabel = input.required(...(ngDevMode ? [{ debugName: "paginationAriaLabel" }] : /* istanbul ignore next */ []));
         this.caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
         this.tableClass = input(undefined, ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
         this.sorting = model([], ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
@@ -2237,6 +2488,8 @@ class YuwDatatableComponent {
         this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
         this.rowSelection = model({}, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
         this.pagination = model({ pageIndex: 0, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        this.currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => this.pagination().pageIndex,
+            computation: (pageIndex) => pageIndex + 1 });
         this._options = () => ({
             features: {
                 ...YUW_DATATABLE_FEATURES,
@@ -2278,6 +2531,10 @@ class YuwDatatableComponent {
             desc: 'descending',
         };
     }
+    /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
+    onPageChange(page) {
+        this.pagination.update((current) => ({ ...current, pageIndex: page - 1 }));
+    }
     /**
      * Applies the real options once, after inputs are set.
      *
@@ -2297,14 +2554,14 @@ class YuwDatatableComponent {
         this.table.setOptions((previous) => ({ ...previous, ...options }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwButtonComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
+            args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center gap-2\">\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanPreviousPage()\"\n                  [ariaLabel]=\"previousPageLabel()\" (clicked)=\"table.previousPage()\">\n        <span aria-hidden=\"true\">&larr;</span>\n      </yuw-button>\n      <span class=\"text-sm text-muted-foreground\">\n      {{ pagination().pageIndex + 1 }} / {{ table.getPageCount() || 1 }}\n    </span>\n      <yuw-button variant=\"ghost\" size=\"sm\" [disabled]=\"loading() || !table.getCanNextPage()\"\n                  [ariaLabel]=\"nextPageLabel()\" (clicked)=\"table.nextPage()\">\n        <span aria-hidden=\"true\">&rarr;</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer>\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead>\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr>\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th yuwTh scope=\"col\" [attr.colspan]=\"header.colSpan\" [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\">\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button type=\"button\" class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                          (click)=\"header.column.toggleSorting()\">\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                      {{ rendered }}\n                    </ng-container>\n\n                    @if (sorted === 'asc') {\n                      <span aria-hidden=\"true\">\u2191</span>\n                    } @else if (sorted === 'desc') {\n                      <span aria-hidden=\"true\">\u2193</span>\n                    } @else {\n                      <span aria-hidden=\"true\">\u2195</span>\n                    }\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr>\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd><span yuwSkeleton class=\"block h-4 w-full\"></span></td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr>\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd>\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination [page]=\"currentPage()\" (pageChange)=\"onPageChange($event)\"\n                      [totalPages]=\"table.getPageCount() || 1\" [previousLabel]=\"previousPageLabel()\"\n                      [nextLabel]=\"nextPageLabel()\" [ellipsisSrText]=\"paginationEllipsisSrText()\"\n                      [ariaLabel]=\"paginationAriaLabel()\" size=\"icon-sm\"/>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
 
 /**
  * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
@@ -2508,6 +2765,39 @@ const YuwItemImports = [
     YuwItemSeparatorDirective,
 ];
 
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
+ *
+ * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
+ * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`. `side` is forwarded
+ * so a trigger can override which edge the sheet appears from.
+ */
+class YuwSheetTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSheetTriggerDirective, isStandalone: true, selector: "yuw-button[yuwSheetTriggerButton]", host: { attributes: { "data-slot": "sheet-trigger" } }, hostDirectives: [{ directive: i1$f.BrnSheetTrigger, inputs: ["id", "id", "side", "side", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetTriggerButton]',
+                    hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+                    host: { 'data-slot': 'sheet-trigger' },
+                }]
+        }] });
+/** Closes the surrounding `<yuw-sheet>` when the host `<yuw-button>` is activated. */
+class YuwSheetCloseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSheetCloseDirective, isStandalone: true, selector: "yuw-button[yuwSheetClose]", host: { attributes: { "data-slot": "sheet-close" } }, hostDirectives: [{ directive: i1$f.BrnSheetClose }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwSheetClose]',
+                    hostDirectives: [BrnSheetClose],
+                    host: { 'data-slot': 'sheet-close' },
+                }]
+        }] });
+
 /**
  * Marks an element as the sheet's footer content, projected into the footer slot.
  * Its presence is also what makes the footer render at all — without it the sheet
@@ -2578,16 +2868,43 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmSheetTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-3 top-3\" hlmSheetClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$f.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "directive", type: i1$f.HlmSheetClose, selector: "button[hlmSheetClose]" }, { kind: "component", type: i1$f.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$f.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$f.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$f.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$f.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$f.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "directive", type: i1$f.HlmSheetTrigger, selector: "button[hlmSheetTrigger]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { 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.8", ngImport: i0, type: YuwSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+            args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmSheetTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-3 top-3\" hlmSheetClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
 const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
 
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-popover>`.
+ *
+ * The helm trigger directive's selector only matches a native `button`, so composing the brain
+ * directive here is what lets the popover use `<yuw-button>` rather than a bare `[hlmBtn]` element.
+ * Brain needs three things from its host, all of which `<yuw-button>` provides: the `click` that
+ * bubbles up from the inner button, the `aria-expanded`/`data-state` attributes, and a host box to
+ * anchor the panel against — hence `<yuw-button>`'s `inline-flex` host, since a `display: contents`
+ * host has no rect for the overlay to position from.
+ *
+ * `data-slot` mirrors the helm directive so the popover stylesheet targets both identically.
+ */
+class YuwPopoverTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwPopoverTriggerDirective, isStandalone: true, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]", host: { attributes: { "data-slot": "popover-trigger" } }, hostDirectives: [{ directive: i1$h.BrnPopoverTrigger, inputs: ["id", "id", "brnPopoverTriggerFor", "yuwPopoverTriggerFor", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]',
+                    hostDirectives: [
+                        { directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: yuwPopoverTriggerFor', 'type'] },
+                    ],
+                    host: { 'data-slot': 'popover-trigger' },
+                }]
+        }] });
+
 /**
  * Popover component for displaying anchored floating overlay panels.
  *
@@ -2602,6 +2919,13 @@ const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
  *   over the library defaults via `twMerge`.
  * - `triggerVariant`: Button style variant for the trigger button.
  * - `triggerSize`: Button size for the trigger button.
+ * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
+ *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.
+ * - `triggerClass`: Extra classes merged onto the trigger button, last, so they beat both the
+ *   variant classes and `triggerTransparent` (e.g. `h-auto p-0` to drop the button's own box).
+ *
+ * The trigger is a `<yuw-button>`; `YuwPopoverTriggerDirective` composes the brain trigger onto it,
+ * so the popover reuses our button component instead of applying `[hlmBtn]` directly.
  *
  * Usage:
  * ```html
@@ -2623,20 +2947,22 @@ class YuwPopoverComponent {
         this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+        this.triggerTransparent = input(false, { ...(ngDevMode ? { debugName: "triggerTransparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.triggerClass = input('', ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
         this._popoverState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
     }
     onOpenChange(state) {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <button hlmBtn hlmPopoverTrigger [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$g.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$g.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$g.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$g.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$g.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$g.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "directive", type: i1$g.HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n                [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$i.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i1$i.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i1$i.HlmPopoverDescription, selector: "[hlmPopoverDescription]" }, { kind: "directive", type: i1$i.HlmPopoverHeader, selector: "[hlmPopoverHeader],hlm-popover-header" }, { kind: "directive", type: i1$i.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: i1$i.HlmPopoverTitle, selector: "[hlmPopoverTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, HlmButton], host: {
+            args: [{ selector: 'yuw-popover', imports: [...HlmPopoverImports, YuwButtonComponent, YuwPopoverTriggerDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <button hlmBtn hlmPopoverTrigger [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n" }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div hlmPopover [state]=\"_popoverState()\" [align]=\"align()\" [sideOffset]=\"sideOffset()\"\n     (stateChanged)=\"onOpenChange($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwPopoverTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\"\n                [transparent]=\"triggerTransparent()\" [class]=\"triggerClass()\">\n      <ng-content select=\"[yuwPopoverTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content/>\n  </hlm-popover-content>\n</div>\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }] } });
 
 /**
  * Tooltip directive applied directly to the element that should show a hint on hover/focus.
@@ -2665,7 +2991,7 @@ class YuwTooltipDirective {
                 tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
                 arrowClasses: (position) => hlm(tooltipPositionVariants({ position })),
             }),
-        ], hostDirectives: [{ directive: i1$h.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1$j.BrnTooltip, inputs: ["brnTooltip", "yuwTooltip", "position", "position", "hideDelay", "hideDelay", "showDelay", "showDelay", "tooltipDisabled", "tooltipDisabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTooltipDirective, decorators: [{
             type: Directive,
@@ -2867,6 +3193,43 @@ const YuwAlertImports = [
     YuwAlertDescriptionDirective,
 ];
 
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-dialog>`.
+ *
+ * The helm trigger directive's selector only matches a native `button`, so composing the brain
+ * directive here is what lets the dialog use `<yuw-button>` rather than applying `[hlmBtn]` outside
+ * of `<yuw-button>` itself. A dialog is centred rather than anchored to its trigger, so brain needs
+ * only the click — which bubbles up from the inner button — and the `aria-expanded`/`data-state`
+ * attributes it writes on the host.
+ */
+class YuwDialogTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]", host: { attributes: { "data-slot": "dialog-trigger" } }, hostDirectives: [{ directive: i1$k.BrnDialogTrigger, inputs: ["id", "id", "brnDialogTriggerFor", "yuwDialogTriggerFor", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]',
+                    hostDirectives: [
+                        { directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: yuwDialogTriggerFor', 'type'] },
+                    ],
+                    host: { 'data-slot': 'dialog-trigger' },
+                }]
+        }] });
+/** Closes the surrounding `<yuw-dialog>` when the host `<yuw-button>` is activated. */
+class YuwDialogCloseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwDialogCloseDirective, isStandalone: true, selector: "yuw-button[yuwDialogClose]", host: { attributes: { "data-slot": "dialog-close" } }, hostDirectives: [{ directive: i1$k.BrnDialogClose }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwDialogClose]',
+                    hostDirectives: [BrnDialogClose],
+                    host: { 'data-slot': 'dialog-close' },
+                }]
+        }] });
+
 /**
  * Marks an element as the dialog's footer content, projected into the footer slot.
  * Its presence is also what makes the footer render at all — without it the dialog
@@ -2942,16 +3305,40 @@ class YuwDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-2 inset-t-2\" hlmDialogClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$i.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$i.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$i.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$i.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$i.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$i.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$i.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "directive", type: i1$i.HlmDialogTrigger, selector: "button[hlmDialogTrigger],button[hlmDialogTriggerFor]" }, { kind: "directive", type: i1$i.HlmDialogClose, selector: "button[hlmDialogClose]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwDialogFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n", dependencies: [{ kind: "component", type: i1$l.HlmDialog, selector: "hlm-dialog", exportAs: ["hlmDialog"] }, { kind: "component", type: i1$l.HlmDialogContent, selector: "hlm-dialog-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$l.HlmDialogDescription, selector: "[hlmDialogDescription]" }, { kind: "directive", type: i1$l.HlmDialogFooter, selector: "[hlmDialogFooter],hlm-dialog-footer" }, { kind: "directive", type: i1$l.HlmDialogHeader, selector: "[hlmDialogHeader],hlm-dialog-header" }, { kind: "directive", type: i1$l.HlmDialogPortal, selector: "[hlmDialogPortal]" }, { kind: "directive", type: i1$l.HlmDialogTitle, selector: "[hlmDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwDialogTriggerDirective, selector: "yuw-button[yuwDialogTriggerFor], yuw-button[yuwDialogTriggerButton]" }, { kind: "directive", type: YuwDialogCloseDirective, selector: "yuw-button[yuwDialogClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, HlmButton, NgIcon], providers: [provideIcons({ lucideX })], host: {
+            args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, YuwButtonComponent, YuwDialogTriggerDirective, YuwDialogCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <button hlmBtn variant=\"ghost\" size=\"icon-sm\" class=\"absolute inset-e-2 inset-t-2\" hlmDialogClose>\n        <ng-icon name=\"lucideX\"/>\n        <span class=\"sr-only\">{{ closeLabel() }}</span>\n      </button>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-dialog-content *hlmDialogPortal [showCloseButton]=\"false\" class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n                      [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmDialogHeader>\n        @if (title()) {\n          <h2 hlmDialogTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmDialogDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto\">\n      <ng-content/>\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmDialogFooter>\n        <ng-content select=\"[yuwDialogFooter]\"/>\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-2 inset-t-2\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\"/>\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDialogFooterDirective), { isSignal: true }] }] } });
 const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
 
+/**
+ * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-alert-dialog>`.
+ *
+ * Mirrors `YuwDialogTriggerDirective`: the helm trigger only matches a native `button`, so the brain
+ * directive is composed here instead, keeping `[hlmBtn]` inside `<yuw-button>`.
+ */
+class YuwAlertDialogTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAlertDialogTriggerDirective, isStandalone: true, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]", host: { attributes: { "data-slot": "alert-dialog-trigger" } }, hostDirectives: [{ directive: i1$m.BrnAlertDialogTrigger, inputs: ["id", "id", "brnAlertDialogTriggerFor", "yuwAlertDialogTriggerFor", "type", "type"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]',
+                    hostDirectives: [
+                        {
+                            directive: BrnAlertDialogTrigger,
+                            inputs: ['id', 'brnAlertDialogTriggerFor: yuwAlertDialogTriggerFor', 'type'],
+                        },
+                    ],
+                    host: { 'data-slot': 'alert-dialog-trigger' },
+                }]
+        }] });
+
 /**
  * Marks a projected element as the leading media of a `<yuw-alert-dialog>`, rendered in a
  * highlighted square above or beside the title.
@@ -3025,13 +3412,13 @@ class YuwAlertDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmAlertDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$j.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$j.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$j.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$j.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$j.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$j.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$j.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$j.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$j.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$j.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "directive", type: i1$j.HlmAlertDialogTrigger, selector: "button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]" }, { kind: "directive", type: HlmButton, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size"], exportAs: ["hlmBtn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "hasMedia", first: true, predicate: YuwAlertDialogMediaDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n", dependencies: [{ kind: "component", type: i1$n.HlmAlertDialog, selector: "hlm-alert-dialog", exportAs: ["hlmAlertDialog"] }, { kind: "directive", type: i1$n.HlmAlertDialogAction, selector: "button[hlmAlertDialogAction]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogCancel, selector: "button[hlmAlertDialogCancel]", inputs: ["type"] }, { kind: "directive", type: i1$n.HlmAlertDialogContent, selector: "[hlmAlertDialogContent],hlm-alert-dialog-content", inputs: ["size"] }, { kind: "directive", type: i1$n.HlmAlertDialogDescription, selector: "[hlmAlertDialogDescription]" }, { kind: "directive", type: i1$n.HlmAlertDialogFooter, selector: "[hlmAlertDialogFooter],hlm-alert-dialog-footer" }, { kind: "directive", type: i1$n.HlmAlertDialogHeader, selector: "[hlmAlertDialogHeader],hlm-alert-dialog-header" }, { kind: "directive", type: i1$n.HlmAlertDialogMedia, selector: "[hlmAlertDialogMedia],hlm-alert-dialog-media" }, { kind: "directive", type: i1$n.HlmAlertDialogPortal, selector: "[hlmAlertDialogPortal]" }, { kind: "directive", type: i1$n.HlmAlertDialogTitle, selector: "[hlmAlertDialogTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-alert-dialog', imports: [...HlmAlertDialogImports, HlmButton], host: {
+            args: [{ selector: 'yuw-alert-dialog', imports: [...HlmAlertDialogImports, YuwButtonComponent, YuwAlertDialogTriggerDirective], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <button hlmAlertDialogTrigger hlmBtn [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-alert-dialog [state]=\"_dialogState()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwAlertDialogTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwAlertDialogTrigger]\"/>\n    </yuw-button>\n  }\n\n  <hlm-alert-dialog-content *hlmAlertDialogPortal [size]=\"size()\">\n    <div hlmAlertDialogHeader>\n      @if (hasMedia()) {\n        <div hlmAlertDialogMedia>\n          <ng-content select=\"[yuwAlertDialogMedia]\"/>\n        </div>\n      }\n\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n\n      @if (description()) {\n        <p hlmAlertDialogDescription>{{ description() }}</p>\n      }\n    </div>\n\n    <ng-content/>\n\n    <div hlmAlertDialogFooter>\n      <button hlmAlertDialogCancel (click)=\"cancelled.emit()\">{{ cancelLabel() }}</button>\n      <button hlmAlertDialogAction [variant]=\"confirmVariant()\" (click)=\"confirmed.emit()\">\n        {{ confirmLabel() }}\n      </button>\n    </div>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: true }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: true }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], hasMedia: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwAlertDialogMediaDirective), { isSignal: true }] }] } });
 
 /**
@@ -3096,7 +3483,7 @@ class YuwTabsComponent {
         this.activeTab.set(tabId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\"/>\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$k.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$k.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$k.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$k.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$k.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\"/>\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwTabsComponent, decorators: [{
             type: Component,
@@ -3128,7 +3515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwAttachmentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDirective, isStandalone: true, selector: "[yuwAttachment], yuw-attachment", hostDirectives: [{ directive: i1$l.HlmAttachment, inputs: ["state", "state", "size", "size", "orientation", "orientation"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDirective, isStandalone: true, selector: "[yuwAttachment], yuw-attachment", hostDirectives: [{ directive: i1$p.HlmAttachment, inputs: ["state", "state", "size", "size", "orientation", "orientation"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDirective, decorators: [{
             type: Directive,
@@ -3140,7 +3527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Scrollable, snapping row that lays out several attachment cards. */
 class YuwAttachmentGroupDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentGroupDirective, isStandalone: true, selector: "[yuwAttachmentGroup], yuw-attachment-group", hostDirectives: [{ directive: i1$l.HlmAttachmentGroup }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentGroupDirective, isStandalone: true, selector: "[yuwAttachmentGroup], yuw-attachment-group", hostDirectives: [{ directive: i1$p.HlmAttachmentGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentGroupDirective, decorators: [{
             type: Directive,
@@ -3152,7 +3539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Leading media slot of an attachment, for a file-type icon or an image preview. Supports `variant` (`'icon'`, `'image'`). */
 class YuwAttachmentMediaDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentMediaDirective, isStandalone: true, selector: "[yuwAttachmentMedia], yuw-attachment-media", hostDirectives: [{ directive: i1$l.HlmAttachmentMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentMediaDirective, isStandalone: true, selector: "[yuwAttachmentMedia], yuw-attachment-media", hostDirectives: [{ directive: i1$p.HlmAttachmentMedia, inputs: ["variant", "variant"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentMediaDirective, decorators: [{
             type: Directive,
@@ -3164,7 +3551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Text content container of an attachment, holding its title and description. */
 class YuwAttachmentContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentContentDirective, isStandalone: true, selector: "[yuwAttachmentContent], yuw-attachment-content", hostDirectives: [{ directive: i1$l.HlmAttachmentContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentContentDirective, isStandalone: true, selector: "[yuwAttachmentContent], yuw-attachment-content", hostDirectives: [{ directive: i1$p.HlmAttachmentContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentContentDirective, decorators: [{
             type: Directive,
@@ -3176,7 +3563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** File name of an attachment. Truncates and shimmers while the attachment is uploading or processing. */
 class YuwAttachmentTitleDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTitleDirective, isStandalone: true, selector: "[yuwAttachmentTitle], yuw-attachment-title", hostDirectives: [{ directive: i1$l.HlmAttachmentTitle }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTitleDirective, isStandalone: true, selector: "[yuwAttachmentTitle], yuw-attachment-title", hostDirectives: [{ directive: i1$p.HlmAttachmentTitle }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTitleDirective, decorators: [{
             type: Directive,
@@ -3188,7 +3575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Secondary line of an attachment, for file size, progress, or an error message. */
 class YuwAttachmentDescriptionDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDescriptionDirective, isStandalone: true, selector: "[yuwAttachmentDescription], yuw-attachment-description", hostDirectives: [{ directive: i1$l.HlmAttachmentDescription }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentDescriptionDirective, isStandalone: true, selector: "[yuwAttachmentDescription], yuw-attachment-description", hostDirectives: [{ directive: i1$p.HlmAttachmentDescription }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentDescriptionDirective, decorators: [{
             type: Directive,
@@ -3200,7 +3587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Trailing container for an attachment's action buttons. */
 class YuwAttachmentActionsDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentActionsDirective, isStandalone: true, selector: "[yuwAttachmentActions], yuw-attachment-actions", hostDirectives: [{ directive: i1$l.HlmAttachmentActions }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentActionsDirective, isStandalone: true, selector: "[yuwAttachmentActions], yuw-attachment-actions", hostDirectives: [{ directive: i1$p.HlmAttachmentActions }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentActionsDirective, decorators: [{
             type: Directive,
@@ -3235,7 +3622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Turns the whole attachment card into a single clickable target, layered under its actions. */
 class YuwAttachmentTriggerDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTriggerDirective, isStandalone: true, selector: "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", hostDirectives: [{ directive: i1$l.HlmAttachmentTrigger, inputs: ["type", "type"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwAttachmentTriggerDirective, isStandalone: true, selector: "button[yuwAttachmentTrigger], a[yuwAttachmentTrigger]", hostDirectives: [{ directive: i1$p.HlmAttachmentTrigger, inputs: ["type", "type"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwAttachmentTriggerDirective, decorators: [{
             type: Directive,
@@ -3313,13 +3700,13 @@ class YuwSidebarTriggerComponent {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarTriggerComponent, isStandalone: true, selector: "yuw-sidebar-trigger", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n", dependencies: [{ kind: "component", type: HlmSidebarTrigger, selector: "button[hlmSidebarTrigger]", inputs: ["srOnlyText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar-trigger', imports: [HlmSidebarTrigger], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\"></button>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button hlmSidebarTrigger [srOnlyText]=\"label()\" class=\"cursor-pointer\"></button>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 
 /**
@@ -3354,7 +3741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwSidebarWrapperDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarWrapperDirective, isStandalone: true, selector: "[yuwSidebarWrapper], yuw-sidebar-wrapper", hostDirectives: [{ directive: i1$m.HlmSidebarWrapper, inputs: ["sidebarWidth", "sidebarWidth", "sidebarWidthIcon", "sidebarWidthIcon"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarWrapperDirective, isStandalone: true, selector: "[yuwSidebarWrapper], yuw-sidebar-wrapper", hostDirectives: [{ directive: i1$q.HlmSidebarWrapper, inputs: ["sidebarWidth", "sidebarWidth", "sidebarWidthIcon", "sidebarWidthIcon"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarWrapperDirective, decorators: [{
             type: Directive,
@@ -3366,7 +3753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Top area of the sidebar, above the scrollable content. */
 class YuwSidebarHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarHeaderDirective, isStandalone: true, selector: "[yuwSidebarHeader], yuw-sidebar-header", hostDirectives: [{ directive: i1$m.HlmSidebarHeader }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarHeaderDirective, isStandalone: true, selector: "[yuwSidebarHeader], yuw-sidebar-header", hostDirectives: [{ directive: i1$q.HlmSidebarHeader }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarHeaderDirective, decorators: [{
             type: Directive,
@@ -3378,7 +3765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Scrollable middle area of the sidebar that holds the navigation groups. */
 class YuwSidebarContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$m.HlmSidebarContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$q.HlmSidebarContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, decorators: [{
             type: Directive,
@@ -3390,7 +3777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Bottom area of the sidebar, below the scrollable content. */
 class YuwSidebarFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFooterDirective, isStandalone: true, selector: "[yuwSidebarFooter], yuw-sidebar-footer", hostDirectives: [{ directive: i1$m.HlmSidebarFooter }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFooterDirective, isStandalone: true, selector: "[yuwSidebarFooter], yuw-sidebar-footer", hostDirectives: [{ directive: i1$q.HlmSidebarFooter }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, decorators: [{
             type: Directive,
@@ -3402,7 +3789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** A titled section of the sidebar. */
 class YuwSidebarGroupDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$m.HlmSidebarGroup }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$q.HlmSidebarGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, decorators: [{
             type: Directive,
@@ -3414,7 +3801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Heading of a sidebar group. Fades out when the sidebar collapses to icons. */
 class YuwSidebarGroupLabelDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$m.HlmSidebarGroupLabel }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupLabel }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, decorators: [{
             type: Directive,
@@ -3426,7 +3813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Body of a sidebar group, wrapping its menu. */
 class YuwSidebarGroupContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupContentDirective, isStandalone: true, selector: "div[yuwSidebarGroupContent]", hostDirectives: [{ directive: i1$m.HlmSidebarGroupContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupContentDirective, isStandalone: true, selector: "div[yuwSidebarGroupContent]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, decorators: [{
             type: Directive,
@@ -3438,7 +3825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Navigation list of a sidebar group. Apply to a `<ul>`. */
 class YuwSidebarMenuDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuDirective, isStandalone: true, selector: "ul[yuwSidebarMenu]", hostDirectives: [{ directive: i1$m.HlmSidebarMenu }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuDirective, isStandalone: true, selector: "ul[yuwSidebarMenu]", hostDirectives: [{ directive: i1$q.HlmSidebarMenu }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuDirective, decorators: [{
             type: Directive,
@@ -3450,7 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** A single entry of a sidebar menu. Apply to an `<li>`. */
 class YuwSidebarMenuItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuItem]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuItem]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuItemDirective, decorators: [{
             type: Directive,
@@ -3469,7 +3856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwSidebarMenuButtonDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuButtonDirective, isStandalone: true, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuButton, inputs: ["variant", "variant", "size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuButtonDirective, decorators: [{
             type: Directive,
@@ -3486,7 +3873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Trailing count or status badge of a sidebar menu item. */
 class YuwSidebarMenuBadgeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuBadgeDirective, isStandalone: true, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge", hostDirectives: [{ directive: i1$m.HlmSidebarMenuBadge }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuBadgeDirective, isStandalone: true, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge", hostDirectives: [{ directive: i1$q.HlmSidebarMenuBadge }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuBadgeDirective, decorators: [{
             type: Directive,
@@ -3498,7 +3885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Nested submenu list of a sidebar menu item. Apply to a `<ul>`. */
 class YuwSidebarMenuSubDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubDirective, isStandalone: true, selector: "ul[yuwSidebarMenuSub]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSub }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubDirective, isStandalone: true, selector: "ul[yuwSidebarMenuSub]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSub }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubDirective, decorators: [{
             type: Directive,
@@ -3510,7 +3897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** A single entry of a sidebar submenu. Apply to an `<li>`. */
 class YuwSidebarMenuSubItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuSubItem]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSubItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubItemDirective, isStandalone: true, selector: "li[yuwSidebarMenuSubItem]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubItemDirective, decorators: [{
             type: Directive,
@@ -3522,7 +3909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`. */
 class YuwSidebarMenuSubButtonDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$m.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, decorators: [{
             type: Directive,
@@ -3536,7 +3923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Divider between sidebar sections. */
 class YuwSidebarSeparatorDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarSeparatorDirective, isStandalone: true, selector: "[yuwSidebarSeparator], yuw-sidebar-separator", hostDirectives: [{ directive: i1$m.HlmSidebarSeparator }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarSeparatorDirective, isStandalone: true, selector: "[yuwSidebarSeparator], yuw-sidebar-separator", hostDirectives: [{ directive: i1$q.HlmSidebarSeparator }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSeparatorDirective, decorators: [{
             type: Directive,
@@ -3555,7 +3942,7 @@ class YuwSidebarRailDirective {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarRailDirective, isStandalone: true, selector: "button[yuwSidebarRail]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-label": "label()" } }, hostDirectives: [{ directive: i1$m.HlmSidebarRail }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarRailDirective, isStandalone: true, selector: "button[yuwSidebarRail]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-label": "label()" } }, hostDirectives: [{ directive: i1$q.HlmSidebarRail }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailDirective, decorators: [{
             type: Directive,
@@ -3570,7 +3957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 /** Main content region beside the sidebar. Apply to a `<main>`. */
 class YuwSidebarInsetDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarInsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarInsetDirective, isStandalone: true, selector: "main[yuwSidebarInset]", hostDirectives: [{ directive: i1$m.HlmSidebarInset }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarInsetDirective, isStandalone: true, selector: "main[yuwSidebarInset]", hostDirectives: [{ directive: i1$q.HlmSidebarInset }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarInsetDirective, decorators: [{
             type: Directive,
@@ -3588,5 +3975,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarFooterDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map