yukit-web 0.0.18 → 0.0.20

package/fesm2022/yukit-web.mjs

@@ -322,7 +322,7 @@ class YuwButtonComponent {
         this.clicked.emit(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 }, 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    [yuwClass]=\"_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    [yuwClass]=\"_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"] }, { kind: "directive", type: YuwClassDirective, selector: "[yuwClass]", inputs: ["yuwClass"] }], 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    [yuwClass]=\"_btnClass()\"\n  >\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    [yuwClass]=\"_btnClass()\"\n  >\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"] }, { kind: "directive", type: YuwClassDirective, selector: "[yuwClass]", inputs: ["yuwClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwButtonComponent, decorators: [{
             type: Component,
@@ -331,7 +331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[class.cursor-not-allowed]': 'disabled()',
                         '[attr.data-yuw-color]': 'color()',
                         '[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    [yuwClass]=\"_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    [yuwClass]=\"_btnClass()\"\n  >\n    <ng-content select=\"[yuwButtonIcon]\" />\n    <ng-content />\n  </button>\n}\n" }]
+                    }, 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    [yuwClass]=\"_btnClass()\"\n  >\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    [yuwClass]=\"_btnClass()\"\n  >\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"] }] } });
 
 /**
@@ -3386,13 +3386,13 @@ 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", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, 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 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,
             args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <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 name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
         }], ctorParameters: () => [], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
 
@@ -3827,13 +3827,13 @@ 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", "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 }); }
+    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 top-1.5\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon 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,
             args: [{ selector: 'yuw-dialog', imports: [...HlmDialogImports, YuwButtonComponent, YuwDialogTriggerDirective, YuwDialogCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-dialog [state]=\"_dialogState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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 top-1.5\">\n        <yuw-button yuwDialogClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-dialog-content>\n</hlm-dialog>\n" }]
         }], propDecorators: { hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwDialogFooterDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 const YuwDialogImports = [YuwDialogComponent, YuwDialogFooterDirective];
 
@@ -3994,6 +3994,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabPanel", required: true }] }] } });
 
+class YuwTabContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.entryId = input.required({ ...(ngDevMode ? { debugName: "entryId" } : /* istanbul ignore next */ {}), alias: 'yuwTabContent' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwTabContentDirective, isStandalone: true, selector: "ng-template[yuwTabContent]", inputs: { entryId: { classPropertyName: "entryId", publicName: "yuwTabContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwTabContent]',
+                }]
+        }], propDecorators: { entryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwTabContent", required: true }] }] } });
+
 /**
  * Tabbed navigation between sibling panels.
  *
@@ -4022,27 +4037,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwTabsComponent {
     constructor() {
+        this._contents = contentChildren(YuwTabContentDirective, ...(ngDevMode ? [{ debugName: "_contents" }] : /* istanbul ignore next */ []));
         this.panels = contentChildren(YuwTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
         this.activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
         this.activeTab = model.required(...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this._listClass = computed(() => yuwTabsSizeVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
+        this._listClass = computed(() => cn(yuwTabsSizeVariants({ size: this.size() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
+        this._resolved = computed(() => {
+            const templates = new Map(this._contents().map((content) => [content.entryId(), content.templateRef]));
+            const entries = this.tabs();
+            return entries.map((entry) => {
+                return {
+                    ...entry,
+                    template: templates.get(entry.id),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     }
     onTabActivated(tabId) {
         this.activeTab.set(tabId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTabsComponent, isStandalone: true, selector: "yuw-tabs", inputs: { activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "contents" }, queries: [{ propertyName: "_contents", predicate: YuwTabContentDirective, isSignal: true }, { propertyName: "panels", predicate: YuwTabPanelDirective, isSignal: true }], ngImport: i0, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$o.HlmTabs, selector: "[hlmTabs],hlm-tabs", inputs: ["tab"] }, { kind: "directive", type: i1$o.HlmTabsList, selector: "[hlmTabsList],hlm-tabs-list", inputs: ["variant"] }, { kind: "directive", type: i1$o.HlmTabsTrigger, selector: "[hlmTabsTrigger]", inputs: ["hlmTabsTrigger"] }, { kind: "directive", type: i1$o.HlmTabsContent, selector: "[hlmTabsContent]", inputs: ["hlmTabsContent"] }, { kind: "directive", type: i1$o.HlmTabsContentLazy, selector: "ng-template[hlmTabsContentLazy]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-tabs', imports: [NgTemplateOutlet, ...HlmTabsImports], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of tabs(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">{{ tab.label }}</button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
-        }], propDecorators: { panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
+        }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**
  * Container directive for a single file attachment card.
@@ -5559,5 +5586,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, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, 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, yuwCommandDefaultFilter };
+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, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, 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, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
 //# sourceMappingURL=yukit-web.mjs.map