yukit-web 0.0.14 → 0.0.16

package/fesm2022/yukit-web.mjs

@@ -1,14 +1,13 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, inject, TemplateRef, input, ElementRef, contentChildren, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, model, viewChild, contentChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, runInInjectionContext, DestroyRef } from '@angular/core';
+import { forwardRef, signal, Directive, inject, ElementRef, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, model, viewChild, contentChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, runInInjectionContext, DestroyRef } 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, 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';
+import { NgTemplateOutlet } from '@angular/common';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideChevronRight, lucideChevronLeft, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1 from 'yukit-web/helm/badge';
@@ -172,39 +171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             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.templateRef = inject(TemplateRef);
-        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwButtonGroupText' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", 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.22", 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
@@ -214,20 +180,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 const yuwButtonVariants = cva('', {
     variants: {
-        /**
-         * Mirrors the helm `variant` input. Only `outline` needs correcting: helm paints it with
-         * `bg-background` (+ `dark:bg-input/30`) and a muted text color, while ours is transparent at
-         * rest and uses the foreground color (which `[data-yuw-color]` remaps to the accent). The
-         * helm `hover:`/`aria-expanded:` backgrounds are intentionally left in place.
-         */
-        variant: {
-            default: '',
-            secondary: '',
-            outline: 'bg-transparent text-foreground dark:bg-transparent',
-            ghost: '',
-            destructive: '',
-            link: '',
-        },
         size: {
             default: 'h-10',
             xs: 'h-7',
@@ -255,14 +207,15 @@ const yuwButtonVariants = cva('', {
         },
     },
     defaultVariants: {
-        variant: 'default',
         transparent: false,
     },
 });
-const yuwButtonGroupTextClass = 'bg-transparent text-foreground border-border dark:border-input';
 
 /**
- * Button component supporting single action button or grouped button options.
+ * A single action button, rendered as a `<button>` or, when `href` is set, an `<a>`.
+ *
+ * For a welded row of buttons driven by data, use `<yuw-button-group>`, which renders one of these
+ * per entry.
  *
  * Inputs:
  * - `variant`: Button style variant (`'default'`, `'secondary'`, `'outline'`, `'destructive'`, `'ghost'`, `'link'`). Default is `'default'`.
@@ -273,61 +226,35 @@ const yuwButtonGroupTextClass = 'bg-transparent text-foreground border-border da
  * - `href`: Renders button as an anchor tag navigating to specified URL.
  * - `target`: Target attribute for link button (e.g. `'_blank'`).
  * - `transparent`: Removes background and border styling.
- * - `class`: Extra CSS classes merged onto the inner button/anchor (single and link mode); merged last, so they win over the component's own classes.
+ * - `class`: Extra CSS classes merged onto the inner button/anchor; merged last, so they win over the component's own classes.
  * - `yuwDropdownMenuTrigger`: Optional dropdown menu template reference to trigger.
  * - `ariaLabel`: Accessible label for screen readers.
- * - `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.
  *
  * Outputs:
- * - `clicked`: Emits MouseEvent on single button click.
- * - `buttonClicked`: Emits object containing clicked button `id` and `event` in group mode.
+ * - `clicked`: Emits MouseEvent on click.
  *
  * `_btnClass` merges our variant layer with the consumer's `class`, which goes last so it wins.
  *
- * `_resolved` gives each group entry 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².
- *
  * 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:
+ * Usage:
  * ```html
  * <yuw-button variant="outline" color="primary" (clicked)="onSave()">Save</yuw-button>
  * <yuw-button href="/dashboard">Navigate</yuw-button>
  * ```
- *
- * Button Group Usage:
- * ```html
- * <yuw-button [buttons]="actionList" (buttonClicked)="onAction($event)" />
- *
- * <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 {
     constructor() {
         this._host = inject(ElementRef);
-        this._texts = contentChildren(YuwButtonGroupTextDirective, ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
         this.animationDisabled = input(false, ...(ngDevMode ? [{ debugName: "animationDisabled" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.buttons = input(undefined, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.groupAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
         this.href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.target = input(undefined, ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
         this.transparent = input(false, { ...(ngDevMode ? { debugName: "transparent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -335,37 +262,14 @@ class YuwButtonComponent {
         this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.yuwDropdownMenuTrigger = input(undefined, ...(ngDevMode ? [{ debugName: "yuwDropdownMenuTrigger" }] : /* istanbul ignore next */ []));
