@ojiepermana/angular 21.1.28 → 21.1.30

package/fesm2022/ojiepermana-angular-component.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject, signal, output, viewChild, ElementRef, DestroyRef, ViewContainerRef, effect, untracked, ContentChildren, TemplateRef, Injectable, InjectionToken } from '@angular/core';
+import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject, signal, booleanAttribute, output, viewChild, ElementRef, DestroyRef, ViewContainerRef, effect, untracked, ContentChildren, TemplateRef, Injectable, InjectionToken } from '@angular/core';
 import { cva } from 'class-variance-authority';
 import { MatCalendar, MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
 import * as i1 from '@angular/forms';
@@ -96,7 +96,7 @@ class AccordionItemComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     triggerId = `ui-accordion-trigger-${nextId$1()}`;
     contentId = `ui-accordion-content-${nextId$1()}`;
-    classes = computed(() => cn('border-b', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block border-b border-border', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     open = computed(() => this.ctx.isOpen(this.value()), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
         if (!this.disabled())
@@ -174,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 class AccordionContentComponent {
     item = inject(AccordionItemComponent);
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('overflow-hidden text-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block overflow-hidden text-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AccordionContentComponent, isStandalone: true, selector: "ui-accordion-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "item.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "item.triggerId", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "hidden": "!item.open()" } }, ngImport: i0, template: `<div class="pb-4 pt-0 text-sm"><ng-content /></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -200,7 +200,7 @@ function nextId$1() {
 }
 
 const alertVariants = cva([
-    'relative w-full rounded-lg border p-4',
+    'relative block w-full rounded-lg border p-4 [&:has(ui-alert-action)]:pr-20',
     '[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]',
     '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
 ].join(' '), {
@@ -234,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class AlertTitleComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('mb-1 font-medium leading-none tracking-tight', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mb-1 block font-medium leading-none tracking-tight', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AlertTitleComponent, isStandalone: true, selector: "ui-alert-title, h5[ui-alert-title]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -249,7 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class AlertDescriptionComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm [&_p]:leading-relaxed', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block text-sm [&_p]:leading-relaxed', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AlertDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AlertDescriptionComponent, isStandalone: true, selector: "ui-alert-description", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -262,30 +262,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AlertActionComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mt-3 flex items-center justify-end sm:absolute sm:right-4 sm:top-4 sm:mt-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AlertActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AlertActionComponent, isStandalone: true, selector: "ui-alert-action", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AlertActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-alert-action',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const avatarSizeClasses = {
+    default: 'h-10 w-10',
+    sm: 'h-8 w-8',
+    lg: 'h-12 w-12',
+};
 class AvatarComponent {
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex shrink-0 overflow-hidden rounded-full', avatarSizeClasses[this.size()], this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-avatar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class AvatarImageComponent {
     src = input.required(...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     failed = signal(false, ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('aspect-square h-full w-full object-cover', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('h-full w-full object-cover', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AvatarImageComponent, isStandalone: true, selector: "ui-avatar-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AvatarImageComponent, isStandalone: true, selector: "ui-avatar-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "absolute inset-0 z-10 block" }, ngImport: i0, template: `
     @if (!failed()) {
       <img [src]="src()" [alt]="alt()" [class]="classes()" (error)="failed.set(true)" />
     }
@@ -296,6 +320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{
                     selector: 'ui-avatar-image',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'absolute inset-0 z-10 block',
+                    },
                     template: `
     @if (!failed()) {
       <img [src]="src()" [alt]="alt()" [class]="classes()" (error)="failed.set(true)" />
@@ -305,7 +332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class AvatarFallbackComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('absolute inset-0 z-0 flex items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarFallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarFallbackComponent, isStandalone: true, selector: "ui-avatar-fallback", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -318,10 +345,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AvatarBadgeComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('absolute bottom-0 right-0 z-10 flex size-4 translate-x-1/4 translate-y-1/4 items-center justify-center rounded-full border-2 border-background bg-primary text-[0.625rem] font-medium leading-none text-primary-foreground shadow-sm [&>*]:pointer-events-none [&>*]:size-2.5 [&>*]:shrink-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarBadgeComponent, isStandalone: true, selector: "ui-avatar-badge", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-avatar-badge',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AvatarGroupComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex items-center [&>*]:ring-2 [&>*]:ring-background [&>*:not(:first-child)]:-ml-3', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarGroupComponent, isStandalone: true, selector: "ui-avatar-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-avatar-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class AvatarGroupCountComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarGroupCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AvatarGroupCountComponent, isStandalone: true, selector: "ui-avatar-group-count", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarGroupCountComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-avatar-group-count',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const badgeVariants = cva([
-    'inline-flex items-center rounded-full border px-2.5 py-0.5',
+    'inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5',
     'text-xs font-semibold transition-colors',
+    '[&>svg]:size-3 [&>svg]:shrink-0',
     'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 ].join(' '), {
     variants: {
@@ -329,7 +402,9 @@ const badgeVariants = cva([
             default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
             secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
             destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-            outline: 'text-foreground',
+            outline: 'bg-transparent text-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
+            link: 'border-transparent bg-transparent text-foreground underline-offset-4 hover:underline',
         },
     },
     defaultVariants: { variant: 'default' },
@@ -340,12 +415,12 @@ class BadgeComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn(badgeVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: BadgeComponent, isStandalone: true, selector: "ui-badge, span[ui-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: BadgeComponent, isStandalone: true, selector: "ui-badge, [ui-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ui-badge, span[ui-badge]',
+                    selector: 'ui-badge, [ui-badge]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
@@ -353,8 +428,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class BreadcrumbComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb, nav[ui-breadcrumb]", host: { properties: { "attr.aria-label": "\"breadcrumb\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb, nav[ui-breadcrumb]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "\"breadcrumb\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
@@ -362,11 +439,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     selector: 'ui-breadcrumb, nav[ui-breadcrumb]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
+                        '[class]': 'classes()',
                         '[attr.aria-label]': '"breadcrumb"',
                     },
                     template: `<ng-content />`,
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class BreadcrumbListComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -479,7 +557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class BreadcrumbEllipsisComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex h-9 w-9 items-center justify-center', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex h-9 w-9 items-center justify-center', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BreadcrumbEllipsisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: BreadcrumbEllipsisComponent, isStandalone: true, selector: "span[ui-breadcrumb-ellipsis]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation", "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
     <svg
@@ -543,10 +621,14 @@ const buttonVariants = cva([
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
+            xs: 'h-7 rounded-md px-2.5 text-xs',
             default: 'h-9 px-4 py-2',
             sm: 'h-8 rounded-md px-3 text-xs',
             lg: 'h-10 rounded-md px-8',
-            icon: 'h-9 w-9',
+            'icon-xs': 'h-7 w-7 p-0',
+            'icon-sm': 'h-8 w-8 p-0',
+            icon: 'h-9 w-9 p-0',
+            'icon-lg': 'h-10 w-10 p-0',
         },
     },
     defaultVariants: { variant: 'default', size: 'default' },
@@ -630,24 +712,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardComponent {
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('rounded-lg border bg-card text-card-foreground shadow-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block rounded-lg border border-border bg-card text-card-foreground shadow-sm', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-card',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardHeaderComponent {
+    card = inject(CardComponent, { optional: true });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex flex-col gap-1.5 p-6', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.card?.size() === 'sm'
+        ? 'grid auto-rows-min grid-cols-[1fr_auto] items-start gap-1 p-4'
+        : 'grid auto-rows-min grid-cols-[1fr_auto] items-start gap-1.5 p-6', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardHeaderComponent, isStandalone: true, selector: "ui-card-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -662,8 +751,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardTitleComponent {
+    card = inject(CardComponent, { optional: true });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.card?.size() === 'sm'
+        ? 'block col-start-1 text-base font-semibold leading-none tracking-tight'
+        : 'block col-start-1 text-lg font-semibold leading-none tracking-tight', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardTitleComponent, isStandalone: true, selector: "ui-card-title, h3[ui-card-title]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -678,8 +770,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardDescriptionComponent {
+    card = inject(CardComponent, { optional: true });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.card?.size() === 'sm'
+        ? 'block col-start-1 text-xs text-muted-foreground'
+        : 'block col-start-1 text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardDescriptionComponent, isStandalone: true, selector: "ui-card-description, p[ui-card-description]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -693,9 +788,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+class CardActionComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('col-start-2 row-span-2 row-start-1 flex items-center self-start justify-self-end', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardActionComponent, isStandalone: true, selector: "ui-card-action", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-action',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 class CardContentComponent {
+    card = inject(CardComponent, { optional: true });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('p-6 pt-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.card?.size() === 'sm' ? 'block p-4 pt-0' : 'block p-6 pt-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardContentComponent, isStandalone: true, selector: "ui-card-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -710,8 +822,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardFooterComponent {
+    card = inject(CardComponent, { optional: true });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex items-center p-6 pt-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(this.card?.size() === 'sm' ? 'flex items-center p-4 pt-0' : 'flex items-center p-6 pt-0', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CardFooterComponent, isStandalone: true, selector: "ui-card-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -725,16 +838,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+let nextCheckboxId = 0;
 class CheckboxComponent {
+    id = input(`ui-checkbox-${nextCheckboxId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     checkedChange = output();
     ref = viewChild.required('ref');
     checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    ariaInvalidAttr = computed(() => {
+        const value = this.ariaInvalid();
+        if (value === false || value === 'false' || value == null) {
+            return null;
+        }
+        return value === true || value === '' ? 'true' : `${value}`;
+    }, ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('ui-checkbox', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
@@ -757,24 +884,28 @@ class CheckboxComponent {
         this.onTouched = fn;
     }
     setDisabledState(d) {
-        this.disabled.set(d);
+        this.disabledState.set(d);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <mat-checkbox
       #ref
       disableRipple
+      [id]="id()"
+      [name]="name()"
       [class]="classes()"
       [checked]="checked()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [indeterminate]="indeterminate()"
       [required]="required()"
       [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-invalid]="ariaInvalidAttr()"
       (change)="handleChange($event)">
       <ng-content />
     </mat-checkbox>
-  `, isInline: true, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-checkbox{--mdc-checkbox-selected-icon-color: hsl(var(--primary));--mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));--mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--primary));--mdc-checkbox-unselected-icon-color: hsl(var(--input));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--input));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--input));--mdc-checkbox-selected-checkmark-color: hsl(var(--primary-foreground));--mdc-checkbox-selected-focus-state-layer-color: transparent;--mdc-checkbox-selected-hover-state-layer-color: transparent;--mdc-checkbox-selected-pressed-state-layer-color: transparent;--mdc-checkbox-unselected-focus-state-layer-color: transparent;--mdc-checkbox-unselected-hover-state-layer-color: transparent;--mdc-checkbox-unselected-pressed-state-layer-color: transparent;--mdc-checkbox-state-layer-size: 1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-touch-target{display:none}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:1rem;height:1rem;border-radius:var(--radius-sm);border-width:var(--border-width)}:host ::ng-deep .mat-mdc-checkbox .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-checkbox .mdc-label{padding:0;margin:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-checkbox{--mdc-checkbox-selected-icon-color: hsl(var(--primary));--mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));--mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--primary));--mdc-checkbox-unselected-icon-color: hsl(var(--input));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--input));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--input));--mdc-checkbox-selected-checkmark-color: hsl(var(--primary-foreground));--mdc-checkbox-selected-focus-state-layer-color: transparent;--mdc-checkbox-selected-hover-state-layer-color: transparent;--mdc-checkbox-selected-pressed-state-layer-color: transparent;--mdc-checkbox-unselected-focus-state-layer-color: transparent;--mdc-checkbox-unselected-hover-state-layer-color: transparent;--mdc-checkbox-unselected-pressed-state-layer-color: transparent;--mdc-checkbox-state-layer-size: 1rem}:host ::ng-deep .mat-mdc-checkbox[aria-invalid=true]{--mdc-checkbox-selected-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-focus-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-hover-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-checkmark-color: hsl(var(--destructive-foreground));--mdc-checkbox-unselected-icon-color: hsl(var(--destructive));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--destructive));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--destructive))}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-touch-target{display:none}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:1rem;height:1rem;border-radius:var(--radius-sm);border-width:var(--border-width)}:host ::ng-deep .mat-mdc-checkbox[aria-invalid=true] .mdc-checkbox__background{box-shadow:0 0 0 3px hsl(var(--destructive) / .12)}:host ::ng-deep .mat-mdc-checkbox .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-checkbox .mdc-label{padding:0;margin:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -782,18 +913,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
     <mat-checkbox
       #ref
       disableRipple
+      [id]="id()"
+      [name]="name()"
       [class]="classes()"
       [checked]="checked()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [indeterminate]="indeterminate()"
       [required]="required()"
       [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-invalid]="ariaInvalidAttr()"
       (change)="handleChange($event)">
       <ng-content />
     </mat-checkbox>
-  `, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-checkbox{--mdc-checkbox-selected-icon-color: hsl(var(--primary));--mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));--mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--primary));--mdc-checkbox-unselected-icon-color: hsl(var(--input));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--input));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--input));--mdc-checkbox-selected-checkmark-color: hsl(var(--primary-foreground));--mdc-checkbox-selected-focus-state-layer-color: transparent;--mdc-checkbox-selected-hover-state-layer-color: transparent;--mdc-checkbox-selected-pressed-state-layer-color: transparent;--mdc-checkbox-unselected-focus-state-layer-color: transparent;--mdc-checkbox-unselected-hover-state-layer-color: transparent;--mdc-checkbox-unselected-pressed-state-layer-color: transparent;--mdc-checkbox-state-layer-size: 1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-touch-target{display:none}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:1rem;height:1rem;border-radius:var(--radius-sm);border-width:var(--border-width)}:host ::ng-deep .mat-mdc-checkbox .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-checkbox .mdc-label{padding:0;margin:0;cursor:pointer}\n"] }]
-        }], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+  `, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-checkbox{--mdc-checkbox-selected-icon-color: hsl(var(--primary));--mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));--mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--primary));--mdc-checkbox-unselected-icon-color: hsl(var(--input));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--input));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--input));--mdc-checkbox-selected-checkmark-color: hsl(var(--primary-foreground));--mdc-checkbox-selected-focus-state-layer-color: transparent;--mdc-checkbox-selected-hover-state-layer-color: transparent;--mdc-checkbox-selected-pressed-state-layer-color: transparent;--mdc-checkbox-unselected-focus-state-layer-color: transparent;--mdc-checkbox-unselected-hover-state-layer-color: transparent;--mdc-checkbox-unselected-pressed-state-layer-color: transparent;--mdc-checkbox-state-layer-size: 1rem}:host ::ng-deep .mat-mdc-checkbox[aria-invalid=true]{--mdc-checkbox-selected-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-focus-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-hover-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-pressed-icon-color: hsl(var(--destructive));--mdc-checkbox-selected-checkmark-color: hsl(var(--destructive-foreground));--mdc-checkbox-unselected-icon-color: hsl(var(--destructive));--mdc-checkbox-unselected-focus-icon-color: hsl(var(--destructive));--mdc-checkbox-unselected-hover-icon-color: hsl(var(--destructive))}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep .mat-mdc-checkbox .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox-touch-target{display:none}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox{padding:0;margin:0;flex:0 0 1rem;width:1rem;height:1rem}:host ::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:1rem;height:1rem;border-radius:var(--radius-sm);border-width:var(--border-width)}:host ::ng-deep .mat-mdc-checkbox[aria-invalid=true] .mdc-checkbox__background{box-shadow:0 0 0 3px hsl(var(--destructive) / .12)}:host ::ng-deep .mat-mdc-checkbox .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-checkbox .mdc-label{padding:0;margin:0;cursor:pointer}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /** Base class exposed to children for context lookup. */
 class CommandContextBase {
@@ -839,6 +974,12 @@ class CommandComponent extends CommandContextBase {
         vis.forEach((i, k) => i._setActive(k === 0));
         vis[0]?.focus();
     }
+    hasVisibleItems() {
+        return this.visibleItems().length > 0;
+    }
+    activateOnly(item) {
+        this.items().forEach((entry) => entry._setActive(entry === item));
+    }
     /** Returns the first visible item's text if any. Used when user hits Enter with no active. */
     getActive() {
         return this.visibleItems().find((i) => i.active()) ?? this.visibleItems()[0] ?? null;
@@ -917,17 +1058,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class CommandEmptyComponent {
+    ctx = inject(CommandComponent);
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CommandEmptyComponent, isStandalone: true, selector: "ui-command-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CommandEmptyComponent, isStandalone: true, selector: "ui-command-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CommandEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-command-empty',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[hidden]': 'ctx.hasVisibleItems()',
+                    },
                     template: `<ng-content>No results found.</ng-content>`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
@@ -1003,9 +1148,7 @@ class CommandItemComponent {
     onHover() {
         if (this.disabled())
             return;
-        // Mark this item active; deactivate siblings.
-        this.ctx._activateOnly?.(this);
-        this._setActive(true);
+        this.ctx.activateOnly(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CommandItemComponent, isStandalone: true, selector: "ui-command-item, button[ui-command-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1045,6 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+let nextComboboxId = 0;
 /**
  * Combobox with searchable option list. Options passed via `[options]`.
  * Emits two-way `value` and supports forms via ControlValueAccessor.
@@ -1053,6 +1197,7 @@ class ComboboxComponent {
     overlay = inject(Overlay);
     vcr = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
+    instanceId = `ui-combobox-${nextComboboxId++}`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -1065,8 +1210,10 @@ class ComboboxComponent {
     panel = viewChild.required('panel');
     overlayRef = null;
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('inline-block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    triggerClasses = computed(() => cn(buttonVariants({ variant: 'outline', size: 'default' }), 'w-[200px] justify-between'), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    triggerId = `${this.instanceId}-trigger`;
+    panelId = `${this.instanceId}-panel`;
+    classes = computed(() => cn('inline-block min-w-[200px]', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn(buttonVariants({ variant: 'outline', size: 'default' }), 'w-full justify-between'), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     selectedLabel = computed(() => {
         const v = this.value();
         return this.options().find((o) => o.value === v)?.label ?? '';
@@ -1143,9 +1290,11 @@ class ComboboxComponent {
     <button
       #trigger
       type="button"
+      [attr.id]="triggerId"
       role="combobox"
+      aria-haspopup="listbox"
       [attr.aria-expanded]="isOpen()"
-      [attr.aria-controls]="isOpen() ? 'ui-combobox-panel' : null"
+      [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
       [disabled]="disabled() || null"
       (click)="toggle()">
@@ -1166,7 +1315,7 @@ class ComboboxComponent {
 
     <ng-template #panel>
       <div
-        id="ui-combobox-panel"
+        [attr.id]="panelId"
         class="w-[var(--ui-combobox-trigger-width)] rounded-md border bg-popover text-popover-foreground shadow-md">
         <ui-command>
           <input ui-command-input [placeholder]="searchPlaceholder()" />
@@ -1221,9 +1370,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
     <button
       #trigger
       type="button"
+      [attr.id]="triggerId"
       role="combobox"
+      aria-haspopup="listbox"
       [attr.aria-expanded]="isOpen()"
-      [attr.aria-controls]="isOpen() ? 'ui-combobox-panel' : null"
+      [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
       [disabled]="disabled() || null"
       (click)="toggle()">
@@ -1244,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 
     <ng-template #panel>
       <div
-        id="ui-combobox-panel"
+        [attr.id]="panelId"
         class="w-[var(--ui-combobox-trigger-width)] rounded-md border bg-popover text-popover-foreground shadow-md">
         <ui-command>
           <input ui-command-input [placeholder]="searchPlaceholder()" />
@@ -1312,6 +1463,16 @@ class ContextMenuTriggerDirective {
         this.close();
         this.openAt(event.clientX, event.clientY);
     }
+    onKeyDown(event) {
+        const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
+        if (!isContextMenuKey || this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        this.close();
+        this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    }
     openAt(x, y) {
         this.overlayRef = this.overlay.create({
             positionStrategy: this.overlay
@@ -1344,7 +1505,7 @@ class ContextMenuTriggerDirective {
         this.openedChange.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[uiContextMenuTrigger]", inputs: { uiContextMenuTrigger: { classPropertyName: "uiContextMenuTrigger", publicName: "uiContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, exportAs: ["uiContextMenuTrigger"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[uiContextMenuTrigger]", inputs: { uiContextMenuTrigger: { classPropertyName: "uiContextMenuTrigger", publicName: "uiContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["uiContextMenuTrigger"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -1353,6 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     exportAs: 'uiContextMenuTrigger',
                     host: {
                         '(contextmenu)': 'onContextMenu($event)',
+                        '(keydown)': 'onKeyDown($event)',
                     },
                 }]
         }], propDecorators: { uiContextMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiContextMenuTrigger", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
@@ -1466,6 +1628,8 @@ class DialogComponent {
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    closeButtonLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
     labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
@@ -1527,7 +1691,7 @@ class DialogComponent {
         this.requestClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: DialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="ui-dialog-surface"
@@ -1536,16 +1700,30 @@ class DialogComponent {
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
         [class]="surfaceClasses()">
+        @if (showCloseButton()) {
+          <button
+            type="button"
+            ui-button
+            variant="ghost"
+            size="icon-sm"
+            class="ui-dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-label]="closeButtonLabel()"
+            (click)="close()">
+            <span aria-hidden="true">X</span>
+            <span class="sr-only">{{ closeButtonLabel() }}</span>
+          </button>
+        }
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-dialog',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ButtonComponent],
                     template: `
     <ng-template #tpl>
       <div
@@ -1555,12 +1733,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
         [class]="surfaceClasses()">
+        @if (showCloseButton()) {
+          <button
+            type="button"
+            ui-button
+            variant="ghost"
+            size="icon-sm"
+            class="ui-dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            [attr.aria-label]="closeButtonLabel()"
+            (click)="close()">
+            <span aria-hidden="true">X</span>
+            <span class="sr-only">{{ closeButtonLabel() }}</span>
+          </button>
+        }
         <ng-content />
       </div>
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+
+class DialogCloseDirective {
+    dialog = inject(DialogComponent);
+    closeDialog() {
+        this.dialog.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: DialogCloseDirective, isStandalone: true, selector: "button[ui-dialog-close], a[ui-dialog-close]", host: { listeners: { "click": "closeDialog()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ui-dialog-close], a[ui-dialog-close]',
+                    host: {
+                        '(click)': 'closeDialog()',
+                    },
+                }]
+        }] });
 
 class DialogHeaderComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
@@ -1638,45 +1847,234 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class MenuItemComponent {
+class MenuFocusableItem {
     el = inject(ElementRef);
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     inset = input(false, ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     selected = output();
-    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'transition-colors focus:bg-accent focus:text-accent-foreground', 'data-[inset=true]:pl-8', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get disabled() {
+        return this.disabledInput();
+    }
     focus() {
         this.el.nativeElement.focus();
     }
     getLabel() {
         return this.el.nativeElement.textContent?.trim() ?? '';
     }
+    buildItemClasses(extraClass = '') {
+        return cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'transition-colors focus:bg-accent focus:text-accent-foreground', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', 'data-[inset=true]:pl-8', 'data-[variant=destructive]:text-destructive', 'data-[variant=destructive]:focus:bg-destructive/10', 'data-[variant=destructive]:focus:text-destructive', extraClass, this.class());
+    }
+    emitSelection(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return false;
+        }
+        this.selected.emit(event);
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuFocusableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: MenuFocusableItem, isStandalone: true, inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuFocusableItem, decorators: [{
+            type: Directive
+        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+class MenuGroupComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MenuGroupComponent, isStandalone: true, selector: "ui-menu-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menu-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuRadioGroupBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioGroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: MenuRadioGroupBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioGroupBase, decorators: [{
+            type: Directive
+        }] });
+class MenuRadioGroupComponent extends MenuRadioGroupBase {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    isChecked(value) {
+        return this.value() === value;
+    }
+    select(value) {
+        this.value.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MenuRadioGroupComponent, isStandalone: true, selector: "ui-menu-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, providers: [{ provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menu-radio-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class MenuItemComponent extends MenuFocusableItem {
+    classes = computed(() => this.buildItemClasses(), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     handleClick(e) {
-        if (this.disabled())
-            return;
-        this.selected.emit(e);
+        this.emitSelection(e);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MenuItemComponent, isStandalone: true, selector: "ui-menu-item, button[ui-menu-item]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.tabindex": "disabled() ? -1 : -1", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MenuItemComponent, isStandalone: true, selector: "ui-menu-item, button[ui-menu-item]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-menu-item, button[ui-menu-item]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menuitem"',
-                        '[attr.tabindex]': 'disabled() ? -1 : -1',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
                         '[attr.data-inset]': 'inset() ? "true" : null',
+                        '[attr.data-variant]': 'variant()',
                         '(click)': 'handleClick($any($event))',
                         '(keydown.enter)': 'handleClick($any($event))',
                         '(keydown.space)': 'handleClick($any($event))',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }] });
+class MenuCheckboxItemComponent extends MenuFocusableItem {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    classes = computed(() => this.buildItemClasses('pl-8'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    toggle(event) {
+        if (!this.emitSelection(event)) {
+            return;
+        }
+        this.checked.set(!this.checked());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuCheckboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MenuCheckboxItemComponent, isStandalone: true, selector: "ui-menu-checkbox-item, button[ui-menu-checkbox-item]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "toggle($any($event))", "keydown.enter": "toggle($any($event))", "keydown.space": "toggle($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemcheckbox\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) }], usesInheritance: true, ngImport: i0, template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <svg
+          aria-hidden="true"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menu-checkbox-item, button[ui-menu-checkbox-item]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menuitemcheckbox"',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-variant]': 'variant()',
+                        '(click)': 'toggle($any($event))',
+                        '(keydown.enter)': 'toggle($any($event))',
+                        '(keydown.space)': 'toggle($any($event))',
+                    },
+                    template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <svg
+          aria-hidden="true"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+class MenuRadioItemComponent extends MenuFocusableItem {
+    group = inject(MenuRadioGroupBase);
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group.isChecked(this.value()), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    classes = computed(() => this.buildItemClasses('pl-8'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    select(event) {
+        if (!this.emitSelection(event)) {
+            return;
+        }
+        this.group.select(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MenuRadioItemComponent, isStandalone: true, selector: "ui-menu-radio-item, button[ui-menu-radio-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "select($any($event))", "keydown.enter": "select($any($event))", "keydown.space": "select($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemradio\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) }], usesInheritance: true, ngImport: i0, template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
+      }
+    </span>
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menu-radio-item, button[ui-menu-radio-item]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menuitemradio"',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? "true" : null',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+                        '[attr.data-variant]': 'variant()',
+                        '(click)': 'select($any($event))',
+                        '(keydown.enter)': 'select($any($event))',
+                        '(keydown.space)': 'select($any($event))',
+                    },
+                    template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
+      }
+    </span>
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 class MenuSeparatorComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('-mx-1 my-1 h-px bg-muted block', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -1740,7 +2138,8 @@ class MenuSurfaceComponent {
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.items)
             .withWrap()
-            .withTypeAhead();
+            .withTypeAhead()
+            .skipPredicate((item) => item.disabled);
         // Focus the first enabled item when the menu opens.
         queueMicrotask(() => this.keyManager?.setFirstItemActive());
     }
@@ -1763,7 +2162,7 @@ class MenuSurfaceComponent {
         this.closeRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MenuSurfaceComponent, isStandalone: true, selector: "ui-menu-surface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuItemComponent, descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MenuSurfaceComponent, isStandalone: true, selector: "ui-menu-surface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuSurfaceComponent, decorators: [{
             type: Component,
@@ -1784,7 +2183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{
                 type: ContentChildren,
-                args: [MenuItemComponent, { descendants: true }]
+                args: [MenuFocusableItem, { descendants: true }]
             }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 /**
  * Wraps an `<ng-template>` that holds `<ui-menu-surface>` + items.
@@ -2120,6 +2519,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const GROUP_BASE = [
+    'relative flex min-w-0 flex-wrap overflow-hidden rounded-[var(--radius)] border border-input bg-transparent text-sm shadow-sm',
+    'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    '[&>[data-slot=input-group-control]]:min-w-0',
+    '[&>[data-slot=input-group-control]]:flex-1',
+    '[&>[data-slot=input-group-control]]:rounded-none',
+    '[&>[data-slot=input-group-control]]:border-0',
+    '[&>[data-slot=input-group-control]]:bg-transparent',
+    '[&>[data-slot=input-group-control]]:shadow-none',
+    '[&>[data-slot=input-group-control]]:outline-none',
+    '[&>[data-slot=input-group-control]]:focus-visible:ring-0',
+    '[&>[data-slot=input-group-control]]:focus-visible:outline-none',
+].join(' ');
+const addonAlignClasses = {
+    'inline-start': ['order-10', '[border-inline-end-width:1px]', '[border-inline-end-color:hsl(var(--border))]'].join(' '),
+    'inline-end': ['order-30', '[border-inline-start-width:1px]', '[border-inline-start-color:hsl(var(--border))]'].join(' '),
+    'block-start': [
+        'order-0 basis-full py-2',
+        '[border-block-end-width:1px]',
+        '[border-block-end-color:hsl(var(--border))]',
+    ].join(' '),
+    'block-end': [
+        'order-40 basis-full py-2',
+        '[border-block-start-width:1px]',
+        '[border-block-start-color:hsl(var(--border))]',
+    ].join(' '),
+};
+const ADDON_BASE = [
+    'flex min-h-9 shrink-0 items-center gap-1.5 bg-muted/30 px-3 text-sm text-muted-foreground',
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+].join(' ');
+const CONTROL_BASE = [
+    'order-20 min-w-0 flex-1 bg-transparent text-sm text-foreground',
+    'placeholder:text-muted-foreground',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'focus-visible:outline-none',
+    'aria-[invalid=true]:text-destructive',
+].join(' ');
+class InputGroupComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(GROUP_BASE, this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupComponent, isStandalone: true, selector: "ui-input-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-input-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupAddonComponent {
+    align = input('inline-start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(ADDON_BASE, addonAlignClasses[this.align()], this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupAddonComponent, isStandalone: true, selector: "ui-input-group-addon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-align": "align()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupAddonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-input-group-addon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-align]': 'align()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupTextComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex items-center gap-1.5 whitespace-nowrap text-sm leading-none text-current', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupTextComponent, isStandalone: true, selector: "ui-input-group-text", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-input-group-text',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupButtonComponent {
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('xs', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'shrink-0 shadow-none', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupButtonComponent, isStandalone: true, selector: "button[ui-input-group-button], a[ui-input-group-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[ui-input-group-button], a[ui-input-group-button]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupInputComponent {
+    el = inject(ElementRef);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(CONTROL_BASE, 'h-9 px-3 py-2', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupInputComponent, isStandalone: true, selector: "input[ui-input-group-input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[ui-input-group-input]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-slot': 'input-group-control',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputGroupTextareaComponent {
+    el = inject(ElementRef);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(CONTROL_BASE, 'min-h-[120px] w-full resize-none px-3 py-2.5', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: InputGroupTextareaComponent, isStandalone: true, selector: "textarea[ui-input-group-textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InputGroupTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[ui-input-group-textarea]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-slot': 'input-group-control',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const itemVariants = cva(['flex w-full flex-wrap items-center gap-x-3 gap-y-3', 'text-foreground', '[&[href]]:no-underline'].join(' '), {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'rounded-xl border border-border bg-background px-4 py-3 shadow-sm',
+            muted: 'rounded-xl bg-muted/50 px-4 py-3',
+        },
+        size: {
+            default: 'text-sm',
+            sm: 'gap-x-2.5 gap-y-2 text-sm',
+            xs: 'gap-x-2 gap-y-2 text-xs',
+        },
+        interactive: {
+            true: 'cursor-pointer rounded-xl transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        interactive: false,
+    },
+});
+const itemMediaVariants = cva('flex shrink-0 items-center justify-center text-muted-foreground', {
+    variants: {
+        variant: {
+            default: '[&>svg]:size-5 [&>svg]:shrink-0',
+            icon: 'border border-border bg-muted/50 [&>svg]:size-4 [&>svg]:shrink-0',
+            image: 'overflow-hidden [&>img]:h-full [&>img]:w-full [&>img]:object-cover',
+        },
+        size: {
+            default: '',
+            sm: '',
+            xs: '',
+        },
+    },
+    compoundVariants: [
+        { variant: 'icon', size: 'default', class: 'size-10 rounded-lg' },
+        { variant: 'icon', size: 'sm', class: 'size-9 rounded-md' },
+        { variant: 'icon', size: 'xs', class: 'size-8 rounded-md' },
+        { variant: 'image', size: 'default', class: 'h-10 w-10 rounded-md' },
+        { variant: 'image', size: 'sm', class: 'h-9 w-9 rounded-md' },
+        { variant: 'image', size: 'xs', class: 'h-8 w-8 rounded-sm' },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+
+const ITEM_TITLE_CLASSES = {
+    default: 'text-sm leading-5',
+    sm: 'text-sm leading-5',
+    xs: 'text-xs leading-4',
+};
+const ITEM_DESCRIPTION_CLASSES = {
+    default: 'text-sm leading-5',
+    sm: 'text-xs leading-4',
+    xs: 'text-xs leading-4',
+};
+class ItemComponent {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    interactive = ['a', 'button'].includes(this.host.nativeElement.tagName.toLowerCase());
+    classes = computed(() => cn(itemVariants({ variant: this.variant(), size: this.size(), interactive: this.interactive }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemComponent, isStandalone: true, selector: "ui-item, [ui-item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-interactive": "interactive ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item, [ui-item]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-interactive]': 'interactive ? "true" : null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemGroupComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex w-full flex-col gap-3', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemGroupComponent, isStandalone: true, selector: "ui-item-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemSeparatorComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block h-px w-full bg-border', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemSeparatorComponent, isStandalone: true, selector: "ui-item-separator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-separator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'separator',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemHeaderComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('basis-full overflow-hidden rounded-lg', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemHeaderComponent, isStandalone: true, selector: "ui-item-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemMediaComponent {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    item = inject(ItemComponent, { optional: true });
+    classes = computed(() => cn(itemMediaVariants({ variant: this.variant(), size: this.item?.size() ?? 'default' }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemMediaComponent, isStandalone: true, selector: "ui-item-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemMediaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-media',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemContentComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex min-w-0 flex-1 basis-0 flex-col justify-center gap-0.5', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemContentComponent, isStandalone: true, selector: "ui-item-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemTitleComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    item = inject(ItemComponent, { optional: true });
+    classes = computed(() => cn('block min-w-0 truncate font-medium text-foreground', ITEM_TITLE_CLASSES[this.item?.size() ?? 'default'], this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemTitleComponent, isStandalone: true, selector: "ui-item-title", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-title',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemDescriptionComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    item = inject(ItemComponent, { optional: true });
+    classes = computed(() => cn('block min-w-0 text-muted-foreground', ITEM_DESCRIPTION_CLASSES[this.item?.size() ?? 'default'], this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemDescriptionComponent, isStandalone: true, selector: "ui-item-description", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-description',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemActionsComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ms-auto flex shrink-0 items-center gap-2', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemActionsComponent, isStandalone: true, selector: "ui-item-actions", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-actions',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ItemFooterComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('basis-full text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ItemFooterComponent, isStandalone: true, selector: "ui-item-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ItemFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-item-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': 'classes()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 class LabelComponent {
     for = input(null, ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
@@ -4065,5 +4847,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertActionComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarBadgeComponent, AvatarComponent, AvatarFallbackComponent, AvatarGroupComponent, AvatarGroupCountComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardActionComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemSeparatorComponent, ItemTitleComponent, LabelComponent, MenuCheckboxItemComponent, MenuContentDirective, MenuFocusableItem, MenuGroupComponent, MenuItemComponent, MenuLabelComponent, MenuRadioGroupBase, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn, itemMediaVariants, itemVariants };
 //# sourceMappingURL=ojiepermana-angular-component.mjs.map