-        this.buttonClicked = output();
         this.clicked = output();
-        this._textClass = yuwButtonGroupTextClass;
         this._animationDisabled = computed(() => this.animationDisabled() || this._host.nativeElement.hasAttribute('aria-haspopup'), ...(ngDevMode ? [{ debugName: "_animationDisabled" }] : /* istanbul ignore next */ []));
-        this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
         this._btnClass = computed(() => cn(yuwButtonVariants({
             size: this.size(),
-            variant: this._effectiveVariant(),
             transparent: this.transparent(),
             animationDisabled: this._animationDisabled(),
         }), this.userClass()), ...(ngDevMode ? [{ debugName: "_btnClass" }] : /* istanbul ignore next */ []));
-        this._isGroup = computed(() => (this.buttons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "_isGroup" }] : /* istanbul ignore next */ []));
-        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, animationDisabled: this._animationDisabled() }),
-                };
-            });
-        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        this._effectiveVariant = computed(() => this.transparent() ? 'ghost' : this.variant(), ...(ngDevMode ? [{ debugName: "_effectiveVariant" }] : /* istanbul ignore next */ []));
     }
     onClick(event) {
         if (this.disabled()) {
@@ -373,23 +277,157 @@ class YuwButtonComponent {
         }
         this.clicked.emit(event);
     }
-    onGroupClick(button, event) {
-        if (button.disabled) {
-            return;
-        }
-        this.buttonClicked.emit({ id: button.id, event });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupAriaLabel: { classPropertyName: "groupAriaLabel", publicName: "groupAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", clicked: "clicked" }, 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      } @else if (button.href && !button.disabled) {\n        <a\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [href]=\"button.href\"\n          [target]=\"button.target\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </a>\n      } @else {\n        <button\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [type]=\"button.type\"\n          [disabled]=\"button.disabled\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonComponent, isStandalone: true, selector: "yuw-button", inputs: { animationDisabled: { classPropertyName: "animationDisabled", publicName: "animationDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, yuwDropdownMenuTrigger: { classPropertyName: "yuwDropdownMenuTrigger", publicName: "yuwDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.cursor-not-allowed": "disabled()", "attr.data-yuw-color": "color()", "attr.data-yuw-variant": "_effectiveVariant()" }, classAttribute: "inline-flex" }, ngImport: i0, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\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: HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-button', imports: [NgTemplateOutlet, HlmButton, HlmButtonGroup, HlmButtonGroupText, HlmDropdownMenuTrigger], host: {
+            args: [{ selector: 'yuw-button', imports: [HlmButton, 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.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      } @else if (button.href && !button.disabled) {\n        <a\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [href]=\"button.href\"\n          [target]=\"button.target\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </a>\n      } @else {\n        <button\n          hlmBtn\n          [variant]=\"button.variant\"\n          [size]=\"button.size\"\n          [type]=\"button.type\"\n          [disabled]=\"button.disabled\"\n          [attr.data-yuw-color]=\"button.color\"\n          [attr.aria-label]=\"button.ariaLabel\"\n          (click)=\"onGroupClick(button, $event)\"\n          [hlmDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n          [class]=\"button.class\"\n        >\n          {{ button.label }}\n        </button>\n      }\n    }\n  </div>\n} @else if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n" }]
-        }], propDecorators: { _texts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupTextDirective), { isSignal: true }] }], animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groupAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAriaLabel", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+                        '[attr.data-yuw-variant]': '_effectiveVariant()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href(); as hrefValue) {\n  <a\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [href]=\"disabled() ? null : hrefValue\"\n    [target]=\"target()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </a>\n} @else {\n  <button\n    hlmBtn\n    [variant]=\"_effectiveVariant()\"\n    [size]=\"size()\"\n    [type]=\"type()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    [hlmDropdownMenuTrigger]=\"yuwDropdownMenuTrigger()\"\n    [class]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n" }]
+        }], propDecorators: { animationDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], yuwDropdownMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwDropdownMenuTrigger", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+/**
+ * Declares the content of a single entry inside `<yuw-button-group>`. Apply it to an
+ * `<ng-template>` and pass the id of the entry it belongs to.
+ *
+ * Exists because an entry's content often isn't a string — an icon with a count, a checkbox, a
+ * badge — and markup 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-group [buttons]="entries">
+ *   <ng-template yuwButtonGroupContent="select-all">
+ *     <yuw-checkbox [(checked)]="allSelected" />
+ *   </ng-template>
+ * </yuw-button-group>
+ * ```
+ */
+class YuwButtonGroupContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwButtonGroupContent' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwButtonGroupContentDirective, isStandalone: true, selector: "ng-template[yuwButtonGroupContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwButtonGroupContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwButtonGroupContent]',
+                }]
+        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwButtonGroupContent", required: true }] }] } });
+
+/**
+ * A welded row of buttons driven by data.
+ *
+ * Each entry renders a real `<yuw-button>`, so every button input — `variant`, `color`, `size`,
+ * `transparent`, `href`, the dropdown trigger — behaves inside the group exactly as it does on a
+ * standalone button, and the theme's `data-yuw-color` layer applies unchanged. The group only owns
+ * what a row adds: which corners stay rounded and which side draws each seam.
+ *
+ * Inputs:
+ * - `buttons`: The entries to render (`YuwButtonGroupItemDto[]`), in order.
+ * - `variant`, `size`, `color`: The row's base appearance. An entry that declares its own wins,
+ *   since a per-entry value is by definition the specific case.
+ * - `selectedVariant`, `selectedColor`: The row's appearance for an entry marked `selected`,
+ *   mirroring `variant`/`color`. Unset by default, in which case a selected entry keeps the row's
+ *   `variant`/`color` unless it states its own.
+ * - `orientation`: Layout direction (`'horizontal'`, `'vertical'`). Default is `'horizontal'`.
+ *   The seams rotate with it: a vertical group's entries own their bottom border and round only
+ *   their top (first) or bottom (last) corners.
+ * - `ariaLabel`: Accessible name for the `role="group"` container. User-facing text the consuming
+ *   app is responsible for translating.
+ *
+ * Outputs:
+ * - `buttonClicked`: Emits the clicked entry's `id` and the `MouseEvent`. An entry with
+ *   `interactive: false` is inert chrome and never emits.
+ *
+ * An entry's content is its `label`, or an `<ng-template yuwButtonGroupContent="<id>">` when it
+ * needs markup instead of a string.
+ *
+ * `_resolved` walks the entries once, resolving each value most-specific-first: the entry's
+ * state-matching field, then the entry's base field, then the group's state-matching input, then
+ * the group's base. An entry always outranks the group, so an entry carrying `selectedColor` keeps
+ * it in a row that sets its own — the entry is the specific case by definition. Every step is
+ * `undefined` until someone sets it, so no level can be shadowed by a hardcoded default.
+ * Content templates are read from a `Map` rather than a per-entry `.find()`, which would make an
+ * n-entry group cost n².
+ *
+ * Seams are pure CSS (`theme/components/button-group.css`), not classes. The helm's base `border`
+ * sets all four sides and re-applies its own radius at runtime through `classes()`, and tailwind-
+ * merge cannot drop a side from `border` — `border-y border-e` only re-asserts widths, leaving the
+ * leading border in place, which is what made each entry draw its own left edge and tint the seam
+ * with the wrong entry's color. The stylesheet zeroes the leading border width and owns the corners,
+ * where no utility class can displace it.
+ *
+ * Usage:
+ * ```html
+ * <yuw-button-group [buttons]="alignActions" (buttonClicked)="onAction($event)" />
+ *
+ * <yuw-button-group [buttons]="entries" variant="outline" color="primary">
+ *   <ng-template yuwButtonGroupContent="count">
+ *     <yuw-badge>{{ total() }}</yuw-badge>
+ *   </ng-template>
+ * </yuw-button-group>
+ * ```
+ */
+class YuwButtonGroupComponent {
+    constructor() {
+        this._contents = contentChildren(YuwButtonGroupContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.buttons = input.required(...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.selectedColor = input(undefined, ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.selectedVariant = input(undefined, ...(ngDevMode ? [{ debugName: "selectedVariant" }] : /* istanbul ignore next */ []));
+        this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.buttonClicked = output();
+        this._resolved = computed(() => {
+            const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
+            const entries = this.buttons();
+            return entries.map((entry) => {
+                const interactive = entry.interactive ?? true;
+                return {
+                    ...entry,
+                    interactive,
+                    template: templates.get(entry.id),
+                    variant: entry.selected
+                        ? (entry.selectedVariant ?? entry.variant ?? this.selectedVariant() ?? this.variant())
+                        : (entry.variant ?? this.variant()),
+                    size: entry.size ?? this.size(),
+                    color: entry.selected
+                        ? (entry.selectedColor ?? entry.color ?? this.selectedColor() ?? this.color())
+                        : (entry.color ?? this.color()),
+                    transparent: entry.transparent ?? !interactive,
+                    disabled: entry.disabled ?? false,
+                    type: entry.type ?? 'button',
+                    class: interactive ? '' : 'pointer-events-none',
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    }
+    onClick(entry, event) {
+        this.buttonClicked.emit({ id: entry.id, event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwButtonGroupComponent, isStandalone: true, selector: "yuw-button-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, selectedVariant: { classPropertyName: "selectedVariant", publicName: "selectedVariant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, host: { attributes: { "role": "group" }, properties: { "class.flex-col": "orientation() === 'vertical'", "attr.aria-label": "ariaLabel()", "attr.data-orientation": "orientation()" }, classAttribute: "inline-flex w-fit items-stretch" }, queries: [{ propertyName: "_contents", predicate: YuwButtonGroupContentDirective, isSignal: true }], ngImport: i0, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-button-group', imports: [NgTemplateOutlet, YuwButtonComponent], host: {
+                        class: 'inline-flex w-fit items-stretch',
+                        '[class.flex-col]': "orientation() === 'vertical'",
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-orientation]': 'orientation()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (button of _resolved(); track button.id) {\n  <yuw-button\n    [variant]=\"button.variant\"\n    [size]=\"button.size\"\n    [color]=\"button.color\"\n    [transparent]=\"button.transparent\"\n    [disabled]=\"button.disabled\"\n    [type]=\"button.type\"\n    [href]=\"button.href\"\n    [target]=\"button.target\"\n    [ariaLabel]=\"button.ariaLabel\"\n    [yuwDropdownMenuTrigger]=\"button.yuwDropdownMenuTrigger\"\n    [class]=\"button.class\"\n    (clicked)=\"onClick(button, $event)\"\n  >\n    @if (button.template) {\n      <ng-container [ngTemplateOutlet]=\"button.template\" />\n    } @else {\n      {{ button.label }}\n    }\n  </yuw-button>\n}\n" }]
+        }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwButtonGroupContentDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], selectedVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedVariant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 
 /** Text class for the remove button per helm badge variant, mirroring each variant's own foreground. */
 const REMOVE_TEXT_CLASS = {
@@ -429,7 +467,7 @@ class YuwBadgeComponent {
         this.removed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "buttons", "color", "disabled", "groupAriaLabel", "href", "orientation", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["buttonClicked", "clicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwBadgeComponent, isStandalone: true, selector: "yuw-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      [color]=\"color()\"\n      [ariaLabel]=\"removeLabel()\"\n      [class]=\"removeClass()\"\n      (clicked)=\"onRemoveClick($event)\"\n    >\n      <ng-icon name=\"lucideX\" />\n    </yuw-button>\n  }\n}\n", dependencies: [{ kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwBadgeComponent, decorators: [{
             type: Component,
@@ -3304,7 +3342,7 @@ class YuwSheetComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon 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: ["animationDisabled", "ariaLabel", "buttons", "color", "disabled", "groupAriaLabel", "href", "orientation", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["buttonClicked", "clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon 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: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSheetComponent, decorators: [{
             type: Component,
@@ -3391,7 +3429,7 @@ class YuwPopoverComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$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: ["animationDisabled", "ariaLabel", "buttons", "color", "disabled", "groupAriaLabel", "href", "orientation", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["buttonClicked", "clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPopoverComponent, isStandalone: true, selector: "yuw-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerTransparent: { classPropertyName: "triggerTransparent", publicName: "triggerTransparent", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      yuwPopoverTriggerButton\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$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: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwPopoverTriggerDirective, selector: "yuw-button[yuwPopoverTriggerFor], yuw-button[yuwPopoverTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPopoverComponent, decorators: [{
             type: Component,
@@ -3740,7 +3778,7 @@ class YuwDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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 }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: 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 [color]=\"triggerColor()\" [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-dialog-content\n    *hlmDialogPortal\n    [showCloseButton]=\"false\"\n    class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n    [class]=\"panelClass()\"\n  >\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: ["animationDisabled", "ariaLabel", "buttons", "color", "disabled", "groupAriaLabel", "href", "orientation", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["buttonClicked", "clicked"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDialogComponent, isStandalone: true, selector: "yuw-dialog", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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 }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: 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 [color]=\"triggerColor()\" [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwDialogTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-dialog-content\n    *hlmDialogPortal\n    [showCloseButton]=\"false\"\n    class=\"flex max-h-[calc(100dvh-2rem)] flex-col\"\n    [class]=\"panelClass()\"\n  >\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: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { 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.22", ngImport: i0, type: YuwDialogComponent, decorators: [{
             type: Component,
@@ -3847,7 +3885,7 @@ class YuwAlertDialogComponent {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cancelled: "cancelled", confirmed: "confirmed" }, 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: ["animationDisabled", "ariaLabel", "buttons", "color", "disabled", "groupAriaLabel", "href", "orientation", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["buttonClicked", "clicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwAlertDialogComponent, isStandalone: true, selector: "yuw-alert-dialog", inputs: { cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: true, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cancelled: "cancelled", confirmed: "confirmed" }, 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: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwAlertDialogTriggerDirective, selector: "yuw-button[yuwAlertDialogTriggerFor], yuw-button[yuwAlertDialogTriggerButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwAlertDialogComponent, decorators: [{
             type: Component,
@@ -4125,6 +4163,35 @@ const yuwSidebarMenuButtonClass = `
   group-data-[yuw-rail=on]:[&>span]:hidden
   group-data-[yuw-rail=on]:[&_ng-icon]:scale-125
 `;
+/**
+ * Geometry of an entry whose leading slot is a 40px avatar rather than a 16px icon. Appended to
+ * {@link yuwSidebarMenuButtonClass}, and every declaration here exists because that class and the
+ * helm beneath it are both dimensioned for the icon.
+ *
+ * `h-auto` is the load-bearing one. The helm pins a menu button to `h-8`, and the button is
+ * `overflow-hidden`, so a 40px avatar inside a 32px box is clipped top and bottom rather than
+ * enlarging the row — which is the whole point of an avatar entry. Releasing the height lets the
+ * avatar and the padding decide it, so the row is taller than an icon row by exactly the difference
+ * between the two.
+ *
+ * The collapsed padding is re-stated for the mirror-image reason: `yuwSidebarMenuButtonClass` pads the
+ * collapsed button to `py-[20px]` so a 16px icon lands on the rail's rhythm, and an avatar already
+ * stands 40px tall, so inheriting that would make the row 80px. `px-0` lets the avatar use the full
+ * width the item's own padding leaves it, centring it on the same axis as every icon above and below.
+ *
+ * The `!` on each is needed for the reason the class this extends documents — the helm's `size-8!` and
+ * `p-2!` are themselves `!important`, which `twMerge` cannot outrank on order alone. The expanded
+ * `h-auto` needs none: the helm's own `h-8` there is a plain variant class, so merge order settles it.
+ *
+ * Nothing here touches the icon rules of that class: an avatar entry renders no `ng-icon` in the
+ * leading slot, so `scale-125` has nothing to scale, and the trailing chevron is the one element it
+ * would otherwise reach — which is why the chevron pins its own size with `text-[length:…]!`.
+ */
+const yuwSidebarMenuAvatarButtonClass = `
+  h-auto
+  group-data-[collapsible=icon]:py-2!
+  group-data-[collapsible=icon]:px-0!
+`;
 const yuwSidebarMenuChevronClass = `
   ms-auto
   shrink-0
@@ -4196,7 +4263,7 @@ const yuwSidebarGroupLabelClass = `
   motion-reduce:transition-none
   group-data-[yuw-rail=on]:hidden
 `;
-const yuwSidebarGroupClass = 'group-data-[yuw-rail=on]:p-0';
+const yuwSidebarGroupClass = 'p-3 group-data-[yuw-rail=on]:p-0';
 const yuwSidebarFooterClass = 'group-data-[yuw-rail=on]:p-0';
 const yuwSidebarSubmenuWrapperClass = `
   grid
@@ -4227,7 +4294,7 @@ const yuwSidebarMenuClass = `
   gap-2
   group-data-[yuw-rail=on]:gap-0
 `;
-const yuwSidebarMenuItemClass = 'group-data-[yuw-rail=on]:p-[11px]';
+const yuwSidebarMenuItemClass = 'group-data-[yuw-rail=on]:p-3';
 const yuwSidebarMenuSubButtonClass = `
   [&>span]:truncate
   [&>span]:min-w-0
@@ -4598,6 +4665,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ],
                 }]
         }], ctorParameters: () => [] });
+/**
+ * Applied alongside `[yuwSidebarMenuButton]` on an entry whose leading slot is a 40px avatar rather
+ * than a 16px icon, carrying {@link yuwSidebarMenuAvatarButtonClass}.
+ *
+ * A directive rather than a `[class]` binding on the button, because a binding cannot win this
+ * merge. `classes()` (helm/utils) applies its registered *sources* in registration order and then
+ * appends the element's `baseClasses` — captured from the static `class` host attribute — last. An
+ * Angular `[class]` binding is neither: it writes the `class` attribute directly, races the
+ * `className` assignment `classes()` makes for its own sources, and is reclassified by the library's
+ * MutationObserver only after the fact. The observed result was the helm's `h-8` surviving and the
+ * override being dropped, leaving the 40px avatar clipped inside a 32px `overflow-hidden` button.
+ * Registering as another source puts this class after both the helm's and
+ * `[yuwSidebarMenuButton]`'s, which is the ordering `twMerge` needs to displace them.
+ *
+ * Separate from `[yuwSidebarMenuButton]` rather than an input on it, because the two are not the same
+ * role: this is the geometry of one kind of entry, and an entry either leads with an avatar or it does
+ * not. Hand-written markup applies it bare (`<a yuwSidebarMenuButton yuwSidebarMenuAvatarButton>`)
+ * next to its own `<yuw-avatar>`.
+ *
+ * It carries a value because `YuwSidebarNavComponent` renders every entry through the same three
+ * branches and cannot attach a directive conditionally — an attribute selector matches on presence, so
+ * the nav applies it to every entry and passes whether that entry actually has an avatar. Its default
+ * is `true` so the bare, hand-written form needs no value.
+ */
+class YuwSidebarMenuAvatarButtonDirective {
+    constructor() {
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'yuwSidebarMenuAvatarButton', transform: booleanAttribute });
+        classes(() => (this.enabled() ? yuwSidebarMenuAvatarButtonClass : ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuAvatarButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwSidebarMenuAvatarButtonDirective, isStandalone: true, selector: "[yuwSidebarMenuAvatarButton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "yuwSidebarMenuAvatarButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuAvatarButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuwSidebarMenuAvatarButton]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwSidebarMenuAvatarButton", required: false }] }] } });
 /** Trailing count or status badge of a sidebar menu item. */
 class YuwSidebarMenuBadgeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4802,6 +4907,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * is all it does and it stays out of `itemClicked`, since opening a submenu is not an action for the
  * consumer to handle.
  *
+ * An entry's leading slot — an `avatar` when it has one, otherwise its `icon` — is rendered from one
+ * `#leading` template rather than repeated in each of the `route` / `href` / `<button>` branches, so
+ * the avatar-over-icon precedence is stated once and the three branches cannot drift apart on it. The
+ * avatar is fixed at `<yuw-avatar>`'s `lg` size: it is the rail's own geometry (a 78px width, 12px of
+ * item padding) that decides how large an image fits there, so exposing the size per entry would let a
+ * consumer produce a row that overflows the rail. That entry's geometry then comes from
+ * `[yuwSidebarMenuAvatarButton]`, which every branch applies unconditionally and hands the entry's own
+ * `hasAvatar` — an attribute selector matches on presence, so the choice has to travel as a value
+ * rather than by attaching the directive only where it is wanted.
+ *
  * The chevron marking an expandable entry rotates off that same `aria-expanded`, read from the
  * button through the `group/menu-button` the helm already declares on every menu button. Its
  * `yuwSidebarMenuChevronClass` hides it with `hidden!` in the collapsed state, and that `!` is
@@ -4891,6 +5006,7 @@ class YuwSidebarNavComponent {
                         ...item,
                         children,
                         hasChildren,
+                        hasAvatar: item.avatar !== undefined,
                         tooltipText: item.tooltip ?? item.label,
                         activeOptions: { exact: item.exact ?? false },
                         holdsActiveChild: hasChildren && this.holdsActiveRoute(item.children),
@@ -4936,13 +5052,14 @@ class YuwSidebarNavComponent {
         return signal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #leading let-item>\n  @if (item.avatar; as avatar) {\n    <yuw-avatar size=\"lg\" [src]=\"avatar.src\" [alt]=\"avatar.alt\" [fallback]=\"avatar.fallback\" />\n  } @else if (item.icon) {\n    <ng-icon [name]=\"item.icon\" />\n  }\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuAvatarButtonDirective, selector: "[yuwSidebarMenuAvatarButton]", inputs: ["yuwSidebarMenuAvatarButton"] }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar-nav', imports: [
                         NgIcon,
                         NgTemplateOutlet,
+                        YuwAvatarComponent,
                         RouterLink,
                         RouterLinkActive,
                         YuwSidebarGroupDirective,
@@ -4951,6 +5068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSidebarMenuDirective,
                         YuwSidebarMenuItemDirective,
                         YuwSidebarMenuButtonDirective,
+                        YuwSidebarMenuAvatarButtonDirective,
                         HlmSidebarMenuButton,
                         YuwSidebarMenuBadgeDirective,
                         YuwSidebarMenuSubDirective,
@@ -4959,7 +5077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSidebarSeparatorDirective,
                     ], providers: [provideIcons({ lucideChevronRight })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #leading let-item>\n  @if (item.avatar; as avatar) {\n    <yuw-avatar size=\"lg\" [src]=\"avatar.src\" [alt]=\"avatar.alt\" [fallback]=\"avatar.fallback\" />\n  } @else if (item.icon) {\n    <ng-icon [name]=\"item.icon\" />\n  }\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu [class]=\"menuClass\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"link.isActive || item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [yuwSidebarMenuAvatarButton]=\"item.hasAvatar\"\n                [isActive]=\"item.holdsActiveChild\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded, $event) : onItemClick(item.id, $event)\"\n              >\n                <ng-container [ngTemplateOutlet]=\"leading\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
         }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /**
@@ -5072,7 +5190,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *   button that reports through `itemClicked`. An item with `children` gets a submenu that follows
  *   the sidebar's own state: an accordion while the panel is open, and a sheet sliding out beside the
  *   rail once it is collapsed to icons, so nested entries stay reachable there. Its `expanded`
- *   field seeds the accordion; the item holding the active route opens on its own.
+ *   field seeds the accordion; the item holding the active route opens on its own. An item may lead
+ *   with an `avatar` instead of an `icon` — a user account or a venue — which renders at 40px and
+ *   makes that row taller than an icon row in both states, and combines with `children` like any
+ *   other entry.
  * - `footer`: The same, rendered into the footer region.
  *
  * Outputs:
@@ -5210,5 +5331,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, 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, YuwDatatablePaginationDirective, YuwDatatableRowSelect, 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, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { DATATABLE_ALIGN_CLASS, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, 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, YuwButtonGroupComponent, YuwButtonGroupContentDirective, 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, YuwDatatablePaginationDirective, YuwDatatableRowSelect, 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, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map